1. Bubble events
There are two types of event models for browsers: capture events and bubble events. Since ie does not support capture events, the following mainly uses bubble events as an explanation.
(dubbed bubble) bubble type refers to the most specific event to the least specific event triggered one by one.
The code copy 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 above three functions have added the onclick function. The three functions after the stand-alone p element are fired. The p element is first executed, then the div is executed, and finally the body is executed.
Here, here is a reminder of the capture event, and its order is exactly the opposite of the bubble event.
2. Event monitoring
An event requires a function to respond. This type of function is usually called an event handler. From another perspective, these functions are listening in real time whether an event occurs, usually called an event listener. Event listening function is quite different for different browsers.
i. General listening method, such as using the onclick method, almost every tag supports this method. And the browser compatibility is very high
Considering behavior, event separation.
Generally, monitor using the following methods
The code copy is as follows:
<body>
<div id="me">click</div>
<script type="text/javascript">
var opp = document.getElementById("me"); //Event found
opp.onclick = function(){ //Set event function
alert("I was clicked!")
}
</script>
</body>
Both methods introduced above are very convenient and are loved by Everbright developers when making and handling some small functions. But for the same event. They can only add one function, such as the onclick function marked by p. Both methods can only have one function. Therefore, ie has its own solution, colleagues, and standard dom stipulates another method.
ii. Monitoring method in IE
In the morning browser, each element has two methods to handle the listening of time.
are attachEvent() and detachEnevt() respectively.
As you can see from their function names, 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 commonly used onclick, onload, onmouseover, etc.
fnHandler is the name of the listener function.
In the previous section, you can use the attachEvent() method instead of adding the listening function. When you click it, you can use detachEvent() to delete the listening function so that it will not be executed after the next click.
The code copy is as follows:
<script type="text/javascript">
function fnclick() {
alert("I was clicked!");
oP.detachEvent("onclick","fnclick");
}
var oP;
window.onload = function() {
oP = document.getElementById("oop"); //Find the object
oP.attachEvent("onclick","fnclick"); //Add a listener function
}
</script>
<div>
<p id="oop">
</p>
</div>
iii. Add multiple listening events (ie)
The code copy 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 the listener function 1
}
var oP;
window.onload = function(){
oP = document.getElementById("myP"); //Find the object
oP.attachEvent("onclick",fnClick1); //Add listener function 1
oP.attachEvent("onclick",fnClick2); //Add the listener function 2
}
</script>
</head>
<body>
<div>
<p id="myP">Click Me</p>
</div>
3. Standard DOM event monitoring
With the two methods of ie, the standard DOM also uses two methods to add and delete the listener function respectively. i.e. addEventListener() and removeEventListener()
Unlike ie, these two functions accept 3 parameters, namely the name of the event, the name of the function to be assigned, and whether it is used for the bubble stage or the capture stage. The parameters of the capture stage are true, and the parameters of the bubble stage are false. The syntax is as follows:
The code copy is as follows:
[object].addEventListener("event_name",fnHandler,bCapture);
[object].removeEventListener("event_name",fnHandler,bCapture);
The usage methods of these two functions are basically similar to ie, but you should note that the name of event_name is "click", "mouseover", etc., rather than "onclick" and "onmouseover" in Ie.
In addition, the third parameter bCapture is usually set to false, in the bubbling stage.
Standard dom event listening method:
The code copy 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 specific execution order.
The above is all about this article, I hope you like it.