Javascript event bubbling

Javascript event bubbling
1 event

On the browser client application platform, events are basically triggered, that is, an event occurs, and then corresponding actions are taken.

Browser events indicate the signal of some events. The description of the event is not the focus of this Article. If you have not yet understood it, you can visit the W3school tutorial to learn about it. This will help you better understand the following content.

Binary bubble Mechanism

In javascript, the bubble mechanism is different from the concept in the algorithm data structure. The main feedback here is a bubble feedback process after event capture in the event flow process.

As shown in this figure, this bubble is equivalent to an event here, while water is equivalent to our entire dom tree. Events are transmitted from the bottom layer of the dom tree, to the root node of the dom. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + 0rK + zcrHyOfPws28PC9wPgo8cD48aW1nIHNyYz0 = "http://www.2cto.com/uploadfile/Collfiles/20140814/20140814091511180.png" alt = "\">

Here, I will write a simple case for analysis;

 Event bubbling case

Add a click event for it

 Event bubbling case

Generally, an event contains some information during transmission, which is an integral part of the event: event occurrence time + Event Location + Event Type + current handler of the event + other information,

B. Terminate the event bubble.

 Event bubbling case<Script type = "text/javascript"> window. onload = function () {var odiv = document. getElementById ('div3 '); odiv. onclick = function (ev) {var Event = ev | event; Event. alert ("to be blocked"); Event. cancelBubble = true ;}}</script>

After cancelBubble is added, click the bubble event of the div3 layer to stop it.