问)我的观点是，每当我在两种情况下将 addEventListener 的最后一个参数设置为 true 或 false 时，事件的目标(e.target)保持不变，即 img ，在下面的代码中您可以看到我设置了最后一个参数true 意味着捕获但仍在 console.log 气泡中是 true，这让我很困惑
document.querySelector('.grid').addEventListener('click', function (e) {
console.log(e);
console.log(e.target + " " + this.className);
},true)<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Events</title>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif|Merriweather' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="art">
<h2>Art Eliminator</h2>
<p>Pick your favorite piece of art through the process of elimination. Click on the pieces you like the least until you are left with a single one. Click on the last image to get some info</p>
<ul class="grid">
<li><img src="images/Hassum_Harrod_03_tn.jpg" alt="Hassum Harod's Summer Trees"></li>
<li><img src="images/LaVonne_LaRue_02_tn.jpg" alt="LaVonne LaRue's Mighty Duck"></li>
<li><img src="images/Lorenzo_Garcia_01_tn.jpg" alt="Lorenzo Garcia's The Dancer"></li>
<li><img src="images/Jennifer_Jerome_01_tn.jpg" alt="Jennifer Jerome's A day of Rest'"></li>
<li><img src="images/Constance_Smith_03_tn.jpg" alt="Constance Smith's Letterforms"></li>
<li><img src="images/LaVonne_LaRue_04_tn.jpg" alt="LaVonne LaRue's Flow"></li>
<li><img src="images/Lorenzo_Garcia_03_tn.jpg" alt="Lorenzo Garcia's Mother"></li>
<li><img src="images/Jennifer_Jerome_02_tn.jpg" alt="Jennifer Jerome's Farm Life"></li>
<li><img src="images/Hillary_Goldwynn_03_tn.jpg" alt="Hillary Goldwynn's Blue Sky"></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>最佳答案
, in the code below you can see i put the last parameter true which means capturing but still in the console.log bubble is true, thats confusing me
如果"bubbles": true, 部分让您感到困惑，那么说明的是此事件(点击)是一个冒泡事件；它并不是说它当前正在冒泡。对于点击，bubbles 始终为真。说明您所看到的事件阶段的部分位于 eventPhase 中；请参阅Event interface .
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
因此，eventPhase 为 1(捕获时)、2(事件到达目标时)、3(冒泡时)。
whenever i put the last parameter of addEventListener either true or false in both situation the target of event (e.target) remain same i.e img
您 Hook 的阶段对您 Hook 事件的元素没有影响。所有变化都发生在您收到事件时。此图来自稍微过时的DOM3 Events spec帮助图片捕捉与冒泡:
正如您所看到的，当触发事件时，首先捕获事件，并且该事件从根(窗口)流经文档和所有祖先到目标元素( .grid ul 在你的情况下)；然后它通过祖先冒泡回来并记录回窗口。
这是一个更简单的代码片段，演示了这一点:
// Hook both capture and bubble on the inner and outer elements:
var target = document.getElementById("target");
var inner = document.getElementById("inner");
var outer = document.getElementById("outer");
target.addEventListener("click", function(e) {
showEvent("target capture", e);
}, true);
target.addEventListener("click", function(e) {
showEvent("target bubble", e);
}, false);
inner.addEventListener("click", function(e) {
showEvent("inner capture", e);
}, true);
inner.addEventListener("click", function(e) {
showEvent("inner bubble", e);
}, false);
outer.addEventListener("click", function(e) {
showEvent("outer capture", e);
}, true);
outer.addEventListener("click", function(e) {
showEvent("outer bubble", e);
}, false);
function showEvent(label, e) {
// e.eventPhase will be:
// * 1 when capturing
// * 2 at the target element
// * 3 when bubbling
console.log(label + ": eventPhase = " + e.eventPhase);
// Now showing e.bubbles because it's always
// true for clicks
}.as-console-wrapper {
max-height: 80% !important;
}<div id="outer">
<div id="inner">
<div id="target">
Click this div
</div>
</div>
</div>99.99% 的时间，我们都会钩住冒泡阶段。它往往是两者中更有用的一个，我们已经习惯了它，因为 IE9 之前的 IE 不支持捕获阶段(IE9-IE11 在处于“兼容”模式时仍然不支持)。
关于Javascript 事件 addEventListener 最后一个参数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41825488/