我目前正在尝试编写一些JavaScript来获取已单击的类的属性。我知道，要正确地做到这一点，我应该使用事件侦听器。 我的代码如下:
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
classname.addEventListener('click', myFunction(), false);
我期待得到一个警告框，每次我点击一个类告诉我的属性，但不幸的是，这并不管用。有人能帮忙吗?
(注意-我可以很容易地在jQuery中做到这一点，但我不喜欢使用它)
当前回答
还要考虑到，如果单击按钮，事件侦听器的目标不一定是按钮本身，而是您所单击的按钮内部的任何内容。您可以使用currentTarget属性引用为其分配侦听器的元素。下面是现代ES中使用单一语句的一个漂亮的解决方案:
document.querySelectorAll(".myClassName").forEach(i => i.addEventListener(
"click",
e => {
alert(e.currentTarget.dataset.myDataContent);
}));
其他回答
还要考虑到，如果单击按钮，事件侦听器的目标不一定是按钮本身，而是您所单击的按钮内部的任何内容。您可以使用currentTarget属性引用为其分配侦听器的元素。下面是现代ES中使用单一语句的一个漂亮的解决方案:
document.querySelectorAll(".myClassName").forEach(i => i.addEventListener(
"click",
e => {
alert(e.currentTarget.dataset.myDataContent);
}));
这应该有用。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指出这一点，并让我深入了解。
以上所有的答案都是正确的，我只是想演示另一种简单的方法
document.querySelectorAll('.classname').forEach( button => {
button.onclick = function () {
// rest of code
}
});
使用现代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循环遍历所有元素 在每个元素上附加一个事件监听器 使用事件。目标检索特定元素的更多信息
你可以使用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")
}
})
}
