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

问题描述

我已经使用document.getElementsByClassname创建了一个元素，并且希望在此元素中添加一个onclick事件，这样当有人点击此元素时，应该调用onclick函数。

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

谢谢！

  element.addEventListener（click，alert（'clicked'），false）; //添加onclick eventListener 
 
 var element = document .getElementsByClassName（ '类名'）; 
  

解决方案

我感到震惊的是，不止一个人回答问题想法 getElementsByClassName 会给你一个元素。真的吗？

好的，让我们来谈谈解决方案：

getElementsByClassName 实际上返回一个 HTMLCollection ，即使你在DOM中只有一个元素与该类名，所以你必须使用索引0来检索它。

  var element = document.getElementsByClassName（'classname'）[0]; 
 element.addEventListener（click，function（e）{
 alert（'something'）; 
}，false）; 
  

或者，由于您只有一个具有类名称的元素，您可以安全地使用 querySelector ，它将返回第一个匹配元素。

  var element = document.querySelector（' 。班级名称'）; 
 ^ 
 element.addEventListener（click，function（e）{
 alert（'something'）; 
}，false）; 
  

请注意上述代码中的点。 querySelector 接受CSS选择器字符串作为参数。

I have created an element using document.getElementsByClassname, and would like to add a onclick event to this element, so that when someone clicks on this element onclick function should be called.

I tried with event listener, but this will execute even when I don't click on any function.Using jQuery we can do that by binding a click event, but I my requirement is in javascript/

Thanks!

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

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

解决方案

I'm shocked that more than one people answering the question thought getElementsByClassName will give you an element. Seriously?

Ok, let's talk about the solution:

getElementsByClassName actually returns an HTMLCollection, even though you have only one element with that classname in DOM, so you have to retrieve it with index 0.

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

Alternatively, since you only have one element with the classname, you can safely use querySelector, which will return the first match element.

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

Please note the dot in above code. querySelector accepts CSS selector string as parameter.

这篇关于如何使用javascript向元素添加一个onclick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！