.wrapper{
width:300px;
height:300px;
background-color:crimson;
}
.content{
width:200px;
height:200px;
background-color:cyan;
}
.box{
width:100px;
height:100px;
background-color:rgb(51, 255, 0);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
<script type="text/javascript">
Copy the code
The binding of an event type to a handler of an object can only follow one processing model
Event bubbling: Structurally (but not visually) nested elements have the ability to bubble from child elements to parent elements. (Bottom-up) —–false
Event capture: For structurally (but not visually) nested elements, there is event capture, i.e. the same event is captured from the parent element to the child element (event source element).(top-down)–true
IE did not capture the event
Trigger sequence, capture first, bubble later
The focus, the blur, change, submit, reset, select events such as no bubble
Case 1
var wrapper=document.getElementsByClassName('wrapper')[0];
var content=document.getElementsByClassName('content')[0];
var box=document.getElementsByClassName('box')[0];
Copy the code
// An event type binds two handlers, following the catch true and bubble False event types, respectively
// Order 1 wrapper.addEventListener('click',function(){console.log('wrapperBubble')},false); content.addEventListener('click',function(){ console.log('contentBubble') },false); box.addEventListener('click',function(){ console.log('boxBubble') },false); // Order 2 wrapper.addEventListener('click',function(){console.log('wrapper')},true); content.addEventListener('click',function(){ console.log('content') },true); box.addEventListener('click',function(){ console.log('box') },true);Copy the code
// The box field is two event execution, according to which bind first which execute first,
// So if you click box after order 1 and before order 2, you will see box following boxBubble.
// Click box to capture and bubble when sequence 1 follows sequence 2