版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Candy_yl/article/details/79263211
Dom事件流
DOM事件流包括三个阶段。
1,事件捕获阶段:从最上层元素,直到最下层元素。路过的所有节点都可以捕捉到该事件。
1,事件捕获阶段:从最上层元素,直到最下层元素。路过的所有节点都可以捕捉到该事件。
2,处于目标阶段:事件到达目标节点时,就到了目标阶段,事件在目标节点上被触发
3,事件冒泡阶段:事件在目标节点上触发后,不会终止,一层层向上冒,回溯到根节点。
demo演示
html 代码:
<div class="a">
<li class="b">
<a href="#" class="c">点我</a>
</li>
</div>
js代码:
var div = document.getElementsByClassName('a')[0];
var li = document.getElementsByClassName('b')[0];
var a = document.getElementsByClassName('c')[0];
//冒泡阶段
div.addEventListener('click',function(event){
console.log('div');
});
li.addEventListener('click',function(event){
console.log('li');
});
a.addEventListener('click',function(event){
console.log('a');
});
//事件捕获过程处理,第三个参数设为true
div.addEventListener('click',function(event){
console.log('div');
},true);
li.addEventListener('click',function(event){
console.log('li');
},true);
a.addEventListener('click',function(event){
console.log('a');
},true);
结果:
div li a a li div 首先捕获阶段执行,再是冒泡阶段
addEventListener最后一个参数,为true则代表使用事件捕获模式,false则表示使用事件冒泡模式。
阻止事件冒泡
function cancelBubble(event){
var event = event || window.event;
if(event.stopPropagation()){
event.stopPropagation();
}else if(event.cancelBubble){
event.cancelBubble = true;
}else{
return false;//用于处理使用对象属性注册的事件处理程序
}
}
1.stopPropagation():阻止事件传播
2.preventDefault():禁止浏览器默认行为,比如a标签被点击后页面会跳转
3.立即结束当前函数并返回,
事件委托
JavaScript事件代理可以把事件处理器添加到一个父元素上,这样就避免了把事件处理器添加到多个子元素上。