4

When I try add an event listener to the invalid event of the document it is not called when I use the default event bubbling like this.

document.addEventListener("invalid", function (e) {
    console.log(e.target);
}, false);

When I set the last parameter to true the event listener is called like expected. Thanks to What is event bubbling and capturing? I think I understand the difference between event capturing and bubbling, but I don't understand how this applies to my case. Why is it making a difference here?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
urbaindepuce
  • 503
  • 1
  • 5
  • 17

1 Answers1

4

According to the MDN reference, which is usually accurate and which appears to match reality in this case, invalid events do not bubble. They fire only on the input and the form.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    Thank you. I am a little bit confused now. Please see the jsFiddle I posted as comment to my question. When I am adding an event listener using in the same way to the textbox instead of the document it works. When the event does not bubble, I have to capture it in the capturing phase, right? But why does this example work then? http://jsfiddle.net/urbaindepuce/jMExZ/ – urbaindepuce Aug 27 '13 at 11:16
  • Because the event is firing on the input and you are listening on the input. There is no bubbling involved (which is when the event is passed up the DOM tree firing on each element along the way). – Quentin Aug 27 '13 at 11:22
  • So when I add the event listener to the document it would bubble up from the target (the invalid control) to the document if bubbling would be enabled? I first thought that when attaching the listener to the document there is no bubbling because it already is the top most element. Thats why I did not understand it. Do events always bubble up or capture down from e.target to the element to which the event listener is attached to? – urbaindepuce Aug 27 '13 at 11:30
  • 1
    Only on inputs, not on the `
    ` element (as stated in your answer's last words). [Example](https://jsbin.com/celigul/edit?html,js,console,output). [HTMLFormElement events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement#events)
     – vsync Mar 29 '21 at 09:26