Detailed explanation of javascript event bubbling, event capture and event delegation

1. Event bubbling : In the process of JavaScript event propagation, when an event is triggered on an element, the event will propagate to the predecessor elements step by step until the document, and some browsers may reach the window. Not all events have bubbling, for example: blur event, focus event, load event

2. Event delegation : Event capture is exactly the opposite of event bubbling. It starts from the top-level ancestor element until the event triggers the element.

js event capture is generally implemented through the DOM2 event model addEventListener :

target.addEventListener(type, listener, useCapture)

The third parameter is set to false by default, indicating that the event is triggered in the bubbling phase. When set to true, it is triggered in the capture phase. Generally, event capture seems to be rarely used in our work. But still need to understand

<div id="box">
    <div id="middle">
        <div id="inner"></div>
    </div>
</div>
<script>
//Event capture window.onload=function(){
    let box = document.getElementById("box");
    let middle = document.getElementById("middle");
    let inner = document.getElementById("inner");
    box.addEventListener("click",function(){console.log("box")},true);
    middle.addEventListener("click",function(){console.log("middle")},true);
    inner.addEventListener("click",function(){console.log("inner")},true);
}
</script>
Click inner, and the console will output: box, middle, inner

Stop event bubbling

Usually, a large number of event bubbling events are used, but we may not need to pass events to the parent in a certain child tag. At this time, we need to prevent the bubbling of its events.

Generally, stopPropagation is used to prevent the bubbling of events. In IE, cancelBuble=true is used. stopPropagation is also a method of the event object (Event). Its function is to prevent the bubbling event of the target element, but it will not prevent the default behavior.

//Prevent event bubbling let btna = document.getElementById('btn');
btna.onclick=function(e){
    window.event? window.event.cancelBubble = true : e.stopPropagation();
 };

3. Event delegation : Event delegation can also be called event proxy. Event delegation makes use of event bubbling. By specifying only one event handler, you can manage all events of a certain type.

Benefits: Reducing DOM operations can improve web page performance. When a parent element and many child elements of a page need to operate the same event, we cannot bind an event to each element.

<ul id="getNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
let ptclick = document.getElementById('getNum');
let lilist = ptclick.querySelectorAll('li');
for(let i=0;i<lilist.length;i++){
    lilist[i].index = i;
};
ptclick.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(e.target.index);
};
</script>

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!