seen from China
seen from Poland
seen from Russia
seen from United States
seen from Malaysia
seen from Malaysia
seen from United States
seen from Austria
seen from India
seen from China
seen from Brazil
seen from United States
seen from Japan
seen from Canada
seen from Japan
seen from Canada
seen from Canada
seen from Netherlands
seen from T1
seen from United States
what is event bubbling? How does event bubbles up? In this post, I'll explain how event bubbling happens and how to achieve event bubbling with JavaScript and jQuery using event delegation. Event dele
event bubbling is an awesome concept of bubbling the event up the hierarchy.
In this post, we’ll see what is event bubbling? and how to implement event bubbling?
JS - What is event delegation and event propagation?
Event delegation is when you attach a listener to an element, all of its children will also be able to trigger that listener. An example would be if you had a <ul></ul> of 10 <li></li> . You would just need to have one event listener on the <ul></ul>.
Event bubbling and capturing are two ways of propagation.
Bubbling means that when a child and parent both have an event listener for the same event, the child handles the event before the parent.
Capturing is the opposite and means that the parent will handle the event before its children.
Why don’t my event handlers fire for dynamically-added elements?
TL/DR: Because event handlers can only be bound to elements which exist in the DOM at the time you add them.
I hear this question asked often enough that it seemed worth documenting.
For dynamically-added elements, the event handler must be added to a parent object which exists in the page before the event handler code is called. That can be as vague as the page body, or something more specific when known, and pass it a selector matching your dynamic object.
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().
From the jQuery $.on() documentation
Each time an event occurs on an element, it bubbles up through the DOM tree (unless you tell it not to) . If the parent detects that the event originated from the specified child, and there's a handler set for this type of event, then the action is triggered. This is called delegated event handling.
Demo: See this in action
I wondered if delegating the event to the body element rather than something more specific would cause performance issues; basically it depends on which event you're detecting. The jQuery $.on() documentation cautions as follows:
In most cases, an event such as click occurs infrequently and performance is not a significant concern. However, high frequency events such as mousemove or scroll can fire dozens of times per second, and in those cases it becomes more important to use events judiciously. Performance can be increased by reducing the amount of work done in the handler itself, caching information needed by the handler rather than recalculating it, or by rate-limiting the number of actual page updates using setTimeout.
Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.
~ Andy Westmoreland, Frontend Developer
Event Delegation
1. Bind a handler to the container. 2. In the handler: get event.target. 3. If necessary, climb up the target.parentNode chain, until either the first suitable target is found (and handle it), or the container (this) is reached.
http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
Event delegation is an useful and important thing in javascript. It's not really a "must-do" but it's a very useful technique when your javascript becomes looking ugly and over-complicated.
But remember, don't go too far! Putting a single event listener on <body> should not be an option!
This article is well written and explains some pros of event delegation, read it!
