Javascript 问题：如何选择所有具有相同类名的 div 并附加一个事件？答案

【问题标题】：Javascript Question: How to select all div's with the same class name and attach an event?Javascript 问题：如何选择所有具有相同类名的 div 并附加一个事件？
【发布时间】：2020-09-19 03:35:05
【问题描述】：

如何将事件监听器附加到所有具有相同类名的 div 上？

在下面的示例中，我尝试将类名 scroll-x 添加到 div 以便它可以通过运行 JS 代码来获得水平滚动功能。但是 JS 代码只适用于第一个 div。

这是一支笔https://codepen.io/Code3ater/pen/wvGYKvO?editors=0010

const scrollArea = document.querySelector(".scroll-x");
let isDown = false;
let startX;
let scrollLeft;

scrollArea.addEventListener("mousedown", (e) => {
  isDown = true;
  scrollArea.classList.add("active");
  startX = e.pageX - scrollArea.offsetLeft;
  scrollLeft = scrollArea.scrollLeft;
});
scrollArea.addEventListener("mouseleave", () => {
  isDown = false;
  scrollArea.classList.remove("active");
});
scrollArea.addEventListener("mouseup", () => {
  isDown = false;
  scrollArea.classList.remove("active");
});
scrollArea.addEventListener("mousemove", (e) => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - scrollArea.offsetLeft;
  const walk = (x - startX) * 3; //scroll-fast
  scrollArea.scrollLeft = scrollLeft - walk;
});

【问题讨论】：

[...querySelectorAll('.sroll-x')].map(el => el.addEventListener('event', fn))
使用event delegation而不是分配多个事件 — 它更易于维护，并且适用于动态添加的元素。例如，使用event argument 的target。见the tag info 和What is DOM Event delegation?。

标签： javascript

【解决方案1】：

你应该改变选择如下：

const scrollAreas = document.querySelectorAll(".scroll-x");

然后附加事件监听器

scrollAreas.forEach((scrollArea)=>scrollArea.addEventListener("mousedown", (e) => {
//Code goes here
}));

【讨论】：

感谢您的帮助，但不幸的是，他的方法对我不起作用:(
尝试了 forEach 方法没有得到任何错误，但它不能使两个 div 都可以滚动。

【解决方案2】：

尝试将它全部放在一个 for 循环中，并使用计数器来访问每个元素。在回调函数中使用this 来访问元素。

const scrollArea = document.querySelector(".scroll-x");
let isDown = false;
let startX;
let scrollLeft;
let length = scrollArea.length;

for (let i = 0; i < length; i++) {
    scrollArea[i].addEventListener("mousedown", (e) => {
        isDown = true;
        this.classList.add("active");
        startX = e.pageX - this.offsetLeft;
        scrollLeft = this.scrollLeft;
    });
    scrollArea[i].addEventListener("mouseleave", () => {
        isDown = false;
        this.classList.remove("active");
    });
    scrollArea[i].addEventListener("mouseup", () => {
        isDown = false;
        this.classList.remove("active");
    });
    scrollArea[i].addEventListener("mousemove", (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - this.offsetLeft;
        const walk = (x - startX) * 3; //scroll-fast
        this.scrollLeft = scrollLeft - walk;
    });
}

【讨论】：