如何使用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 ，因此即使您在DOM中只有一個具有HTMLCollection元素，也必須使用索引0來檢索它：

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

另外，由於只有一個具有類名的元素，因此可以安全地使用querySelector ，它將返回第一個match元素。

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

請注意上面代碼中的點。 querySelector接受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);   
 }

Answer 3

您必須傳遞函數的引用，而不是添加內聯警報。

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

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

Answer 4

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

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

嘗試這個

的JavaScript

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

嘗試使用javascript

Answer 5

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

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

Answer 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

Answer 7

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

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

    // place your code here
};