I have read some thing about event propagation…the thing I do not understand is if is undesirable and need to do something to prevent it.
I am little confused about it.
Event propagation is completely desirable, and is something that we rely in quite a bit.
In better detail, You can have an event handler on the form itself waiting for change events to occur. When anything changes, like when you enter info in a text field, the event is triggered first on the field and if it’s not handled there, propagates up to the where it’s caught by the form handler itself.
suppose we have this markup
<form>
<div></div>
</form>
And we attach a click event handler in the div element and another one in the form element.
Each handler executes a different code…doing a different job.
As I see it,it is undesirable for the form click handler to fire when the div element is clicked-since it is there for a different task.
The above example comes in contrast with what you say.
Unless I miss something in which case you are welcome to explain it.
Yes indeed. It’s the “if it’s not handled there” part that is the key. When the event has been captured by something it doesn’t go any further, unless you specifically instruct to keep on bubbling up.
As it can be tricky to explain this in detail, fortunately we have the QuirksMode site that gives us some excellent diagrams on event order, and how they behave under different circumstances.
Can you clarify that Paul? I thought the event always bubbled up (bubbling) (or down for capturing) unless it was explicitly stopped (e.stopPropagation()). I got a little confused with the capture and bubble stages but it seemed both carried on unless explicitly stopped.
CSS Tricks has an article on the dangers of stopping propagation that is an interesting read (for a beginner like me).
Yes, thanks for the correction. It’s getting late here for me sorry, and my thinking on it was off.
The event always keep on bubbling up until you explicitly tell it at some stage to stop bubbling further up.
No worries. I think I’m in danger of actually learning some JS 
That’s because you only have one div in the form. If you had 20 divs in the form then it makes more sense to attach the code to handle processing the divs to the form tag instead of 20 times to each div separately. That way you can handle all the processing from the one event listener instead of having to keep replicating it.
The processing for the form itself can be attached to the form element as well using a separate event listener listening for the same event.
actually the div’s are about 6…there are still not to many though…but,suppose that were 20 or more…the code that will go to the form tag…how it will be.
with event delegation you have the event listener attached to the form tag. It doesn’t matter whether there are six or six billion divs inside the form the same listener will still work for all of them.
If you want extra processing specifically for the form tag you just attach a second listener to the same event for that.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.