1. Event flow
The order in which html elements trigger events.
2. Event bubble IE's event stream is called event bubble, which means that the event starts by the most specific element (the node with the deepest nesting level in the document), and then propagates upward step by step to the less specific node (document). 3. Event Capture The idea of event capture is that less specific nodes should receive events earlier, while the most specific nodes should receive nodes at the end. The purpose of event capture is to capture the event before it reaches the predetermined target.
DOM event stream
The event flow specified in the "DOM2 level event flow" includes three stages: the event capture stage, the target stage and the bubble stage. The first thing that happens is event capture, which provides an opportunity to intercept events. Then the actual target receives the event. The last stage is the bubble phase, where events can be responded to. Taking a simple HTML page as an example, clicking the <div> element will trigger events in the order shown below.
In the DOM event stream, the actual target (<div> element) does not receive events during the capture phase. This means that during the capture phase, the event stops after the document to <html> and then to <body>. The next stage is the "targeted" stage, so the event occurs on <div> and is seen as part of the bubble phase in event processing. Then the bubble phase occurs and the event propagates back to the document.
Most browsers that support DOM event streaming implement a specific behavior; even though the "DOM2 level event" specification clearly requires that the capture stage will not involve the target of the event, Safari, Chrome, Firefox, and Opera9.5 and later will trigger events on event objects during the capture stage. As a result, there are two opportunities to operate events on the target object.
Stop events from bubbles
experiment
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><script type="text/javascript">function onBtn() {alert('button');//cancelBubble(); prevent event bubbles}//get event object function getEvent(){//If it is ie or chromeif(window.event){return window.event;}//for firefoxfunc = getEvent.caller; //get function caller while(func != null){var arg0 = func.arguments[0]; //Get the first parameter of the caller//Judge whether the parameter is empty if(arg0){//Judge whether arg0 is an event object if((arg0.constructor == Event || arg0.constructor == MouseEvent || arg0.constructor == KeyboardEvent) ||(typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; }}//Get func caller func = func.caller;}return null;}//Block event bubbles function cancelBubble() { event = getEvent(); // Firefox chrome if(event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { //ie event.cancelBubble=true; event.returnValue = false; } }</script></head><body onclick="alert('body')"><div onclick="alert('div');" style="background-color:green"><button onclick="onBtn()">dsd</button></div></body></html>The above html code is executed in the order of event triggering.
Default: 'button' will pop up ---》 will pop up 'div' ----》 will pop up 'body'
If you add cancelBubble() code: only 'button' will pop up
The above article has a deep understanding of the JS DOM event mechanism. It is all the content I have shared with you. I hope it can give you a reference and I hope you can support Wulin.com more.