Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/database/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 事件捕获与事件冒泡_Javascript_Dom Events - Fatal编程技术网

Javascript 事件捕获与事件冒泡

Javascript 事件捕获与事件冒泡,javascript,dom-events,Javascript,Dom Events,我只是想在JS中,在冒泡和捕获之间,哪一种是更好的事件委派模式,这是一个普遍的共识 现在我了解到,根据特定的用例,人们可能希望使用捕获阶段而不是冒泡,反之亦然,但我想了解对于大多数一般情况,什么样的委托模式是首选的,以及为什么(对我来说,它似乎是冒泡模式) 或者换句话说,W3CaddEventListener实现背后是否有支持冒泡模式的原因。[仅当您指定第3个参数及其true时,才会启动捕获。但是,您可以忘记第3个参数和冒泡模式已启动] 我查阅了JQuery的bind函数来回答我的问题,它似乎甚

我只是想在JS中,在冒泡和捕获之间,哪一种是更好的事件委派模式,这是一个普遍的共识

现在我了解到,根据特定的用例,人们可能希望使用捕获阶段而不是冒泡,反之亦然,但我想了解对于大多数一般情况,什么样的委托模式是首选的,以及为什么(对我来说,它似乎是冒泡模式)

或者换句话说,W3C
addEventListener
实现背后是否有支持冒泡模式的原因。[仅当您指定第3个参数及其true时,才会启动捕获。但是,您可以忘记第3个参数和冒泡模式已启动]

我查阅了JQuery的bind函数来回答我的问题,它似乎甚至不支持捕获阶段的事件(在我看来,这是因为IE不支持捕获模式)


看起来冒泡模式是默认选择,但为什么呢?

我不确定,但我非常确定,使用冒泡可以做的任何事情都可以通过捕获来完成,反之亦然

在同一个应用程序中出现一些事件冒泡和一些捕获的想法听起来是让事情变得非常混乱的好方法。我想说的是,我不认为冒泡和捕捉真的很重要。重要的是你选择一个并坚持下去


W3C的API通常包含这样的东西,它们有很多没有人真正关心的特性。也许这是另一个例子,说明良好的默认设置可以消除对配置甚至整个功能的需求。

在过去,这是一个平台问题,Internet Explorer有一个冒泡模型,Netscape更多地是关于捕获(但两者都支持)

W3C模型要求您能够选择您想要的

我认为冒泡更受欢迎是因为,正如前面所说的,有一些平台只支持冒泡…而且它作为一种“默认”模式是有意义的


您选择哪一个在很大程度上取决于您正在做的事情以及对您有意义的事情。

表明使用捕获而不是气泡有轻微的性能优势。即使没有在事件处理后立即终止事件,但是当事件离开时,它仍然处于边缘状态。我认为一个复杂的DOM会夸大两者之间的性能差异。

在阅读JavaScript:the Definitive Guide,第5版时,我在第422页遇到了示例17-4,它定义了一个用于拖动绝对定位元素的函数。在本例中,在文档元素的
onmousedown
属性中调用函数
drag()
。该函数根据鼠标位置的变化来重新定位元素,鼠标位置的变化由添加到根文档元素的处理程序为捕获的mousemove和mouseup事件查询。它们在文档上捕获这些事件的原因如下:

需要注意的是,mousemove和mouseup处理程序被注册为捕获事件处理程序,因为用户移动鼠标的速度可能超过document元素的速度,并且其中一些事件发生在原始目标元素之外


这表明了在捕获事件时,响应速度更快的优势。

此链接给出了明确的解释-

作为web开发人员,您可以选择是在捕获阶段还是在冒泡阶段注册事件处理程序。这是通过Advanced models(高级型号)页面上介绍的
addEventListener()
方法完成的。如果其最后一个参数为true,则为捕获阶段设置事件处理程序,如果为false,则为冒泡阶段设置事件处理程序

如果你愿意的话

element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)
如果用户单击element2,则会发生以下情况:

单击事件在捕获阶段开始。该事件查看element2的任何祖先元素是否具有用于捕获阶段的onclick事件处理程序。 事件在element1上找到一个。执行doSomething2()。 事件向下移动到目标本身,在捕获阶段找不到更多的事件处理程序。该事件移动到冒泡阶段并执行doSomething(),该事件在冒泡阶段注册到element2。 事件再次向上移动,并检查目标的任何祖先元素是否具有冒泡阶段的事件处理程序。事实并非如此,因此什么也没有发生。 反之亦然

element1.addEventListener('click',doSomething2,false)
element2.addEventListener('click',doSomething,false)
现在,如果用户单击element2,则会发生以下情况:

单击事件在捕获阶段开始。该事件查看element2的任何祖先元素是否有用于捕获阶段的onclick事件处理程序,但未找到任何。 事件向下传播到目标本身。该事件移动到冒泡阶段并执行doSomething(),该事件在冒泡阶段注册到element2。 事件再次向上移动,并检查目标的任何祖先元素是否具有冒泡阶段的事件处理程序。 事件在element1上找到一个。现在执行doSomething2()。 与传统模式的兼容性 在支持W3CDOM的浏览器中,传统的事件注册

element1.onclick = doSomething2;
被视为处于冒泡阶段的注册

事件冒泡的使用 很少有web开发人员有意识地使用事件捕获或冒泡。在今天制作的网页中,根本不需要让冒泡事件由几个不同的事件处理程序处理。用户可能会对一次鼠标点击后发生的几件事感到困惑,通常您希望将事件处理脚本分开。当用户单击一个元素时,会发生一些事情,当他单击另一个元素时,会发生其他事情


当然,这在将来可能会发生变化,最好有向前兼容的模型。但如今,事件捕获和冒泡的主要实际用途是注册默认函数。

由于IE,冒泡似乎是默认选择。以下是我在prototype.js网站上发现的“prototype 1.6之前,Event.observe