Detailed explanation of javascript event bubbling_javascript skills-JS Tutorial-php.cn

Detailed explanation of javascript event bubbling_javascript skills

WBOY

Release： 2016-05-16 15:20:45

Original

1341 people have browsed it

Events are one of the core contents in JavaScript. The application of events inevitably involves an important concept, which is event bubbling. Before introducing event bubbling, let’s introduce another important concept. Concept event flow:
1. What is event flow:
The Document Object Model (DOM) is a tree structure, which can be vividly represented by the following figure.

If an html element triggers an event, then the event will be propagated in a certain order between the trigger node and the root node in the DOM tree. All passing nodes will receive the triggered event. This propagation process is called It is a stream of events. According to the order of propagation of events, they can be divided into two categories, one is event bubbling and the other is event capture, which involves the topic to be introduced in this chapter:
1. Event bubbling:
The so-called time bubbling is when an element triggers an event, the event will be like a bubble, propagating from the triggering element to all its parent nodes, all the way to the root node will receive the event, if the corresponding event is registered in the parent element handler function, then even if the event is triggered on the child node, the event handler function registered on the parent element will also be triggered. For example, in the above illustration, if the onclick event of the a element is triggered, then its parent elements p, document, and window will all receive this event, and if a time processing function is registered on the corresponding parent element, then this event processing function will Will execute, look at a code example:

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
</table>
</body>
</html>

Copy after login

The purpose of the above code is to pop up the content in the corresponding cell when the corresponding cell is clicked. However, in the above implementation, the onclick event handler is not registered for each cell. Instead, the onclick event handler is registered on the cell's parent element table. When the cell is clicked, the onclick event will be triggered, and the event will also It propagates upward from the event object, and the table element happens to have a registered onclick event handler. This handler will be executed at this time. Of course, the problem of passing event object parameters will be set here. All browsers support event bubbling. 2. Event capture:
Event capturing is exactly the opposite of event bubbling. When an element is clicked, the direction of event propagation is from the root element to the triggering element. IE does not support this. For cross-browser support, bubbling is generally used by default. Bubble event processing model.
2.javascript prevent event bubbling code
Event bubbling is very useful in certain scenarios, but sometimes it must be prevented. The following is an example code that is compatible with all major browsers to prevent event bubbling.
Code example:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

Copy after login

The above code can prevent the event from bubbling. Here is a brief comment on the code:
2. Code comments:

1. function stopBubble(e) {}, this function is used to prevent events from bubbling, and the parameter is an event object.
2. if(e&&e.stopPropagation){e.stopPropagation();}, determine whether stopPropagation is supported. If it is supported, use e.stopPropagation(). The stopPropagation() function is not supported by IE10 and browsers below IE10.
3.window.event.cancelBubble=true, the current IE browser uses this to prevent event bubbling.

The above is a detailed introduction to JavaScript event bubbling. I hope it will be helpful to everyone’s learning.