Javaｓｃｒｉｐｔ事件气泡详细解决方案和捕获和停止方法

第一，事件的先后顺序

这个问题的起源非常简单，假设您在一个元素中嵌套另一个元素。
复制代码代码如下所示：
= =
| Element1 |
| ------------------------- |
| |元素| |
| ------------------------- |

= =
都有一个onclick事件处理函数（事件处理程序）。如果在元件2的用户点击，点击事件的元素1和元素2被触发。但这事件触发一次首先执行哪一个事件处理函数换句话说，事件的顺序是什么

两个和两个模型

不出所料，在那些无法忍受过去（Browser Wars）时代的人看来，网景和微软有两种截然不同的方法：

Netscape提倡首先发生元素1的事件，而事件序列称为捕获类型。
微软维护元素2的优先级，称为气泡类型。
这两个事件的顺序是相反的。Explorer浏览器只支持冒泡，Mozilla，opera7，和Konqueror支持。无论是旧剧和iCab不支持

三。捕获的事件

当您使用捕获事件时
复制代码代码如下所示：

--------------- | | -----------------
| Element1 | | |
| ----------- | | ----------- |
| |元素/ | |
| ------------------------- |
事件捕获| |
= =
首先触发元素1的事件处理函数，最后触发元素2的事件处理函数。

四、冒泡事件

当您使用冒泡事件时
复制代码代码如下所示：

--------------- | | -----------------
| Element1 | | |
| ----------- | | ----------- |
| |元素| | | |
| ------------------------- |
事件冒泡| |
= =
元素2的处理函数首先被触发，元素1是第二个。

五、W3C模式

W3C明智地选择了这场战斗中的一个选项。在W3C事件模型中发生的任何事件都首先进入捕获阶段，直到达到目标元素，然后进入泡沫阶段。
复制代码代码如下所示：
| | /
----------------- | | -- | | -----------------
| Element1 | | | | |
| ------------- | | -- | | ----------- |
| |元素/ | | | |
| -------------------------------- |
W3C事件模型| |
------------------------------------------
作为Web开发者，你可以选择捕获和冒泡阶段绑定事件处理函数，它是通过addEventListener（）方法，如果这个函数的最后一个参数是真实的，在捕获相结合的功能，和虚假，在鼓泡相结合的功能。

假设你想这样做
复制代码代码如下所示：
element1.addeventlistener（听到咔哒声，dosomething2，真的）

element2.addeventlistener（听到咔哒声，做，假）

如果用户单击元素2，它就会发生：

（事件就像访客，从外部到内部，逐渐接近触发的主要元素，然后反向返回）。

1。单击事件首先进入捕获阶段（逐渐接近2元的方向）。无论是在元素的祖先元素2捕获阶段有一个onclick处理功能
2。发现元素1有一个，所以dosomething2被处决
3。事件是检查目标本身（2元），并没有更多的处理功能在捕获阶段。活动开始进入冒泡阶段，当然，doSomething（）被执行，这势必对元2泡沫阶段的功能。
4。事件转到元素2的方向，看看是否有任何祖先元素在冒泡阶段有一个处理函数绑定，没有这种情况，所以没有发生任何事情。
情况恰恰相反：
复制代码代码如下所示：
element1.addeventlistener（听到咔哒声，dosomething2，假）

element2.addeventlistener（听到咔哒声，做，假）
现在，如果用户单击元素2，它就会发生：

1。单击事件进入捕获阶段。看看在2元素的祖先元素捕获阶段有一个onclick处理功能，其结果是什么。
2。事件检测到目标。活动开始进入冒泡阶段和执行一个函数绑定到元素2泡stage.dosomething（）
3。事件开始远离目标，检查元素2的祖先元素是否在气泡阶段绑定处理函数。
4。发现了一个，所以dosomething2（）的元素1被处决

六、兼容性与传统模式

在支持W3C DOM（文档对象模型）的浏览器中，传统的事件绑定方法是
复制代码如下：element1.onclick = dosomething2；
在泡沫阶段，默认被认为是绑定的。

七。使用冒泡的事件

一些开发商也意识到，利用鼓泡或捕获的事件。今天在他们的网页，这是没有必要让一个事件是由几个功能由于泡沫。但有时用户会很困惑，因为他们点击鼠标后，有很多情况，在大多数情况下，你仍想你处理功能是相互独立的。当用户点击一个元素，会发生什么，点击另一个元素，与对方发生了什么，是相互独立的，不能因为一个泡沫链。

八。总是在发生。

你要明白的第一件事情是，事件捕获和冒泡了。如果你定义了一个通用的onclick处理功能对整个网页文件
复制代码代码如下所示：
onclick =做；
如果（文件。捕获事件（事件）document.captureevents。点击）；
单击页面上的任何元素的单击事件，最终会冒泡到页面的顶部文档级，从而触发一般的处理功能。除非前面的处理函数明确指出气泡停止，否则气泡不会传播到整个文档级别。
对上述代码第二句的补充：

第一个说的。
object.setcapture（）当一个对象设置鼠标捕获是是是，他的方法将继承整个文档被抓获。
当你没有继承法对整个文档捕获，使用object.releasecapture（）
>其他
Mozilla有类似的功能，方法也略有不同。
window.captureevents（事件。事件类型）
window.releaseevents（事件。事件类型）
>实例
复制代码如下： / /如果只有一句话，对象是唯一的点击会触发点击obj.onclick =功能（{ alert）（什么）}
如果添加以下语句，则方法将继承到文档（或窗口、不同的浏览器）中以捕获
obj.captureevents（事件。点击）； / / FF
Obj.setCapture（） / /伊江

九。使用

因为任何事件传播都在页面文档（最高级别）上终止，这就使得默认事件处理功能成为可能，假设您有这样一个页面。
复制代码代码如下所示：
------------------------------------
|文件|
| --------------------------- |
| | Element1 | |元素| |
| --------------------------- |

------------------------------------
element1.onclick =做；
element2.onclick =做；
defaultfunction onclick =；
现在，如果在1元或2元的用户点击，doSomething（）将被执行。如果你想，如果你不想让事件冒泡到defaultfunction执行（），你可以停止事件冒泡上来。但如果在网页的其他部分用户点击，defaultfunction（）将被执行。这种效应有时可以使用。

设置页面害羞；制作处理函数有一个广泛的触发区域必须在拖动和下降的脚本。一般来说，在一个单元层的MouseDown事件的发生意味着这个元素被选中，它可以响应MouseMove事件。虽然mousedown通常绑定到这个元层避免浏览器的bug，其他的两个事件函数的范围必须是整个页面（）

记住，browserology的第一定律是：一切都是可能的（任何事情都有可能发生），当你至少准备好。那么什么是可能发生的是，当用户拖动了，他可以在页面上移动自己的鼠标，但剧本不能在一个大的方式回应，所以鼠标就没有不再停留在元素级别。

1。如果鼠标处理函数绑定到元素层、单元层又不需要鼠标的移动任何的反应，这会让用户感到奇怪。
2、如果onmouseup处理功能单元层次上的约束，不能触发事件。其结果是，用户希望放下这个元素层，元素层继续对鼠标移动作出反应，这可能会造成更多的混乱（）

因此，在这种情况下，事件气泡非常有用，因为将处理函数放在页面层上可以确保它们始终被执行。

十。关闭它（停止事件冒泡）

但总的来说，你要关掉所有的泡沫和捕获确保功能互不干扰。另外，如果你的文档结构相当复杂（许多表格嵌套，等等），你也会关闭泡沫以节省系统资源。在这一点上，浏览器要检查的目标元素的每一个祖先是否有处理功能。即使没找到，搜索就花了很多时间。

在微软的模式，你必须设置为事件是真实的cancelbubble物业
复制代码如下：window.event.cancelbubble =真
在W3C模型你要叫里面（）事件的方法
复制代码如下：e.stoppropagation（）
这可以防止所有气泡向外扩散。作为跨浏览器解决方案，应该做到这一点。
复制代码代码如下所示：
函数doSomething（E）

{
如果（！e）var = window.event；

e.cancelbubble =真；

如果（e.stoppropagation）e.stoppropagation（）；

}

建立在浏览器支持的cancelbubble财产cancelbubble。浏览器耸了耸肩，创建属性。当然，这并不是真的取消了泡沫，但至少它可以保证安全和正确的顺序是。

十一、currentTarget

正如我们之前看到的，一个事件使用的目标或srcelement属性表示的目标元素的事件是实际发生的，即用户首先点击。在我们的例子中，它是2元，因为我们点击它。

理解捕获或冒泡阶段中的目标元素是不变的，并且总是与元素2相关联是非常重要的。

但是假设我们绑定了以下函数
复制代码如下：element1.onclick =做；

element2.onclick =做；
如果在元件2的用户点击，doSomething（）会执行两次。但是你怎么知道哪个HTML元素来回应这一事件目标/ srcelement不给的线索，但人们往往更倾向于元2因为它是事件的原因（因为用户点击它）。
In order to solve this problem, W3C adds the attribute of currentTarget, which points to the element that is dealing with events: This is exactly what we need.Unfortunately, there are no similar attributes in the Microsoft model.
你也可以使用这个关键字。在上面的例子中，它是相当于处理事件的HTML元素，如currentTarget。

十二，微软模型的问题。

但是当你使用微软事件绑定模型，该关键字不等同于HTML元素。联想缺乏一个微软模型类似的currentTarget属性（）-如果你在上面的代码中做了，你就做它。
复制代码如下：element1.attachevent（'onclick '，做的事）

element2.attachevent（'onclick '，做的事）
您不能确切地知道哪个HTML元素负责处理事件，这是微软事件绑定模型中最严重的问题。对我来说，这也是我从不使用它的原因，即使它正在开发IE在Windows上的应用。

我希望能够加入currentTarget属性的相似尽快或遵循的标准呢Web开发人员需要此信息

后记：

因为没有真正的Javaｓｃｒｉｐｔ战斗，所以我不太理解这篇文章。只能由勤奋的学生翻译。例如，当我们谈到拖动和拉动效应时，如果您有任何补充和疑问，您可以给我留言。谢谢您一直鼓励我。