Home > Developer > JavaScript
DOM event stream details, dom stream details
1. Bubble events
There are two types of browser event models: capture event and bubble event. Because ie does not support capturing events, the following describes bubble events.
(Dubbed bubbling) the bubble type is triggered one by one from the most specific events installed to the least specific events.
Copy codeThe Code is as follows:
<Body onclick = "add ('body <br> ')">
<Div onclick = "add ('div <br> ')">
<Ponclick = "add ('P <br> ')"> click me </p>
</Div>
</Body>
<Div id = "display">
</Div>
<Script type = "text/javascript">
Function add (sText ){
Var ulo = document. getElementById ("display ");
Ulo. innerHTML + = sText;
}
</Script>
The onclick function is added to all the above three functions. The last three functions of the single-host p element are triggered. The p element is executed first, then the div is executed, and finally the body is executed.
This reminds us that the capture event is in the same order as the bubble event.
2. event listening
An event requires a function to respond to. Such functions are usually called an event handler. from another perspective, these functions monitor whether an event occurs in real time, it is usually called the event listening function (enevt listener). The event listening function varies greatly with different browsers.
I. general listening methods, such as using the onclick method, almost every label supports this method. Browser compatibility is high.
Events are separated based on behaviors.
Generally, the following methods are used for listening.
Copy codeThe Code is as follows:
<Body>
<Div id = "me"> click </div>
<Script type = "text/javascript">
Var opp = document. getElementById ("me"); // locate the event
Opp. onclick = function () {// set the event function
Alert ("I Have Been clicked! ")
}
</Script>
</Body>
Both of the methods described above are very convenient and are favored by Everbright developers when making and processing some small functions. But for the same event. They can only add one function. For example, for The onclick function marked by p, only one function can be used in both methods. Therefore, ie has its own solution, colleague, the standard dom specifies another method.
Ii. Method of listening in IE
In IE browser, each element has two methods to process time listening.
They are attachEvent () and detachEnevt ().
Their function names show that attachEnevt () is a function used to add event processing to an element, while detachEvent () is used to delete the listening function on the element. Their syntax is as follows:
[Object]. attachEvent ("enevt_handler", "fnHandler ");
[Object]. detachEvent ("enevt_handler", "fnHandler ");
Among them, enevt_handler represents the commonly used onclick, onload, onmouseover, etc.
FnHandler is the name of the listener function.
In the previous event, you can use the attachEvent () method to replace the listener function. When you click it, you can use detachEvent () to delete the listener function so that it will not be executed after the next click.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function fnclick (){
Alert ("I Have Been clicked! ");
OP. detachEvent ("onclick", "fnclick ");
}
Var oP;
Window. onload = function (){
OP = document. getElementById ("oop"); // locate the object
OP. attachEvent ("onclick", "fnclick"); // Add a listener Function
}
</Script>
<Div>
<P id = "oop">
</P>
</Div>
Iii. add multiple listening events (ie)
Copy codeThe Code is as follows:
<Script language = "javascript">
Function fnClick1 (){
Alert ("I was clicked by fnClick1 ");
}
Function fnClick2 (){
Alert ("I was clicked by fnClick2 ");
// OP. detachEvent ("onclick", fnClick1); // Delete listener function 1
}
Var oP;
Window. onload = function (){
OP = document. getElementById ("myP"); // locate the object
OP. attachEvent ("onclick", fnClick1); // Add listener function 1
OP. attachEvent ("onclick", fnClick2); // Add listener function 2
}
</Script>
</Head>
<Body>
<Div>
<P id = "myP"> Click Me </p>
</Div>
3. standard DOM event listening
The standard DOM also uses two methods to add and delete listener functions, respectively, for the ie Method. That is, addEventListener (), and removeEventListener ()
Different from ie, these two functions accept three parameters, namely the event name. The function name to be allocated is used for the bubble stage or capture stage. The capture phase parameter is true, and the bubble phase parameter is false. The syntax is as follows:
Copy codeThe Code is as follows:
[Object]. addEventListener ("event_name", fnHandler, bCapture );
[Object]. removeEventListener ("event_name", fnHandler, bCapture );
The usage of these two functions is similar to that of ie, except that the name of event_name is "click" and "mouseover", rather than "onclick" and "onmouseover" in Ie ".
In addition, the third parameter bCapture is usually set to false in the bubble stage.
Standard dom event listening method:
Copy codeThe Code is as follows:
<Script language = "javascript">
Function fnClick1 (){
Alert ("I was clicked 1 ");
OP. removeEventListener ("click", fnClick1, false );
}
Function fnClick2 (){
Alert ("I was clicked 2 ");
}
Window. onload = function (){
OP = document. getElementById ("myP ");
OP. addEventListener ("click", fnClick1, false );
OP. addEventListener ("click", fnClick2, false );
}
</Script>
<Div>
<P id = "myP"> Click Me </p>
</Div>
You can test the execution sequence.
The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
