События Javascript addEventListener Последний параметр

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>

Источник

1 ответ

В приведенном ниже коде вы можете видеть, что я установил последний параметр true, что означает захват, но все еще в пузыре console.log - 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

Так eventPhase 1 для захвата, 2, когда событие находится на цели, и 3, когда всплывает.

всякий раз, когда я помещаю последний параметр addEventListener либо true, либо false, в обеих ситуациях цель события (e.target) остается неизменной, т.е.

Фаза, которую вы подключаете, не влияет на элемент, к которому вы подключили событие. Все, что меняется, это когда вы получаете событие. Эта диаграмма из слегка устаревшей спецификации DOM3 Events помогает захватывать изображения вместо пузырьков:

введите описание изображения здесь

Как вы можете видеть, когда событие инициируется, сначала захватывается событие, которое течет из корня (окна) через документ и всех предков к целевому элементу (.gridul в твоем случае); затем он всплывает обратно через предков и документирует обратно в окно.

Вот более простой фрагмент, демонстрирующий это:

// 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% времени мы зацепляем фазу барботирования. Это имеет тенденцию быть более полезным из двух, и мы привыкли к этому, поскольку IE до IE9 не поддерживал фазу захвата (а IE9-IE11 все еще не поддерживает, когда они находятся в режиме "совместимости").

Источник
Другие вопросы по тегам