JavaSript事件冒泡和事件捕获
程序员文章站
2022-07-09 18:03:00
事件流描述的是从页面中接收事件的顺序。但当时，浏览器发展到第四代（IE4和Netscape Communicator4）时，IE和Netscape开发团队各自提出了事件流的概念，而且两个顺序流的概念差不多是相反的。如下： 1，事件冒泡：这是IE的事件流，事件冒泡是指：事件开始时，有最具体的元素接收（ ......
事件流描述的是从页面中接收事件的顺序。但当时，浏览器发展到第四代（IE4和Netscape Communicator4）时，IE和Netscape开发团队各自提出了事件流的概念，而且两个顺序流的概念差不多是相反的。如下：
1，事件冒泡：这是IE的事件流，事件冒泡是指：事件开始时，有最具体的元素接收（最具体是指文档中嵌套里面最深的元素），然后逐级地向上传播到不具体的节点（文档）。
2，事件捕获：这是Netscape 提出的事件流，前面说过，两个顺序几乎是相反的，所以事件捕获顺序是由最不具体的节点（文档）接收，逐级地传递到最深的元素上去。
来看一个例子：
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
如果单击了如上的<div>元素：
对于事件冒泡来说：这个click事件传播顺序为：div ----> body ----> html ----> document
对于事件捕获来说：这个click事件传播顺序是：document ----> html ----> body ----> div
由于老版本的浏览器不支持事件捕获，因此很少有人使用事件捕获。
建议读者放心地使用事件冒泡， 在有特殊需要时再使用事件捕获。
参考：《Javascript高级程序设计》（Nicholas C.Zakas 著，李松峰 曹力 译）