JavaScript wrangler.
Check out my books!
Web API Cookbook:
https://www.amazon.com/Web-API-Cookbook-JavaScript-Applications/dp/1098150694
Modern CSS:
https://www.amazon.com/dp/148426293X
You're talking about event propagation which is a little different than default actions.
preventDefault will stop the browser from taking the default action. For example, pressing Enter in an input field inside a form will submit that form. You can add a keydown listener on the form (or keyup, not 100% sure to be honest) and call preventDefault to prevent the form from being submitted.
Event propagation is simply the event bubbling up the DOM hierarchy. For example, suppose you had a keydown listener on that input field. And you also had a keydown listener on some parent div, for example. By default, that event would propagate up from the input field to the div. If you call stopPropagation() that won't happen.
It's a slight difference but I thought it was worth mentioning!
I hadn't heard of stopPropagation and hadn't really considered event bubbling. You're reply got me reading all through developer.mozilla.org/en-US/docs/L...
My question wasn't very clear and that Mozilla link, while really useful, also doesn't answer it. So I'll try to rephrase.
If you register an event listener with a handler, you have the option of being passed the event object. When your event handler gets called, when bubbling, does the engine then check to see whether the event handler called preventDefault/stopPropagation to determine whether to pass the event object to the next event handler?
And another question. In the case of, for example, a form. When you click submit and you want to preventDefault with your handler, is there default event handler lower in the chain of progression of the event that we are then blocking, or is it something else?
The way the event gets passed between handlers implicitly seems to be confusing me.
None the less, this article and your reply have been interesting to me.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
You're talking about event propagation which is a little different than default actions.
preventDefaultwill stop the browser from taking the default action. For example, pressing Enter in an input field inside a form will submit that form. You can add akeydownlistener on the form (orkeyup, not 100% sure to be honest) and callpreventDefaultto prevent the form from being submitted.Event propagation is simply the event bubbling up the DOM hierarchy. For example, suppose you had a
keydownlistener on that input field. And you also had akeydownlistener on some parentdiv, for example. By default, that event would propagate up from the input field to thediv. If you callstopPropagation()that won't happen.It's a slight difference but I thought it was worth mentioning!
Thank you for that reply.
I hadn't heard of stopPropagation and hadn't really considered event bubbling. You're reply got me reading all through developer.mozilla.org/en-US/docs/L...
My question wasn't very clear and that Mozilla link, while really useful, also doesn't answer it. So I'll try to rephrase.
If you register an event listener with a handler, you have the option of being passed the event object. When your event handler gets called, when bubbling, does the engine then check to see whether the event handler called preventDefault/stopPropagation to determine whether to pass the event object to the next event handler?
And another question. In the case of, for example, a form. When you click submit and you want to preventDefault with your handler, is there default event handler lower in the chain of progression of the event that we are then blocking, or is it something else?
The way the event gets passed between handlers implicitly seems to be confusing me.
None the less, this article and your reply have been interesting to me.