0

Q) 我的观点是，每当我在两种情况下都将 addEventListener 的最后一个参数设置为 true 或 false 时，事件目标 (e.target) 保持不变，即 img，在下面的代码中你可以看到我将最后一个参数设置为 true，这意味着捕获但仍在 console.log 气泡中是真的，这让我很困惑

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>

4

1 回答 1

3

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

如果"bubbles": true,这是让您感到困惑的部分，那么这就是说这个事件（click）是一个冒泡的事件；这并不是说它目前正在冒泡。bubbles将永远为真click。说明您所看到的事件阶段的部分在eventPhase; 看Event界面。

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

1 表示捕获，eventPhase2 表示事件位于目标，3 表示冒泡。

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

您挂钩的阶段对您挂钩事件的元素没有影响。所有的变化都是当你得到事件的时候。这张来自稍微过时的DOM3 事件规范的图表有助于图片捕获与冒泡：

在此处输入图像描述

如您所见，当触发事件时，首先捕获事件并从根（窗口）通过文档和所有祖先流向目标元素（.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 仍然不支持）。

于 2017-01-24T10:24:04.627 回答