The examples in this article share the spread of js events for your reference. The specific content is as follows
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: deepskyblue;
}
#box2{
width: 200px;
height: 200px;
background-color: cadetblue;
}
#box3{
width: 100px;
height: 100px;
background-color: chocolate;
}
</style>
<script type="text/javascript">
function bind(obj , eventStr , callback){
if(){
//If it is a normal browser (eventStr , callback , false);
}else{
//IE8
("on"+eventStr , function(){
(obj);
});
}
}
= function(){
/*
* The spread of events
* - Microsoft and Netscape have different understandings about the spread of events
* - Microsoft believes that events should be transmitted from descendants to ancestor elements, that is, from the inside out, which is what we call the bubble of events
* - Netscape Company believes that events should be transmitted from ancestor elements to descendants, that is, from the outside to the inside. This stage we call event capture
* - W3C integrates the two companies' plans and divides the spread of events into three stages
* 1. Capture stage
* - Events capture events from the outermost element (document) to the target element
* - This stage will not trigger events by default
* 2. Target stage
* - The target refers to the element that triggers the event. When the target element is captured, the capture phase stops.
* 3. Bubbling stage
* - Events bubbling from the target element to the ancestor element, and the event starts to be triggered
* - The default events are executed in the bubble stage
*
* - Events are executed in the bubble stage by default, and events are not required to be triggered in the capture stage.
* If you want to execute events in the capture phase, you need to modify the third parameter of addEventListener() to true
*
* - IE8 and below browsers do not have a capture stage, and cannot set events to trigger during the capture stage
*/
//Bind the response function for three divs, respectively var box1 = ("box1");
var box2 = ("box2");
var box3 = ("box3");
bind(box1,"click",function(){
alert(1);
})
bind(box2,"click",function(){
alert(2);
})
bind(box3,"click",function(){
alert(3);
})
};
</script>
</head>
<body>
<div >
<div >
<div ></div>
</div>
</div>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.