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

Question

With Vanilla JavaScript ES5..

How can I select the card that is hovered and get's it's value? And when hover on other elements, get's their value?

Using bubbling method.

Here's the codepen: https://codepen.io/Aurelian/pen/djYLxx?editors=0010

Here's the 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>

Here's the 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

Check whether the e.target.parentNode has the specific class via:

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

...then get the innerText of the parentNode :

 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>

Answer 2

You can select only organic-card dom and add event listener to it.

 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>