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

Question

我使用 document.getElementsByClassname 创建了一个元素，并想向该元素添加一个 onclick 事件，以便当有人点击该元素时应调用 onclick 函数。

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

谢谢!

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

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

Answer 1

getElementsByClassName 返回一个 HTMLCollection，因此即使您在 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);

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