javascript Event Bubbling Event Capture and Event Delegation Details

1. Event bubbling: In the process of javascript event propagation, when the event starts on one element, the event will be propagated to the predecessor element step by step until document, and some browsers may reach window. Not all events have bubbles, such as the following: blur Events, focus Events, load Events

2. Event delegate: Event capture is just the opposite of event bubbling, starting with the top-level ancestor element until the event triggers the element.

js Event Capture 1 through DOM2 Event Model addEventListener To achieve:

target.addEventListener(type, listener, useCapture)

The third parameter is set to false by default, which means that the event starts in the bubbling stage, and when set to true, it means that it triggers in the capture stage, so it seems that we seldom use event capture in our work. But still have to understand 1

<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 The console outputs in turn: box , middle , inner

Prevent events from bubbling

Usually, a large number of event bubbling events are used, but maybe we don't need to pass events to the parent in a child tag, so we need to prevent its event bubbling.

1, stopPropagation is used to prevent event bubbling, cancleBuble=true is used in IE, and stopPropagation is also a method of event object (Event), which prevents the bubbling event of target element, but does not prevent the default behavior.

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

3. Event delegate: Event delegate can also be called event agent. Event delegate can manage all events of a certain type by specifying only one event handler by using event bubbling.

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, it is impossible for us to bind one 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 is here, I hope to give you help, but also hope that you can pay more attention to this site more content!