javascript - 如何在普通 javascript 中使用类触发特定 html 元素上的事件

Question

我正在尝试将我的 jquery 代码重构为 vanilla，因为我想正确使用 js。但我遇到了问题。我不知道如何仅在具有特定类的第三个元素上触发事件。因为 querySelector 总是返回具有该类的第一个元素，例如这是我完成了一半的代码

const box = document.querySelector('.media-page--box-container');

$(box).on('mouseenter', () => {
  //  $(this). => select hovered element and do something only on it
  console.log('enter')
}).on('mouseleave', () => {
  console.log('leave')
});

.media-page--box-container:not(:first-child){
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media-page--box-container">
  <div class="media-page--inner-wrapper">
    <div class="media-page--image-wrapper">
      <img class="media-page--image" src="http://via.placeholder.com/212x169">
    </div>
    <div class="media-page--image-title-wrapper">
      <span class="media-page--image-title">Image.jpg</span>
    </div>
    <div class="media-page--download-link-wrapper">
      <a class="media-page--download-link" href="#">Download</a>
    </div>
  </div>
</div>
<div class="media-page--box-container">
  <div class="media-page--inner-wrapper">
    <div class="media-page--image-wrapper">
      <img class="media-page--image" src="http://via.placeholder.com/212x169">
    </div>
    <div class="media-page--image-title-wrapper">
      <span class="media-page--image-title">Image.jpg</span>
    </div>
    <div class="media-page--download-link-wrapper">
      <a class="media-page--download-link" href="#">Download</a>
    </div>
  </div>
</div>
<div class="media-page--box-container">
  <div class="media-page--inner-wrapper">
    <div class="media-page--image-wrapper">
      <img class="media-page--image" src="http://via.placeholder.com/212x169">
    </div>
    <div class="media-page--image-title-wrapper">
      <span class="media-page--image-title">Image.jpg</span>
    </div>
    <div class="media-page--download-link-wrapper">
      <a class="media-page--download-link" href="#">Download</a>
    </div>
  </div>
</div>
<div class="media-page--box-container">
  <div class="media-page--inner-wrapper">
    <div class="media-page--image-wrapper">
      <img class="media-page--image" src="http://via.placeholder.com/212x169">
    </div>
    <div class="media-page--image-title-wrapper">
      <span class="media-page--image-title">Image.jpg</span>
    </div>
    <div class="media-page--download-link-wrapper">
      <a class="media-page--download-link" href="#">Download</a>
    </div>
  </div>
</div>

您可以在代码段中找到示例

Answer 1

如果你想为一个元素添加一个监听器，请使用下面的代码。

const box = document.querySelector('.media-page--box-container');

box.addEventListener("click", function() {
  console.log("Clicked!");
});

<div class="media-page--box-container">.media-page--box-container</div>

或者这个代码用于几个元素

const boxes = document.querySelectorAll('.media-page--box-container');

boxes.forEach(function(box){
  box.addEventListener("click", function() {
    console.log("Clicked!");
  });
});

<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>

querySelector 返回一个对象，querySelectorAll 和getElementsByClassName 返回对象数组。不是 getElementsByClassName 需要类名，而不是参数中的选择器。

console.log("querySelector", document.querySelector('.media-page--box-container'));
console.log("querySelectorAll", document.querySelectorAll('.media-page--box-container'));
console.log("getElementsByClassName", document.getElementsByClassName('media-page--box-container'));

<div class="media-page--box-container">.media-page--box-container 1</div>
<div class="media-page--box-container">.media-page--box-container 2</div>
<div class="media-page--box-container">.media-page--box-container 3</div>

请注意，如果页面上没有元素，方法将返回 null。所以，你应该检查这个案例。如果 box 为空，代码将因错误而中断。

const box = document.querySelector('.media-page--box-container');
console.log("box value", box);

// Wrong:
box.addEventListener("click", function() {
  console.log("Clicked!");
});

// Correct:
if (box !== null)
  box.addEventListener("click", function() {
    console.log("Clicked!");
  });
  

<div class="media-page--box-container-A">.media-page--box-container-A</div>
<div class="media-page--box-container-B">.media-page--box-container-B</div>