javascript事件冒泡详解和捕获、阻止方法

前端技术 2023/08/31 JavaScript

一、事件的发生顺序

这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素

复制代码 代码如下:

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |

-----------------------------------

：并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2，则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发？哪一个事件处理函数会被首先执行？换句话说，事件的发生顺序到底如何？

二、两种模型

不出所料，在那些“不堪回首”（浏览器大战）的日子里，Netscape和微软有两种截然不同的处理方法：

Netscape主张元素1的事件首先发生，这种事件发生顺序被称为捕获型
微软则保持元素2具有优先权，这种事件顺序被称为冒泡型
这两种事件顺序是截然相反的。Explorer浏览器只支持冒泡事件，Mozilla，Opera7和Konqueror两者都支持。而更古老的opera和iCab两者都不支持

三、捕获型事件

当你使用捕获型事件时

复制代码 代码如下:


---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \\ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

：元素1的事件处理函数首先被触发，元素2的事件处理函数最后被触发

四、冒泡型事件

当你使用冒泡型事件时

复制代码 代码如下:

               / \\
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

：元素2 的处理函数首先被触发，元素1其次

五、W3C 模型

W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段

复制代码 代码如下:

                 | |  / \\
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \\ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

为一个web开发者，你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的，如果这个函数的最后一个参数是true，则在捕获阶段绑定函数，反之false，在冒泡阶段绑定函数。

假设你要做

复制代码 代码如下:

element1.addEventListener(\'click\',doSomething2,true)

element2.addEventListener(\'click\',doSomething,false)

本文地址：https://www.stayed.cn/item/1141

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案