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

Question

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

15

我使用document.getElementsByClassname创建了一个元素，希望为该元素添加一个onclick事件，当有人单击此元素时，应调用onclick函数。

我尝试使用事件监听器，但这将在我不点击任何函数时执行。使用jQuery可以通过绑定点击事件来实现，但我需要的是javascript。

谢谢！

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

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

- 221B

7个回答

6

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

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

- Vicky Gonsalves

在我的情况下，没有元素数组，因此只有一个元素，因此我不需要任何数组。我已经使用了事件监听器，但是当我在网站上部署此代码时，在页面加载时我的函数会执行，但我希望仅在用户单击该元素时才执行我的函数。 - 221B

了解更多关于 getElementsByClassName 的内容，请访问 https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName - Vicky Gonsalves

我已经为我的元素分配了一些值。但现在的问题是，如何绑定一个onclick事件到我创建的元素？ - 221B

2

你需要传递一个函数的引用，而不是添加内联警告。

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

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

- Punit Sachan

1

您可以使用jQuery方法.attr()来实现这个功能：

$('.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

- Ishan Jain

谢谢回复，但我不想使用jQuery，我想用本地的JavaScript。 - 221B

2

你放置了jQuery标签。 - Yabada

是的 @EoiFirst：OP放了Jquery标签。 - Ishan Jain

0

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

- Nishanth Suresh

0

我能够使用以下JavaScript代码将onclick事件添加到元素。

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

    // place your code here
};

- Jose Kj

0

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

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

- xercool

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leo · Accepted Answer

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 选择器字符串作为参数。