JavaScript单击类上的事件侦听器

Question

JavaScript单击类上的事件侦听器

目前，我正在尝试编写一些JavaScript，以获取已单击的类的属性。我知道要正确地这样做，我应该使用事件侦听器。我的代码如下：

var classname = document.getElementsByClassName("classname");var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);};classname.addEventListener('click', myFunction(), false);

我原以为每次单击其中一个类来告诉我属性时，都会收到一个警告框，但不幸的是，这是行不通的。有人能帮忙吗？

(注 - 我可以很容易地在jQuery但我会不喜欢用它)

Answer 1

这应该管用。getElementsByClassName返回列阵匹配条件的元素的类似数组的对象(请参阅编辑)。var&nbsp;classname&nbsp;=&nbsp;document.getElementsByClassName("classname");var&nbsp;myFunction&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;attribute&nbsp;=&nbsp;this.getAttribute("data-myattribute"); &nbsp;&nbsp;&nbsp;&nbsp;alert(attribute);};for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;classname.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;classname[i].addEventListener('click',&nbsp;myFunction,&nbsp;false);}jQuery为您做循环部分，您需要在普通JavaScript中这样做。如果你有ES6支援您可以将最后一行替换为：&nbsp;&nbsp;&nbsp;&nbsp;Array.from(classname).forEach(function(element)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;element.addEventListener('click',&nbsp;myFunction); &nbsp;&nbsp;&nbsp;&nbsp;});注意：旧浏览器(如IE6、IE7、IE8)不支持getElementsByClassName所以他们回来了undefined.编辑：更正getElementsByClassName不返回数组，但大多数情况下返回HTMLCollection，或者NodeList是一些浏览器(Mozilla参考文献)。这两种类型都类似于数组(这意味着它们有一个Length属性，并且可以通过它们的索引访问对象)，但是严格来说，它们不是Array，也不是从Array继承的。(这意味着不能对这些类型执行其他可以在Array上执行的方法)