EVENT CLICK PROPAGATED EVEN WITHOUT HANDLER

Question

<body>
  <form id="form">FORM
    <div id="div" style="background-color: aqua;">DIV
      <p id="p" style="background-color: blue;">P</p>
    </div>
  </form>
  <script src="index.js"></script>
</body>

Although I don't have a click handler on p nor on div (it's on purpose), when I click for example on div it triggers the click on a more external element (form).

JS:

let form = document.getElementById('form');
let div = document.getElementById('div');
let p = document.getElementById('p');

form.addEventListener("click", e => { // why is this event triggered when I click on p or div?
  console.log("capturing form")
}, true);
div.addEventListener("focus", e => { // it's intentional
  console.log("capturing div")
}, true);
p.addEventListener("focus", e => { // it's intentional
  console.log("capturing p")
}, true);

Ouput:

capturing form

Is this the expected behavior?

Trung Duong · Accepted Answer · 2023-02-22T18:24:36.637

0

Click handler for an event is a function that define further processing when an event occurs. With or without handler function, event will be fired by browser anyway.

As you could see in below snippet, the click event will be propagated from child element to parent elements. The event bubbling is expected behavior for click event.

let form = document.getElementById('form');

form.addEventListener("click", e => {
  console.log("** click event on element: " + e.target.id);
  console.log(".  bubbling to element: " + e. currentTarget.id);
}, true);

form.addEventListener("keyup", e => {
  console.log("** keyup event on element: " + e.target.id);
  console.log("   bubbling to element: " + e. currentTarget.id);
}, true);

form.addEventListener("focusin", e => {
  console.log("** focusin event on element: " + e.target.id);
  console.log("   bubbling to element: " + e. currentTarget.id);
}, true);

<form id="form" >FORM
    <div id="div" style="background-color: aqua;">DIV
      <p id="p" style="background-color: blue;">P</p>
      <input id="text" type="text" />
    </div>
  </form>

edited Feb 22 '23 at 18:24

answered Feb 22 '23 at 15:53

Trung Duong

3,475
2
8
9

hi @Trung Duong, I did it intentionally because it's part of the question, focus is not related to click but a click activates in form. – Feb 22 '23 at 16:07
1

Yes, I've edited my answer according to your updated question. The event bubbling is normal behavior for clicked event. If you want, you could stop the event bubbling in you click handler function https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute – Trung Duong Feb 22 '23 at 16:13
1

@Coder23 In addition, if you want `focus` event to be triggered, you should set tabindex for corresponding elements. – Trung Duong Feb 22 '23 at 16:14
but, why does a click on p (which has no click handler but focus) trigger the click event in form? According to me it has no relation @Trung Duong – Feb 22 '23 at 16:23
It should propagate only if p has a click handler, right? – Feb 22 '23 at 16:25
1

When you click on 1 element, whether or not this element has click handler, this click event will be bubbling up to it parent. You could find out more about it on this link https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling – Trung Duong Feb 22 '23 at 16:26
1

Click handler for an event is a function that define further processing when an event occurs. With or without handler function, event will be fired by browser anyway. – Trung Duong Feb 22 '23 at 16:33
*whether or not this element has click handler, this click event will be bubbling up to it parent* - where is that mentioned @Trung Duong? – Feb 22 '23 at 17:19
1

@GeorgeMeijer You could try out my updated snippet to see id of the target element that trigger click event and bubbling up (without any handler attach to it) or follow this link to see all events trigger on an element https://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools – Trung Duong Feb 22 '23 at 17:59
hi @Trung Duong, this thing about events propagating to ancestors without a handler, does it apply only to click? – Feb 22 '23 at 18:12
1

@GeorgeMeijer It's also happen (event bubbling) for other event like `keyup`, `keydown`, `focusin`... I've added some sample events to my answer, please check. – Trung Duong Feb 22 '23 at 18:27
Now I understand @Trung Duong +1. The capture phase events are triggered first and then the bubbling phase events, right? The "affected" elements are all those participating as descendants (capturing) / ascendants (bubbling) of the target, right? – Feb 22 '23 at 21:06
1

@Coder23 Yes, when an element receives an event, that event bubbles up (or we can say is transmitted or propagated) to its parent and ancestor elements in the DOM tree until it gets to the root element. Please not that some specific events will not bubbling up to its parents, for example `focus`, `blur`... – Trung Duong Feb 23 '23 at 04:25

EVENT CLICK PROPAGATED EVEN WITHOUT HANDLER

1 Answers1