如何使用javascript向元素添加onclick事件

Question

我已经使用document.getElementsByClassname创建了一个元素,并且想要向该元素添加一个onclick事件,这样当有人点击这个元素时,应该调用onclick函数.

我尝试使用事件监听器,但即使我没有点击任何功能,这也会执行.使用jQuery我们可以通过绑定click事件来做到这一点,但我的要求是在javascript /

谢谢!

element.addEventListener("click", alert('clicked'), false);// Add onclick eventListener 

var element= document.getElementsByClassName('classname');

Answer 1

我很震惊,回答这个问题的不止一个人getElementsByClassName会给你一个元素.真的吗？

好的,我们来谈谈解决方案:

HTMLCollection实际上返回一个querySelector,即使你在DOM中只有一个带有该类名的元素,所以你必须用索引0来检索它.

var element = document.getElementsByClassName('classname')[0];
element.addEventListener("click", function(e) {
    alert('something');
}, false);

或者,由于您只有一个带有类名的元素,因此可以安全地使用querySelector,这将返回第一个匹配元素.

var element = document.querySelector('.classname');
                                      ^
element.addEventListener("click", function(e) {
    alert('something');
}, false);

请注意上面代码中的点.getElementsByClassName接受CSS选择器字符串作为参数.

Answer 2

试试这个:
document.getElementsByClassName总是返回元素数组.

 var element= document.getElementsByClassName('classname');
 for(var i=0;i<element.length;i++){
      element[i].addEventListener("click", function(){alert('clicked')}, false);   
 }