Vanilla JavaScript - 仅使用事件冒泡选择“this”特定元素答案

【问题标题】：Vanilla JavaScript - Selecting 'this' only specific element with event bubblingVanilla JavaScript - 仅使用事件冒泡选择“this”特定元素
【发布时间】：2018-07-14 12:58:18
【问题描述】：

使用 Vanilla JavaScript ES5..

如何选择悬停的卡片并获取其价值？当悬停在其他元素上时，获取它们的值？

使用冒泡法。

这是代码笔：https://codepen.io/Aurelian/pen/djYLxx?editors=0010

这是 HTML：

<div class="organic-body" data-color="#1f2f1e" style="background-color: rgb(31, 51, 34);">
<div class="container">

  <h5>Hover to change color</h5>

  <div class="organic-list">
  <a href="#" class="organic-card js-organic-card-hover" data-color="red">
    <h2>Color red</h2>
  </a>

  <a href="#" class="organic-card js-organic-card-hover" data-color="blue">
    <h2>Color blue</h2>
  </a>

  <a href="#" class="organic-card js-organic-card-hover" data-color="green">
    <h2>Color green</h2>
  </a>
  </div>

</div>
</div>

这是 JavaScript：

document.addEventListener('DOMContentLoaded', function () {

  // Select each item
  var organicBody = document.querySelector(".organic-body"),
      organicList = document.querySelector(".organic-list"),
      organicCard = document.querySelectorAll(".organic-card");

  // Add event listener to each item
   organicList.addEventListener('mouseover', function(e) {   

        if(e.target.className === 'organic-card') {
           var text = this.innerText;
           console.log(text);
        }

  });

});

【问题讨论】：

标签： javascript dom-events event-bubbling

【解决方案1】：

检查e.target.parentNode是否有特定的class via：

parent.className.indexOf('organic-card') > -1

...然后得到parentNode的innerText：

document.addEventListener('DOMContentLoaded', function() {
  // Select each item
  var organicBody = document.querySelector(".organic-body"),
    organicList = document.querySelector(".organic-list"),
    organicCard = document.querySelectorAll(".organic-card");

  // Add event listener to each item
  organicList.addEventListener('mouseover', function(e) {
    var parent = e.target.parentNode;
    
    if (parent.className.indexOf('organic-card') > -1) {
      var text = parent.innerText;
      console.log(text);
    }
  });
});

<div class="organic-body" data-color="#1f2f1e" style="background-color: rgb(31, 51, 34);">
  <div class="container">
    <h5>Hover to change color</h5>
    <div class="organic-list">
      <a href="#" class="organic-card js-organic-card-hover" data-color="red">
        <h2>Color red</h2>
      </a>
      <a href="#" class="organic-card js-organic-card-hover" data-color="blue">
        <h2>Color blue</h2>
      </a>
      <a href="#" class="organic-card js-organic-card-hover" data-color="green">
        <h2>Color green</h2>
      </a>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您只能选择organic-card dom 并为其添加事件监听器。

var organicCard = document.querySelectorAll(".organic-card");
organicCard.forEach(function(item) {
  item.addEventListener('mouseover', function(e) {
    console.log(e.target.innerHTML)

  })
})

<div class="organic-body" data-color="#1f2f1e" style="background-color: rgb(31, 51, 34);">
  <div class="container">

    <h5>Hover to change color</h5>

    <div class="organic-list">
      <a href="#" class="organic-card js-organic-card-hover" data-color="red">
        <h2>Color red</h2>
      </a>

      <a href="#" class="organic-card js-organic-card-hover" data-color="blue">
        <h2>Color blue</h2>
      </a>

      <a href="#" class="organic-card js-organic-card-hover" data-color="green">
        <h2>Color green</h2>
      </a>
    </div>

  </div>
</div>

【讨论】：

是的，我知道，但我想通过冒泡委托来实现。