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

【问题标题】：How to add a onclick event to an element using javascript如何使用 javascript 向元素添加 onclick 事件
【发布时间】：2013-11-16 12:00:21
【问题描述】：

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

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

谢谢！

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

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

【问题讨论】：

标签： javascript jquery dom

【解决方案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 选择器字符串作为参数。

【讨论】：

恕我直言，我要补充一点，如果您可以断言您将只有一个带有类名的元素，那么它应该是一个 id 而不是一个类
@Logar id 表示您要识别 HTML 元素。这并不意味着文档中的每个唯一元素都应标有 id。您不一定要对<html> 或<body> 这样做，是吗？就“语义网”而言，这是一种不好的做法。

【解决方案2】：

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

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

【讨论】：

在我的例子中，没有元素数组，所以只有一个元素，因此我不需要任何数组。我使用了 eventlistener，但是当我在网站中部署此代码时，在页面加载时我的函数会执行，但我希望我的函数仅在用户单击元素时执行
阅读更多关于getElementsByClassNamedeveloper.mozilla.org/en-US/docs/Web/API/…
完全按照给定页面中的说明，我为我的元素分配了一些值。但现在的问题是，如何为我创建的元素绑定 onclick 事件

【解决方案3】：

您必须传递函数的引用而不是添加内联警报。

var element= document.getElementsByClassName('classname');
function doSomething() {
  alert('clicked')
}

// add event listener to element 
element.addEventListener("click", doSomething, false);

【讨论】：

【解决方案4】：

您可以为此使用.attr() jquery 方法：

$('.classname').attr("onClick", "javascript:alert('clicked'); return false;");

Try this

JavaScript

var element= document.getElementsByClassName('classname');
element[0].onclick = function() { alert('Hello'); };//-- here i used "[0]" to refer first matched element

Try with javascript

【讨论】：

感谢您的回复，但我不想使用 jQuery，而是想在原生 javascript 中使用。
你放了jquery标签。
是 @EoiFirst：OP 放置 Jquery 标记。

【解决方案5】：

您可以使用事件委托或 DOMNode.matches。

document.addEventListener('click', function(e) {
   if (e.target.className == 'classname') // if (e.target.matches('.classname'))
   {
       //do something
   }
});

【讨论】：

【解决方案6】：

Please try the following:

var rows = 3;
var cols = 3;
var defaultVal=0;
var mainDiv=document.getElementById("mainDiv")
var arr = []
for (var i = 0; i < rows; i++) {
    arr[i] = [];
  for(var j=0;j<cols;j++){
    arr[i][j]=defaultVal++;
    var element=document.createElement("input");
    element.type="button";
    element.className="left";
    element.addEventListener("click", testFunction, false);
    element.value=arr[i][j];
    mainDiv.appendChild(element);


  }


}
function testFunction(){
    alert('hi')
}

//Use element.addEventListener("click", testFunction, false); 
//Use testFunction and not testFunction() as this "()" invokes the function

【讨论】：

【解决方案7】：

我能够使用以下 javascript 代码向元素添加 onclick 事件

list_title = document.createElement('UL');
list_title.onclick=function() {

    // place your code here
};

【讨论】：