如何使用vanilla javascript中的类触发特定html元素上的事件

Question

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

＆＃13;

＆＃13;

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')
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

如果要将侦听器添加到一个元素，请使用以下代码。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者这个代码用于少数元素

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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!");
  });
  

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个答案应该突出一些事情。您可能需要以不同方式处理事件冒泡。我将e.target添加到了悬停消息中。你的目标是一个块元素，它会触发鼠标事件，即使你无法看到它，所以我用红色突出显示它。 querySelectorAll将以querySelector的工作方式获取所有元素，而不仅仅是第一个元素。

＆＃13;

＆＃13;

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

boxes[2].addEventListener("mouseover", myMouseover );
boxes[2].addEventListener("mouseleave", myMouseout);

function myMouseover(e) {
  console.log('enter' + e.target);
}

function myMouseout() {
  console.log('leave');
}

＆＃13;

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

.media-page--box-container {
  background: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用querySelectorAll检索与您的选择器匹配的所有节点。

因为它返回一个NodeList，它是一个类似于数组的对象，你可以通过调用array.prototype.foreach并遍历节点列表来遍历它。

从那里，您可以为节点列表中的每个项添加事件侦听器，或者根据迭代器添加任何单个节点。

＆＃13;

＆＃13;

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

Array.prototype.forEach.call(boxes, (box, i) => {
    if (i===2) {
        box.addEventListener('mouseenter', () => {
            console.log('enter')
        });
        box.addEventListener('mouseleave', () => {
            console.log('leave')
        });
    }
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;