#eventbubbling

[karthikchintala]

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 bubbling in Javascript explained.

[zickonezero]

Event Bubbling

No, this does not involve a glass item and a plant named "OG". This is how browsers handle events, most commonly clicks, when nested in parent elements.

Here's an example:

var e1 = document.getElementById("e1"); var e2 = document.getElementById("e2");

// TRUE = TOP => DOWN (CAPTURING) // FALSE = DOWN => UP (BUBBLING) e1.addEventListener('click', doSomething1, false); e2.addEventListener('click', doSomething2, false);

function doSomething1() {       console.log(this.id); }

function doSomething2(e) {       alert(this.id);       e.stopPropagation(); }

The stopPropagation function prevents bubbling from happening up the hierarchy. Conversely, changing the event listener on e1 from "false" to "true", would trigger a top-down approach, bypassing e.stopPropagation() altogether!

Potent stuff.