类上的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@指出这一点，并让我深入理解。

这应该行得通

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类。它已更新为使用

最近的

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

匹配的
代码可以在原始小提琴上找到：
*对其进行编辑以允许目标类的子类触发事件。有关详细信息，请参见答案的底部*

将事件侦听器添加到经常添加和删除项的类的替代答案。这是受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);

您可以使用以下代码：

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；
对齐项目