@[toc]
Introduction to the
An event is a behavior that can be detected by JavaScript.
Event Stream Processing (ESP) refers to the order in which events are received from a page or propagated on a page.
It was like this:
-
Microsoft’s IE stream of events is called event bubbling, and Microsoft assumes that events start with the most specific element (the node in the document with the deepest nesting level) and then propagate up the hierarchy to the less specific node (the document).
-
The idea behind Netscape Navigator was that less specific nodes should receive events earlier, and the most specific nodes should receive events last.
-
As a result, the W3C defines the event flow as having three phases:
– Event capture: from the outside in
– Target stage
– Event bubble: From inside out, when the child element has the same event as the parent element, the parent element will also trigger the bubble mechanism when the child element is triggered.
My article focuses on explaining the scope of the event flow. Because I saw the interview question of a big factory before asking where the bubbling event ends. I do not know the answer, the results on the Internet, the answer is not accurate, had to start their own. I tried it all out on my own. And refer to “JavaScript advanced Programming”, if there is a problem please correct
Event capture and time bubbling
Two methods listen for events
addEventListener(event,function,useCapture)
– event: event, string, no need to add “on”, such as mouse click event just need to write “click”
– function: the function to be executed when this method is called
-usecapture: indicates whether to execute during capture. The default value is false and not during event capture
– Internet Explorer 8 and later versions are not supported
attachEvent(event,function)
– event: event, string, with “on”, such as “onclick” for mouse click events
– function: the function to be executed when this method is called
– Supports ONLY IE8 and below, this function does not see the event capture phase (IE insisted that event flow should be event bubbling from IE4 until IE8).
- If you want to be compatible with both browsers, we can write our own listener function
Just copy the following functions into your code
Parameters:
– Element Indicates the element you get
– Event string indicates the time you want to listen
– callback Specifies the callback function
– bool Boolean type
– Enter false if you want to listen for bubbles
– Enter true if you want to listen on the capture phase
function addEvent(element, event, callback, bool) {
if (element.addEventListener) {
element.addEventListener(event, callback, bool);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callback)
}
}
Copy the codeScope of event flow
HTML:
<div id="mydiv">
<p id="mypar"></p>
</div>
Copy the codeCSS:
#mydiv {
width: 150px;
height: 150px;
padding: 20px;
background-color: antiquewhite;
}
#mypar {
width: 100px;
height: 100px;
background-color: seagreen;
}
Copy the codeJavaScript:
var p = document.getElementById("mypar");
var div = document.getElementById("mydiv");
var body = document.getElementsByTagName("body") [0];
var html = document.getElementsByTagName("html") [0];
/ / capture
addEvent(p, 'click'.function() {console.log('p')}, true);
addEvent(div, 'click'.function() {console.log('div')}, true);
addEvent(body, 'click'.function() {console.log('body')}, true);
addEvent(html, 'click'.function() {console.log('html')}, true);
addEvent(document.'click'.function() {console.log('document')}, true);
addEvent(window.'click'.function() {console.log('window')}, true);
/ / the bubbling
addEvent(p, 'click'.function() {console.log('p')}, false);
addEvent(div, 'click'.function() {console.log('div')}, false);
addEvent(body, 'click'.function() {console.log('body')}, false);
addEvent(html, 'click'.function() {console.log('html')}, false);
addEvent(document.'click'.function() {console.log('document')}, false);
addEvent(window.'click'.function() {console.log('window')}, false);
function addEvent(element, event, callback, bool) {
if (element.addEventListener) {
element.addEventListener(event, callback, bool);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callback)
}
}
Copy the codeUse the following code to introduce
1. E11-ie9, the output of other browsers (Chrome, Firefox, etc.) is as follows:
-
Event capture phase: the window – > document — — > HTML > body — — > parent – > child elements
-
Event bubbling phase: — — > parent element — – > child element body — — — — > > HTML document – > Windows
Event capture starts at window, and the bubbling process ends at Window.
2. The output of IE8-IE6 and the following is shown in the figure
- Event bubbling stage:
Child element --> parent element -->body--> HTML -->document
The event bubbling process ends at document.
The listener function IE8 uses attachEvent and does not require a Boolean parameter. This means that the code I write to listen to the bubble and catch will be executed as catch.
But it also shows that the order of capture is independent of the location of the code. Output order p div.. Document is not just because p comes out front.
3. It’s not over yet. JavaScript Advanced Programming says that IE5.5 and below will skip the < HTML > tag directly, which means the event bubble stage: child element –> parent element –>body–> Document
But I actually test IE5 as follows: child element –> parent element –>body–> HTML –>document, with HTML.
To prevent a bubble
-
event.stopPropagation() -
event.cancelBubble = true
IE10 and below does not support stopPropagation. CancelBubble can only be used, just tried the following, edge can be used. (By the way, the new Edge smells great!)
- Or if you want to work with older browsers, keep writing custom functions
“`js
e = window.event|| e;
if(document.all){
// Document. all is true in IE, false in other browsers.
e.cancelBubble=true;
}else{
e.stopPropagation();
}
` ` `
Add bubbling prevention code directly to the element you want to block events from.
Let’s say I add it to div.
// Compatible with older versions of IE
addEvent(div, 'click'.function() {
console.log('div');
e = window.event|| e;
if(document.all){
// Document. all is true in IE, false in other browsers.
e.cancelBubble=true;
}else{ e.stopPropagation(); }},false);
// Not compatible with older versions of IE
addEvent(div, 'click'.function() {
console.log('div');
event.stopPropagation();
}, false);
Copy the codeNow WHEN I click on the element of the P tag, the browser displays something like this: Event capture is not blocked, but the event bubbles up to the div and stops.
The target stage
Not only can you see the event capture and event bubbling phases, but you can also see what the final target of the event is. Use the event target.
event.target
-
Grammar: the event target
-
The target node of the returnable event (the node that triggered the event)
Replace the js code above with the one below. Then you click on the page and try it.
var p = document.getElementById("mypar");
var div = document.getElementById("mydiv");
var body = document.getElementsByTagName("body") [0];
var html = document.getElementsByTagName("html") [0];
window.onclick = function() { console.log(event.target); }
p.onclick = function() { console.log(event.target); }
body.onclick = function() { console.log(event.target); }
Copy the code
No matter which function you set to output event.target for a click event, it will eventually output the P element. So if you bind to any element, you can see who the final, most specific recipient element is at that element’s time.
I’m a girl, Ann, and I’m obsessed