.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">
一个对象的一个事件类型绑定一个处理函数只能遵循一种处理模型
事件冒泡:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)-----false
事件捕获: 结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(事件源元素).(自顶向下)--true
IE没有捕获事件
触发顺序,先捕获,后冒泡
focus,blur,change,submit,reset,select等事件不冒泡
例1
var wrapper=document.getElementsByClassName('wrapper')[0];
var content=document.getElementsByClassName('content')[0];
var box=document.getElementsByClassName('box')[0];
// 一个事件类型绑定两个处理函数,分别遵循捕获true和冒泡false事件类型
// 顺序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);
// 顺序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);
// box区域是两个事件执行,符合谁先绑定谁先执行,
// 所以当顺序1在顺序2前面的时候点击box会出现以下情况boxBubble后面才是box(但是我的为啥和教程不一样?)
// 当顺序1在顺序2后面的时候点击box先捕获后冒泡