sainture
6/28/2015 - 11:03 AM
Event bubbling DOM JavaScript
Event bubbling DOM JavaScript
An event fired on an element bubbles through its ancestor chain (i.e. the event is also fired on those elements). It’s important to note that this isn’t a jQuery feature, nor is it something that a developer must turn on; it’s a fundamental part of JavaScript that has always existed.
Consider the following html:
<body>
<div>
<ul>
<li><span>Hello</span> </li>
<li><span>World</span> </li>
<li><span>Beautiful</span> </li>
</ul>
</div>
</body>
<script>
$(document).ready(function() {
$("body").click(function() {
alert("clicked on body tag");
});
$("div").click(function() {
alert("clicked on div tag");
});
$("ul").click(function() {
alert("clicked on ul tag");
});
$("li").click(function() {
alert("clicked on li tag");
});
$("span").click(function() {
alert("clicked on span tag");
return false;
});
});
</script>
When span element is clicked, the event is bubbled to all its parent elements (all the way up to document object).
Another example:
<div class="d1">1 <!-- the topmost -->
<div class="d2">2
<div class="d3">3 <!-- the innermost -->
</div>
</div>
</div>
The bubbling guarantees that click on Div 3 will trigger onclick first on the innermost element 3 (also caled the target), then on the element 2, and the last will be element 1.
The deepest element which triggered the event is called the target or, the originating element.
(event.target) (srcElement for IE)
cross-browser code is usually like this:
var target = event.target || event.srcElement
When handlers trigger on parents:
event.target/srcElement - remains the same originating element.
this - is the current element, the one event has bubbled to, the one which runs the handler.
(i.e. the 'target' is constant through all bubbling process, 'this' changes)
In W3C-compliant browsers this is also available as event.currentTarget.
Stopping the bubbling
The bubbling goes right to the top. When an event occurs on an element - it will bubble up to <HTML>, triggering handlers on it’s way
But a handler may decide that event is fully processed or stop the bubbling
(i) event.stopPropagation()
(ii) 'return false' from the handler function
Advantages of Bubbling
Case 1:
Imagine you have a table with hundreds of rows. Each row contains a <a /> to which you want to attach a click handler to. With no event-bubbling you’d have to bind the event handler to each <a />; which involves iterating over each element and adding an event handler individually to each one.
Instead, what we could do is bind one click handler to the <table>. Clicking on any row will call the handler of table element (thanks to event bubbling) and you can use event.target to find out which row was clicked.
$('#the-table').on('click', 'a', function (e) {
// do something
});
In words, we capture the element we wish to delegate the event to ($('#the-table')) and call the on() method on it. The event type is the first parameter (click), and the second parameter is a selector which pinpoints the descendant(s) we wish to handle events for (a). The third parameter is the event handler.
Case 2:
Imagine you load some content dynamically and you want to add click event to it. You can only add event handlers to elements once they exist, so without event-bubbling you’d have to re-bind the same event handlers to your content each time you add the content.
So, we add event handler to a parent element that already exists in the DOM
This is a common problem when loading elements via AJAX as well; and attaching the event handler to an element that is already present in the DOM is the solution.