js 事件机制
前端在面试的时候经常会遇到js事件机制的原理和使用方法,我呢,开始也是一直都比较模糊,仔细看了一下文档,总结一下我学习到的。
事件流是一个事件沿着特定数据结构传播的过程。冒泡和捕获是事件流在DOM中两种不同的传播方法。
事件流有三个阶段:
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
什么是捕获和冒泡
举个栗子:
<div id="div1">
<div id="div2"></div>
</div>
<script>
let div1 = document.getElementById('div1');
let div2 = document.getElementById('div2');
div1.onClick = function(){
alert('1')
}
div2.onClick = function(){
alert('2');
}
</script>
当点击 div2时,会弹出两个弹出框。在 ie8/9/10、chrome浏览器,会先弹出"2"再弹出“1”,这就是事件冒泡:事件从最底层的节点向上冒泡传播。事件捕获则跟事件冒泡相反。
W3C的标准是先捕获再冒泡, addEventListener的第三个参数决定把事件注册在捕获(true)还是冒泡(false)
addEventListener 函数反正记住 true 是捕获,false 是冒泡
obj.addEventListener("click", func, true); // 捕获方式
obj.addEventListener("click", func, false); // 冒泡方式
但是IE9以下不支持 addEventListener函数,IE浏览器要使用 attachEvent函数代替。
兼容写法
if(window.addEventListener){
//chrom firefor ...
object.addEventListener('click',function(){
},false);
}
else if(window.attachEvent){
//IE
object.attachEvent('onclick',function(){})
}
else{
object.onclick = function(){}
}
事件流阻止
event.stopPropagation();就是阻止事件的冒泡
event.stopImmediatePropagation(); 可以用来阻止捕获