Vanilla JavaScript - 选择 'this' 仅具有事件冒泡的特定元素

Question

使用原版 JavaScript ES5..

我怎样才能 select 悬停的卡片并获得它的价值？当悬停在其他元素上时，获取它们的值？

使用冒泡法

这是代码笔：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);
        }

  });

});

Answer 1

您可以 select 仅 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>

Answer 2

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

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>

Vanilla JavaScript - 选择 'this' 仅具有事件冒泡的特定元素

Vanilla JavaScript - Selecting 'this' only specific element with event bubbling

javascript

event-bubbling

dom-events