1. Event monitoring

Event monitoring can be divided into three stages: capture stage, target stage and bubbling stage.

IE8 and its predecessors did not support this event mechanism, and IE9 did not support the W3C specification until later.

W3C standard

Syntax:

element.addEventListener(event, function, useCapture)

event: (required) event name, supporting all DOM events.

Function: (required) Specify the function to be executed when the event is triggered.

useCapture: (optional) Specifies whether the event is executed during the capture or bubbling phase. true, capture. False, bubbles. Default false.

IE standard

Syntax:

element.attachEvent(event, function)

Event: (required) event type. Need to add "on", for example: onclick.

Function: (required) Specify the function to be executed when the event is triggered.

Advantages of event monitoring:

1. Multiple events can be bound and unbound.

DOM level 0 events can only bind to one event, and new events will override it. Event listening can bind multiple events and delete events.

Add: Object.addEventListener(event, function, useCapture);

Delete: Object.removeEventListener(event, fn);

2. Incident Delegation

Using the principle of bubbling, events are added to the parent or ancestor elements to trigger the execution effect.

<input type="button" value="click me" id="btn">
 
var btn6 = document.getElementById("btn");
document.onclick = function( event ) {
 event = event || window.event;
 var target = event.target || event.srcElement;
 if(target == btn6){
 alert(btn5.value);
 }
}

Advantages of Event Delegation

1) Improve JavaScript performance. Event delegation can significantly improve the processing speed of events and reduce memory usage.

Traditional writing

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>
 
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
 
item1.onclick = function(){
 alert("hello item1");
}
item2.onclick = function(){
 alert("hello item2");
}
item3.onclick = function(){
 alert("hello item3");
}
</script>

Event delegation

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>
 
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
 
document.addEventListener("click",function(event){
 var target = event.target;
 if(target == item1){
 alert("hello item1");
 }else if(target == item2){
 alert("hello item2");
 }else if(target == item3){
 alert("hello item3");
 }
})
</script>

2) Adding DOM elements dynamically does not require modifying event binding because of element changes.

Traditional writing

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>
 
<script>
var list = document.getElementById("list");
 
var item = list.getElementsByTagName("li");
for(var i=0;i<item.length;i++){
 (function(i){
 item[i].onclick = function(){
 alert(item[i].innerHTML);
 }
 })(i)
}
 
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
 
</script>

Clicking item1 to item3 has an event response, but when clicking item4, there is no event response. It shows that traditional event binding can not dynamically add events to dynamically added elements.

Event delegation

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>
 
<script>
var list = document.getElementById("list");
 
document.addEventListener("click",function(event){
 var target = event.target;
 if(target.nodeName == "LI"){
 alert(target.innerHTML);
 }
})
 
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
 
</script>

When you click on item4, item4 has an event response. Explains that event delegation can dynamically add events for newly added DOM elements.

The article is reproduced in: https://www.jb51.net/article/93752.htm

Another good article: https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html