Related readings:
JavaScript Event Learning Summary (V) Mouse Event Type in JS
//www.VeVB.COM/article/86259.htm
JavaScript Event Learning Summary (I) Event Flow
//www.VeVB.COM/article/86261.htm
JavaScript event learning summary (IV) Public members of event (properties and methods)
//www.VeVB.COM/article/86262.htm
JavaScript event learning summary (II) js event handler
//www.VeVB.COM/article/86264.htm
JavaScript event learning summary (III) js event object
1. Events
An event is a certain action performed by the user or browser itself, such as click, load and mouseover are all the names of the event.
Events are the bridge between javascript and DOM.
If you trigger, I will execute the event, and call its processing function to execute the corresponding JavaScript code to give the response.
Typical examples are: the load event is triggered after the page is loaded; the user clicks the element and triggers the click event.
2. Event flow
1. Awareness of the influenza of events
Question: Click on the page element, what kind of element can sense such an event?
Answer: While clicking on an element, you also click on the element's container element, or even the entire page.
Example: There are three concentric circles, add the corresponding event handling function to each circle, and the corresponding text pops up. Click the innermost circle and also click the outer circle, so the click event of the outer circle will also be triggered.
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> #outer{ position: absolute; width: 400px; height: 400px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: deeppink; } #middle{ position: absolute; width: 300px; height: 300px; top: 50%; margin-left: -150px; margin-top: -150px; background-color: deepskyblue; } #inner{ position: absolute; width: 100px; height:100px; top:50%; left:50%; margin-left: -50px; margin-top: -50px; background-color: darkgreen; text-align: center; line-height: 100px; color:white; } #outer,#middle,#inner{border-radius:100%; }</style><body><div id="outer"> <div id="middle"> <div id="inner"> click me! </div> </div></div><script> var innerCircle= document.getElementById("inner"); innerCircle.onclick= function () { alert("innerCircle"); }; var middleCircle= document.getElementById("middle"); middleCircle.onclick=function(){ alert("middleCircle"); } var outerCircle= document.getElementById("outer"); outerCircle.onclick= function () { alert("outerCircle"); }</script></body></html>The effects are as follows:
2. Event flow
When an event occurs, it will propagate in a specific order between the element node and the root node. All nodes passing through the path will receive the event. This propagation process is the DOM event stream.
The order of event propagation corresponds to the browser's two event stream models: capture event stream and bubble event stream.
Bubble event stream: The propagation of events is from the most specific event target to the least specific event target. That is, from the leaves of the DOM tree to the root.
Captured event stream: The propagation of events is from the least specific event target to the most specific event target. That is, from the roots of the DOM tree to the leaves.
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="myDiv">Click me!</div></body></html>
In the above html code, click the <div> element in the page.
In the bubbling event stream, click event propagation order is <div>―》<body>―》<html>―》document
In the captured event stream, click event propagation order is document―》<html>―》<body>―》<div>
note:
1) All modern browsers support event bubbles, but there are slight differences in specific implementations:
In IE5.5 and earlier, event bubbles will skip the <html> element (jump directly from body to document).
IE9, Firefox, Chrome, and Safari bubble events all the way to the window object.
2) IE9, Firefox, Chrome, Opera, and Safari all support event capture. Although the DOM standard requires that events should be propagated from document objects, these browsers start to capture events from window objects.
3) Since old browsers do not support it, few people use event capture. It is recommended to use event bubbles.
DOM event stream
The DOM standard uses capture + bubbling. Both event streams trigger all objects of the DOM, starting with the document object and ending with the document object.
The DOM standard stipulates that event flow includes three stages: event capture stage, in target stage, and event bubble stage.
Event Capture Phase: The actual target (<div>) will not receive events during the capture phase. That is, in the capture stage, the event stops from document to <html> and then to <body>. In the above picture, it is 1~3.
In the target stage: The event occurs and is processed on <div>. But event processing will be seen as part of the bubbling phase.
Bubble phase: Events propagate back to the document.
note:
1): The DOM standard stipulates that the event capture phase capture involves event targets, but events on event objects will be set in IE9, Safari, Chrome, Firefox, Opera9.5 and later versions will start events on event objects during the capture phase. As a result, there are two opportunities to operate events on the target object.
2): Not all events go through the bubble stage. All events go through the capture stage and are in the target stage, but some events skip the bubble stage: for example, the focus event that gets the input focus and the blur event that loses the input focus.
Example of two chances to operate events on the target object:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> #outer{ position: absolute; width: 400px; height: 400px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: deeppink; } #middle{ position: absolute; width: 300px; height: 300px; top: 50%; margin-left: -150px; margin-top: -150px; background-color: deepskyblue; } #inner{ position: absolute; width: 100px; height:100px; top:50%; left:50%; margin-left: -50px; margin-top: -50px; background-color: darkgreen; text-align: center; line-height: 100px; color:white; } #outer,#middle,#inner{ border-radius:100%; }</style><body><div id="outer"> <div id="middle"> <div id="inner"> click me! </div> </div></div><script> var innerCircle= document.getElementById("inner"); innerCircle.addEventListener("click", function () { alert("innerCircle's click event is fired in the capture stage"); },true); innerCircle.addEventListener("click", function () { alert("innerCircle's click event is fired in the bubble stage"); },false); var middleCircle= document.getElementById("middle"); middleCircle.addEventListener("click", function () { alert("middleCircle's click event is fired in the capture stage"); },true); middleCircle.addEventListener("click", function () { alert("middleCircle's click event is fired in the bubble stage"); },false); var outerCircle= document.getElementById("outer"); outerCircle.addEventListener("click", function () { alert("outerCircle's click event is fired in the capture stage"); },true); outerCircle.addEventListener("click", function () { alert("outerCircle's click event is fired in the bubble stage"); },false);</script></body></html>The operation effect is that 6 boxes will pop up one after another. To explain the principle, I integrated it into a picture:
3. Typical application of event flow - event proxy
In traditional event processing, an event handler needs to be added to each element. JS event proxy is a simple and effective technique, through which you can add the event processor to a parent element, thereby avoiding adding the event processor to multiple child elements.
The principle of event proxy uses event bubbles and target elements, add the event processor to the parent element, wait for the child element to bubble events, and the parent element can determine which child element is through target (IE is srcElement), and thus perform corresponding processing. For more content about target, please refer to the following examples for the public members (properties and methods) of the event (IV) for the following examples.
Traditional event processing, adding an event handler to each element, the code is as follows:
<body><ul id="color-list"><li>red</li><li>orange</li><li>yellow</li><li>green</li><li>blue</li><li>indigo</li><li>purple</li></ul><script>(function(){ var colorList=document.getElementById("color-list"); var colors=colorList.getElementsByTagName("li"); for(var i=0;i<colors.length;i++) { colors[i].addEventListener('click',showColor,false); }; function showColor(e) { e=e||window.event; var targetElement=e.target||e.srcElement; alert(targetElement.innerHTML); }})();</script></body>The processing method of event agent is as follows:
<body><ul id="color-list"><li>red</li><li>orange</li><li>yellow</li><li>green</li><li>blue</li><li>indigo</li><li>purple</li></ul><script>(function(){ var colorList=document.getElementById("color-list"); colorList.addEventListener('click',showColor,false); function showColor(e) { e=e||window.event; var targetElement=e.target||e.srcElement; if(targetElement.nodeName.toLowerCase()==="li"){ alert(targetElement.innerHTML); } }})();</script></body>To summarize the benefits of event proxy:
a. Reduce multiple event processors to one, because the event processor must reside in memory, which improves performance. Imagine if there is a 100-row table, comparing the traditional way of binding event handlers for each cell with event proxy (i.e. adding an event handler to the table), it is not difficult to conclude that event proxy does avoid some potential risks and improve performance.
b. DOM update does not require rebinding the event processor, because the event proxy can adopt different processing methods for different child elements. If other child elements (a, span, div, etc.) are added, you can directly modify the event handler function of the event agent. There is no need to rebind the processor and no need to loop through again.
The above is the JavaScript event learning summary (I) related knowledge about event streaming that the editor introduced to you. I hope it will be helpful to everyone!