[英]How to add a onclick event to an element using javascript
我已经使用document.getElementsByClassname创建了一个元素,并希望向该元素添加一个onclick事件,以便当有人单击该元素时应调用onclick函数。
我尝试使用事件侦听器,但是即使我没有单击任何函数,此命令也将执行。 使用jQuery我们可以通过绑定click事件来做到这一点,但是我的要求是在javascript /
谢谢!
element.addEventListener("click", alert('clicked'), false);// Add onclick eventListener
var element= document.getElementsByClassName('classname');
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选择器字符串作为参数。
尝试这个:
document.getElementsByClassName
始终返回元素数组。
var element= document.getElementsByClassName('classname');
for(var i=0;i<element.length;i++){
element[i].addEventListener("click", function(){alert('clicked')}, false);
}
您必须传递函数的引用,而不是添加内联警报。
var element= document.getElementsByClassName('classname');
function doSomething() {
alert('clicked')
}
// add event listener to element
element.addEventListener("click", doSomething, false);
您可以为此使用.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
您可以使用事件委托或DOMNode.matches。
document.addEventListener('click', function(e) {
if (e.target.className == 'classname') // if (e.target.matches('.classname'))
{
//do something
}
});
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
我能够使用以下javascript代码向元素添加onclick事件
list_title = document.createElement('UL');
list_title.onclick=function() {
// place your code here
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.