类上的JavaScript单击事件侦听器

我目前正试图编写一些JavaScript来获取已单击的类的属性。我知道要以正确的方式执行此操作，我应该使用事件侦听器。 我的代码如下：

var classname = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

classname.addEventListener('click', myFunction(), false);

我希望每次单击其中一个类来告诉我属性时都会收到一个警报框，但不幸的是，这不起作用。有人能帮忙吗

---

（注意-我可以在

jQuery

中很容易做到这一点，但我不想使用它）

这应该可以

getElementsByClassName

返回与条件匹配的元素的类似数组的对象（请参见编辑）

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

注意：较旧的浏览器（如IE6、IE7、IE8）不支持

getElementsByClassName

，因此它们返回

undefined

---

校正

getElementsByClassName

不返回数组，但在大多数浏览器中返回HTMLCollection，在某些浏览器中返回NodeList（）。这两种类型都类似于数组（意味着它们有一个长度属性，并且可以通过它们的索引访问对象），但严格来说它们不是数组或从数组继承的（意味着可以在数组上执行的其他方法不能在这些类型上执行）

---

感谢user@指出这一点，并让我深入理解。

*这是为了允许目标类的子类触发事件而编辑的。有关详细信息，请参见答案的底部*

将事件侦听器添加到经常添加和删除项的类的替代答案。这是受jQuery的

on

函数启发的，在该函数中，您可以为事件正在侦听的子元素传入选择器

var base = document.querySelector('#base'); // the container for the variable content
var selector = '.card'; // any css selector for children

base.addEventListener('click', function(event) {
  // find the closest parent of the event target that
  // matches the selector
  var closest = event.target.closest(selector);
  if (closest && base.contains(closest)) {
    // handle class event
  }
});

小提琴：

这将侦听对

base

元素的子元素的单击，如果单击的目标具有与选择器匹配的父元素，则将处理类事件。您可以随意添加和删除元素，而无需向单个元素添加更多的单击侦听器。这将捕获所有元素，即使是在添加此侦听器之后添加的元素，就像jQuery功能一样（我认为在引擎盖下有点类似）

这取决于传播的事件，因此，如果在其他地方对事件执行

stopPropagation

，这可能不起作用。另外，

最近的

函数显然与IE存在一些兼容性问题（什么不存在？）

如果您需要重复执行此类操作，可以将其制作成函数，如

function addChildEventListener(base, eventName, selector, handler) {
  base.addEventListener(eventName, function(event) {
    var closest = event.target.closest(selector);
    if (closest && base.contains(closest)) {
      // passes the event to the handler and sets `this`
      // in the handler as the closest parent matching the
      // selector from the target element of the event
      handler.call(closest, event);
    }
  });
}

==========================================================
编辑：这篇文章最初对事件目标上的DOM元素使用了

matches

函数，但这将事件的目标仅限于direct类。它已更新为使用

最近的

函数，允许所需类的子级上的事件也触发事件。原始

匹配的
代码可以在原始小提琴上找到：
您可以使用以下代码：

document.body.addEventListener('click', function (evt) {
    if (evt.target.className === 'databox') {
        alert(this)
    }
}, false);

使用现代JavaScript，可以这样做：


constdivs=document.queryselectoral（'.a'）；
divs.forEach（el=>el.addEventListener（'click'，event=>{
log（event.target.getAttribute（“datael”）；
}));

例子
.a{
背景色：红色；
高度：33像素；
显示器：flex；
对齐项目：居中；
边缘底部：10px；
光标：指针；
}
.b{
背景色：#00AA00；
高度：50px；
显示器：flex；
对齐项目：居中；
边缘底部：10px；
}
1.
2.
11
您可以使用querySelectorAll选择所有类，并循环它们以分配eventListener。if条件检查它是否包含类名

const arrClass = document.querySelectorAll(".className");
for (let i of arrClass) {
  i.addEventListener("click", (e) => {
    if (e.target.classList.contains("className")) {
        console.log("Perfrom Action")
    }
  })
}

还考虑如果单击一个按钮，事件监听器的<强>目标< /强>不一定是按钮本身，而是单击按钮上的任何内容。可以使用currentTarget属性引用为其分配侦听器的元素。在现代ES中，这里有一个非常好的解决方案，使用一条语句：
    document.querySelectorAll(".myClassName").forEach(i => i.addEventListener(
        "click",
        e => {
            alert(e.currentTarget.dataset.myDataContent);
        }));

这很好用。非常感谢。我实际上没有意识到jQuery做了循环。非常有帮助。下面是您的工作答案：
document.getElementsByClassName
实际上总是返回一个数组，即使只有一个元素与标准匹配，尽管数组的第一个元素是所有dom元素。因此，用1“document.getElementsByClassName不返回数组。它返回一个像XML文件一样遍历的节点列表。”
array.from（）
有第二个参数，它是一个映射函数，因此可以编写上述参数（假设es6支持）
array.from（classname，c=>c.addEventListener（'click'，myFunction））;。添加事件侦听器的代码有问题。addEventListener采用事件名称（'click'）、对函数的引用（而不是现在通过使用参数调用myFunction（）得到的函数结果）和指示事件冒泡的标志。addEventListener调用应该如下所示：elem.addEventListener（'click'，myFunction，false），classname是节点列表类型。需要循环所有元素，并将侦听器连接到列表中的每个元素。我必须尝试一下，这是一种独特的方法，实际上可能比循环更易于维护和执行！如果元素有多个类，则必须检查该字段中的正确值，例如“类”和“顺序”。我宁愿选择
evt.target.classList.contains（'databox'）
这对我来说效率非常低。身体上的每一个事件都会通过这个功能。一个循环有什么那么难维护的？这是非常低效的，你会像@JosefAssad说的那样检查每个元素。我完全不同意这里的每个人。如果使用element.addEventList
    document.querySelectorAll(".myClassName").forEach(i => i.addEventListener(
        "click",
        e => {
            alert(e.currentTarget.dataset.myDataContent);
        }));