浏览器事件流机制
2020-06-22 本文已影响0人
练习时长2年半的个人练习生
事件捕获/事件冒泡
他们的本质是事件流的两个方向.
- 事件捕获 window------------------>到目标节点
- 事件冒泡 目标节点---------------->window
注意:他们传递的是事件.而不是事件绑定的函数
应用场景:可以用他们实现事件委托.
事件冒泡示例:
通过事件冒泡的原理, li被点击后.事件 传递到ul上,ul触发onclik绑定的方法. target 表示的是点击的目标对象. 让后,改变target对象实现事件委托.
好处就是:减少了重复绑定.减少了遍历带来的性能损耗.
<body>
<ul id="div1">
<li >111111111111111111</li>
<li >222222222222222222</li>
<li >333333333333333333</li>
<li >444444444444444444</li>
<li >555555555555555555</li>
</ul>
</body>
//html代码
<script>
var div1 = document.getElementById("div1");
var li = document.getElementsByTagName('li')
div1.onclick = function (event) {
console.log('father')
if(event.target.nodeName=='LI') {
event.target.style.color = 'red'
}
};
Array.prototype.forEach.call(li,(item)=>{
// item.onclick = e => e.stopPropagation()
})
addEventListener 的第三个参数控制 浏览器在捕获阶段执行,还是冒泡阶段执行.. true为捕获 false为冒泡.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件捕获</title>
<style type="text/css">
#ul {
width: 300px;
height: 300px;
border: hotpink 3px solid;
}
</style>
</head>
<body>
<div id="outer" style="width: 300px;height: 300px;background:black;">
<div id="middle" style="width: 200px;height: 200px;background:blue;">
<div id="inner" style="width: 100px;height: 100px;background:red;"></div>
</div>
</div>
</body>
<script>
var outer = document.getElementById("outer");
var middle = document.getElementById('middle')
var inner = document.getElementById('inner')
outer.addEventListener('click', function () {
console.log('爷爷')
}, true)
middle.addEventListener('click', function () {
console.log('父亲')
}, true)
inner.addEventListener('click', function () {
console.log('孩子')
}, true)
//点击孙子 执行结果. 爷爷/父亲/孩子
</script>
</html>
补充:
e.stopPropagation();可以组织事件冒泡
e.preventDefault() 可以阻止浏览器默认行为.比如,让a标签取消默认的跳转功能.
event.currentTarget 事件响应节点对象.
event.target 事件触发节点对象.
