JavaScript事件---事件冒泡与事件捕获
Opened this issue · 0 comments
incuisting commented
在说事件冒泡和事件捕获之前，要先把事件流说一下。关于事件流，有这样一个有意思的问题，画在一张白纸上的同心圆，如果把你的手指放在圆心上，那么你指向的不是一个圆，而是纸上所有的圆。也就是说，在页面上单击一个按钮的时候，你同时也单击了按钮的容器元素，甚至单击了整个页面。
那么事件流描述的就是从页面中接收事件的顺序。有意思的是，当时的IE和Netscape的开发团队提出了差不多是完全相反的事件流概念。IE提出了事件冒泡流，Netscape则提出了事件捕获流。
事件冒泡
IE提出的事件冒泡，即事件开始时由最具体的元素接收，然后一级一级向上传播，直到根节点。以下列HTML页面为例子：
<!DOCTYPE html>
<html>
<head>
<title>exp</title>
</head>
<body>
<div id="my">Click me</div>
</body>
</html>如果你点击了页面中的<div>元素，那么这个click事件会按照如下顺序传播
也就是说，click事件首先在<div>元素上发生，而这个元素就是我们点击的元素。然后，click事件沿着DOM树向上传播，在每一级节点上都会发生，直至传播到document对象
事件捕获
看完事件冒泡，那么Netscape的事件捕获就很好想象了，同样也是上面那段HTML代码，同样也是<div>元素被点击。那么事件捕获会按照如下方式进行
可以发现，事件捕获的过程中document对象最先接收到click事件，然后事件沿着DOM树依次向下，一直传播到实际目标，即<div>元素。
由于老版本的浏览器不支持，因此很少有人使用事件捕获。所以尽量使用事件冒泡，在有特殊需求的时候再用事件捕获