Javascript 执行元素的不同方式';s事件处理程序在捕获阶段

Javascript 执行元素的不同方式';s事件处理程序在捕获阶段,javascript,html,Javascript,Html,我可以让元素在捕获阶段执行其处理程序,如下所示: elem.addEventListener('event',handler,{once:false,capture:true}) 将第三个参数设置为true也有效-有什么明显的原因吗?这样做有副作用吗?在引入选项之前,布尔参数是它最初的工作方式。这就是为什么它(仍然)有效的原因:为了向后兼容 见: 语法 您可以传递一个布尔值useCapture(该值已经存在较长时间)或一个选项对象,该对象允许您指定capture,但也可以指定其他内容(例如一次)

我可以让元素在捕获阶段执行其处理程序,如下所示:

elem.addEventListener('event',handler,{once:false,capture:true})


将第三个参数设置为
true
也有效-有什么明显的原因吗?这样做有副作用吗?

在引入
选项之前,布尔参数是它最初的工作方式。这就是为什么它(仍然)有效的原因:为了向后兼容

见:

语法 您可以传递一个布尔值
useCapture
(该值已经存在较长时间)或一个选项对象,该对象允许您指定
capture
,但也可以指定其他内容(例如一次

因此,
addEventListener(…,true)
addEventListener(…,{capture:true})
相同,并且没有副作用


选项
对象形式自2016年起存在。查看哪些客户端支持它。

在引入
选项之前,布尔参数是它最初的工作方式。这就是为什么它(仍然)有效的原因:为了向后兼容

见:

语法 您可以传递一个布尔值
useCapture
(该值已经存在较长时间)或一个选项对象,该对象允许您指定
capture
,但也可以指定其他内容(例如一次

因此,
addEventListener(…,true)
addEventListener(…,{capture:true})
相同,并且没有副作用

选项
对象形式自2016年起存在。查看哪些客户端支持它。

如果您没有其他事件侦听器可以对事件或页面进行处理,那么将侦听器连接到何处通常无关紧要。如果这是唯一的侦听器,那么您可以将其附加到元素或其父元素之一,或附加到文档或
窗口
,以及处于冒泡阶段或捕获阶段的任何侦听器-在大多数情况下,这不会产生任何影响

捕获侦听器的主要用途是设置事件处理程序的执行顺序。当事件被分派到元素时,它首先从
窗口
向下捕获,在
窗口
上触发捕获侦听器,然后在
文档
上,然后在中间元素上触发捕获侦听器,直到它到达导致事件的最深元素。在最深的元素中,捕获侦听器和冒泡侦听器都将按照它们所连接的顺序运行。然后,事件将开始“冒泡”,触发最深元素、中间元素、文档和窗口上的冒泡侦听器

要进行说明,请参见此处的捕获侦听器如何在侦听器连接到父对象时首先运行:

document.addEventListener('click',()=>console.log('bubbling');
document.addEventListener('click',()=>console.log('capturing(method 1)),true);
document.addEventListener('click',()=>console.log('capture(方法2)'),{capture:true})
单击
如果没有其他事件监听器可以对事件或页面进行处理,那么将监听器附加到何处通常无关紧要。如果这是唯一的侦听器,那么您可以将其附加到元素或其父元素之一,或附加到文档或
窗口
,以及处于冒泡阶段或捕获阶段的任何侦听器-在大多数情况下,这不会产生任何影响

捕获侦听器的主要用途是设置事件处理程序的执行顺序。当事件被分派到元素时,它首先从
窗口
向下捕获,在
窗口
上触发捕获侦听器,然后在
文档
上,然后在中间元素上触发捕获侦听器,直到它到达导致事件的最深元素。在最深的元素中,捕获侦听器和冒泡侦听器都将按照它们所连接的顺序运行。然后,事件将开始“冒泡”,触发最深元素、中间元素、文档和窗口上的冒泡侦听器

要进行说明,请参见此处的捕获侦听器如何在侦听器连接到父对象时首先运行:

document.addEventListener('click',()=>console.log('bubbling');
document.addEventListener('click',()=>console.log('capturing(method 1)),true);
document.addEventListener('click',()=>console.log('capture(方法2)'),{capture:true})

单击
这是对“在捕获阶段触发的事件侦听器与在冒泡阶段触发的事件侦听器之间的区别”这一问题的一个很好的回答,但问题并非如此。看起来OP已经知道捕获阶段的功能了。他们特别询问了为什么第三个参数
true
而不是
{capture:true}
也能起作用,您没有回答。这是对“在捕获阶段触发的事件侦听器与冒泡阶段触发的事件侦听器之间的区别”这一问题的一个很好的回答,但问题并非如此。看起来OP已经知道捕获阶段的功能了。他们特别询问了为什么第三个参数
true
而不是
{capture:true}
也能起作用,你没有回答。
target.addEventListener(type, listener [, options]);
target.addEventListener(type, listener [, useCapture]);