事件传播过程
-
事件捕获阶段:从window对象传导到目标节点
-
目标阶段:事件在目标节点上触发
- 处于事件冒泡的第一个阶段,也就是冒泡阶段的 target 触发事件,所以目标阶段也会被当做事件冒泡的一部分
-
冒泡阶段:从目标节点传回window对象
-
当我们点击了一个事件, 首先做的的第一件事就是从外层的元素,直接穿梭到我们的目标元素,这个阶段会执行所有捕获阶段的函数
-
然后事件流切换到目标阶段,执行自身的事件函数
-
这时候事件流在沿着相反的方向一直向上执行所有函数
在dom节点 绑定过多的监听事件,必定造成内存浪费。 所以就有一种优化: 就是事件委托
事件委托
- 利用事件的冒泡特性,把多个子元素的同一类型的监听逻辑,合并到父元素上通过一个监听函数来管理的行为,就是事件委托
- 在上级元素配合event.target,对其子元素操作
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style: none;
}
li{
width:100px;
height:40px;
text-align: center;
line-height: 40px;
float:left;
background-color: orange;
}
</style>
</head>
<body>
<ul>
<li>你好</li>
<li>我好</li>
<li>大家好</li>
<li>才是真的好</li>
</ul>
<script>
var ul=document.querySelector('ul');
var lis=document.querySelectorAll("li");
//委托案例一
/* ul.οnclick=function(event){
var event=event||window.event;
console.log(event.target.innerHTML);
}*/
//委托案例二
ul.onmouseover=function(event)
{
var event=event||window.event;
event.target.style.backgroundColor="yellow"; //委托,
}
ul.onmouseout=function(event)
{
var event=event||window.event;
event.target.style.backgroundColor="orange";
}
for(var i=0;i<3;i++)
{
var li=document.createElement("li");
li.innerHTML="li"+i;
ul.appendChild(li);
}
</script>
</body>
</html>
为什么一般在冒泡阶段, 而不是在捕获阶段注册监听
- 易于管理和委托:在冒泡阶段注册监听器使得事件委托更容易实现。你可以在父元素上注册一个监听器,捕捉所有子元素触发的事件。这使得添加、删除子元素时,无需处理子元素的事件监听器,降低了内存占用和处理开销。
- 兼容性:在早期的浏览器中(如 IE 6/7/8),并不支持捕获阶段的事件监听。因此,在冒泡阶段注册事件监听器可以确保代码在更广泛的浏览器中正常工作。
- 在某些用例下,如在事件到达目标元素之前完成一些操作,可以考虑在捕获阶段注册监听器。