你可以使用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")
    }
  })
}

你可以使用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")
    }
  })
}

你可以使用下面的代码:

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

这应该有用。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);
}

jQuery为您完成循环部分，这需要在纯JavaScript中完成。

如果你有ES6支持，你可以替换你的最后一行:

    Array.from(elements).forEach(function(element) {
      element.addEventListener('click', myFunction);
    });

注意:旧的浏览器(如IE6, IE7, IE8)不支持getElementsByClassName，因此它们返回undefined。

getElementsByClassName的详细信息

getElementsByClassName不返回数组，但在大多数浏览器中是HTMLCollection，或在某些浏览器中是NodeList (Mozilla ref)。这两种类型都是类似Array的(意味着它们有一个length属性，对象可以通过它们的索引访问)，但不是严格意义上的Array或继承自Array(意味着可以在Array上执行的其他方法不能在这些类型上执行)。

感谢用户@Nemo指出这一点，并让我深入了解。

*这被编辑为允许目标类的子类触发事件。详情见答案底部。＊

向经常添加和删除项的类添加事件侦听器的另一种解决方案。这是受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
  }
});

小提琴:https://jsfiddle.net/u6oje7af/94/

这将监听对基本元素的子元素的单击，如果单击的目标具有与选择器匹配的父元素，则将处理类事件。您可以随心所欲地添加和删除元素，而不必向各个元素添加更多的单击侦听器。这将捕获在添加侦听器之后添加的所有元素，就像jQuery功能一样(我认为它在本质上有点类似)。

这取决于事件传播，因此如果在其他地方停止事件的propagation，则可能无法工作。而且，最接近的函数显然与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类。它已被更新为使用最接近的函数，允许所需类的子类上的事件触发这些事件。原始匹配代码可以在原始提琴中找到: https://jsfiddle.net/u6oje7af/23/

对于许多具有相同类名的DOM元素，这里有一种不同的方法，即在eventListener对象中选择path key。

向直接父类添加一个事件侦听器，该父类使用相同的类包装所有子元素，并通过选择事件对象中的第一个键来获取路径。

例如，你想编辑一个表的表格单元格

    //Select tbody element & add  event listener
    let tbody = document.querySelector('tbody');

    tbody.addEventListener("click", function(e,v) {
    // Get the clicked cell
    let cell = e.path[0];
    // Get the current cell value
    let cellValue = cell.innerHTML;
    //Rest of code goes here
    }