什么是DOM事件
简单的说，事件就是定义了一些JavaScript函数，使它们能够响应页面元素发生的变化，比如用户在元素上方点击了鼠标按钮 [click事件],用户把鼠标移到了元素上方[mouseover事件]。
什么是DOM事件流
一个事件的生命周期有三个阶段：捕捉，目标，冒泡。
1.捕捉阶段 当某个事件被触发时，浏览器会找到涉及的元素。涉及的元素称为目标。浏览器会找出body元素和目标之间所有的元素并分别检查它们，看其有没有事件绑定。浏览器会先触发外层事件的处理器，最后才会轮到目标的事件处理器。
2.目标阶段 当捕捉阶段完成后，浏览器会触发目标元素上任何已添加的事件类型监听器，这里的先后顺序是按照事件定义的先后顺序来的。
3.冒泡阶段 冒泡阶段的顺序与捕捉阶段的顺序刚好相反，在此阶段，浏览器会优先处理目标的事件处理器，然后一层层往外处理其余的事件处理器。
示例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>DOM事件流
</title>
</head>
<body>
<div id="div1">
<button id="btn">按钮
</button>
</div>
<script>
var btn = document.getElementById("btn");
var div1 = document.getElementById("div1");
btn.onclick = function(){
console.debug("目标1.Click btn");
}
btn.addEventListener("click",function(){
console.debug("目标2.Click btn");
},true);
div1.onclick = function(){
console.debug("冒泡1.Click div1");
}
document.body.onclick = function(){
console.debug("冒泡2.Click Body");
}
document.onclick = function(){
console.debug("冒泡3.Click document");
}
window.onclick = function(){
console.debug("冒泡4.Click window");
}
window.addEventListener("click",function(){
console.debug("捕获4.Click window");
},true);
document.addEventListener("click",function(){
console.debug("捕获3.Click document");
},true);
document.body.addEventListener("click",function(){
console.debug("捕获2.Click body");
},true);
div1.addEventListener("click",function(){
console.debug("捕获1.Click div1");
},true);
</script>
</body>
</html>
document.body.addEventListener(
"click",
function(){
console.
debug(
"捕获2.Click body");
},
true);
addEventListener用于注册事件的处理器，当添加了第三个参数为true时，代表了在捕捉阶段接受后代元素的事件。
event.html:
38 捕获
4.Click
window
event.html:
41 捕获
3.Click document
event.html:
44 捕获
2.Click body
event.html:
47 捕获
1.Click div1
event.html:
16 目标
1.Click btn
event.html:
19 目标
2.Click btn
event.html:
24 冒泡
1.Click div1
event.html:
27 冒泡
2.Click Body
event.html:
30 冒泡
3.Click document
event.html:
33 冒泡
4.Click
window
由此可见DOM事件流的顺序是 1.捕获 window document body div1
2.目标 （目标的顺序与事件定义的先后顺序有关） 目标一 目标二
3.冒泡 div1 body document window
应用场景
以上面的例子为例，想要触发在button上的事件，但是不想触发在div和其上元素的事件时，弄清事件流就相当重要。
比如：
阻止事件冒泡过程。防止事件冒泡而带来不必要的错误和困扰。 这个方法就是:stopPropagation() 可以对button的click事件做一些改造。
转载请注明原文地址: https://ju.6miu.com/read-969640.html
