Javascript事件addEventListener最后一个参数

Q） 我的观点是，每当我在两种情况下都将addEventListener的最后一个参数设置为true或false时，事件的目标（例如target）保持不变，即img，在下面的代码中，您可以看到我将最后一个参数设置为true，这意味着捕获但仍在控制台中。log bubble为true，这让我感到困惑

document.querySelector（'.grid'）.addEventListener（'click'，函数（e）{
控制台日志（e）；
console.log（e.target+“”+this.className）；
}，对）

JavaScript事件
艺术消除器
通过淘汰过程挑选你最喜欢的艺术品。点击你最不喜欢的部分，直到剩下一个为止。点击最后一张图片获取一些信息

，在下面的代码中，您可以看到我将最后一个参数设置为true，这意味着捕获但仍在控制台中。log bubble为true，这让我很困惑

如果是

“气泡”：是的，

部分让你感到困惑，那么说明这个事件（

单击

）是一个气泡事件；它并不是说它现在正在冒泡<对于

单击

，代码>气泡将始终为真。说明您看到的事件阶段的部分位于

eventPhase

；看

因此，

eventPhase

对于捕获来说是1，当事件位于目标时是2，当冒泡时是3

每当我在两种情况下都将addEventListener的最后一个参数设置为true或false时，事件的目标（例如target）保持不变，即img

钩住的阶段对钩住事件的元素没有影响。所有这些变化都是在您获得事件时发生的。这张略显过时的图表有助于图片捕捉与冒泡：

如您所见，当触发事件时，首先捕获事件，事件从根（窗口）通过文档和所有祖先流到目标元素（在您的情况下是

.grid

ul

）；然后，它通过祖先和文档返回到窗口中

下面是一个简单的片段，演示了这一点：

//在内部和外部元素上钩住捕获和气泡：
var target=document.getElementById（“目标”）；
var inner=document.getElementById（“inner”）；
var outer=document.getElementById（“outer”）；
target.addEventListener（“单击”，函数（e）{
showEvent（“目标捕获”，e）；
}，对）；
target.addEventListener（“单击”，函数（e）{
showEvent（“目标气泡”，e）；
}，假）；
内部.addEventListener（“单击”，函数（e）{
showEvent（“内部捕获”，e）；
}，对）；
内部.addEventListener（“单击”，函数（e）{
showEvent（“内部气泡”，e）；
}，假）；
外部.addEventListener（“单击”，函数（e）{
showEvent（“外部捕获”，e）；
}，对）；
外部.addEventListener（“单击”，函数（e）{
showEvent（“外部气泡”，e）；
}，假）；
函数showEvent（标签，e）{
//e.活动阶段将是：
//*1捕获时
//*2在目标元素处
//*3冒泡时
console.log（标签+”：eventPhase=“+e.eventPhase）；
//现在显示e气泡，因为它总是
//单击时为true
}

。作为控制台包装器{
最大高度：80%！重要；
}

单击此分区

，在下面的代码中，您可以看到我将最后一个参数设置为true，这意味着捕获但仍在控制台中。log bubble为true，这让我很困惑

如果是

“气泡”：是的，

部分让你感到困惑，那么说明这个事件（

单击

）是一个气泡事件；它并不是说它现在正在冒泡<对于

单击

，代码>气泡将始终为真。说明您看到的事件阶段的部分位于

eventPhase

；看

因此，

eventPhase

对于捕获来说是1，当事件位于目标时是2，当冒泡时是3

每当我在两种情况下都将addEventListener的最后一个参数设置为true或false时，事件的目标（例如target）保持不变，即img

钩住的阶段对钩住事件的元素没有影响。所有这些变化都是在您获得事件时发生的。这张略显过时的图表有助于图片捕捉与冒泡：

如您所见，当触发事件时，首先捕获事件，事件从根（窗口）通过文档和所有祖先流到目标元素（在您的情况下是

.grid

ul

）；然后，它通过祖先和文档返回到窗口中

下面是一个简单的片段，演示了这一点：

//在内部和外部元素上钩住捕获和气泡：
var target=document.getElementById（“目标”）；
var inner=document.getElementById（“inner”）；
var outer=document.getElementById（“outer”）；
target.addEventListener（“单击”，函数（e）{
showEvent（“目标捕获”，e）；
}，对）；
target.addEventListener（“单击”，函数（e）{
showEvent（“目标气泡”，e）；
}，假）；
内部.addEventListener（“单击”，函数（e）{
showEvent（“内部捕获”，e）；
}，对）；
内部.addEventListener（“单击”，函数（e）{
showEvent（“内部气泡”，e）；
}，假）；
外部.addEventListener（“单击”，函数（e）{
showEvent（“外部捕获”，e）；
}，对）；
外部.addEventListener（“单击”，函数（e）{
showEvent（“外部气泡”，e）；
}，假）；
函数showEvent（标签，e）{
//e.活动阶段将是：
//*1捕获时
//*2在目标元素处
//*3冒泡时
console.log（标签+”：eventPhase=“+e.eventPhase）；
//现在显示e气泡，因为它总是
//单击时为true
}

。作为控制台包装器{
最大高度：80%！重要；
}

单击此分区

具体是什么

const unsigned short NONE = 0;
const unsigned short CAPTURING_PHASE = 1;
const unsigned short AT_TARGET = 2;
const unsigned short BUBBLING_PHASE = 3;
readonly attribute unsigned short eventPhase