我目前正在尝试编写一些JavaScript来获取已单击的类的属性。我知道，要正确地做到这一点，我应该使用事件侦听器。 我的代码如下:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
我期待得到一个警告框，每次我点击一个类告诉我的属性，但不幸的是，这并不管用。有人能帮忙吗?
(注意-我可以很容易地在jQuery中做到这一点，但我不喜欢使用它)
当前回答
*这被编辑为允许目标类的子类触发事件。详情见答案底部。＊
向经常添加和删除项的类添加事件侦听器的另一种解决方案。这是受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/
其他回答
你可以使用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")
}
})
}
使用现代JavaScript可以这样做:
const divs = document.querySelectorAll('.a'); divs.forEach(el => el.addEventListener('click', event => { console.log(event.target.getAttribute("data-el")); })); <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Example</title> <style> .a { background-color:red; height: 33px; display: flex; align-items: center; margin-bottom: 10px; cursor: pointer; } .b { background-color:#00AA00; height: 50px; display: flex; align-items: center; margin-bottom: 10px; } </style> </head> <body> <div class="a" data-el="1">1</div> <div class="b" data-el="no-click-handler">2</div> <div class="a" data-el="3">11</div> </body> </html>
按类名获取所有元素 使用forEach循环遍历所有元素 在每个元素上附加一个事件监听器 使用事件。目标检索特定元素的更多信息
以上所有的答案都是正确的，我只是想演示另一种简单的方法
document.querySelectorAll('.classname').forEach( button => {
button.onclick = function () {
// rest of code
}
});
你可以使用下面的代码:
document.body.addEventListener('click', function (evt) {
if (evt.target.className === 'databox') {
alert(this)
}
}, false);
对于许多具有相同类名的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
}
