[英]How to add a onclick event to an element using javascript
I have created an element using document.getElementsByClassname, and would like to add a onclick event to this element, so that when someone clicks on this element onclick function should be called. 我已经使用document.getElementsByClassname创建了一个元素,并希望向该元素添加一个onclick事件,以便当有人单击该元素时应调用onclick函数。
I tried with event listener, but this will execute even when I don't click on any function. 我尝试使用事件侦听器,但是即使我没有单击任何函数,此命令也将执行。 Using jQuery we can do that by binding a click event, but I my requirement is in javascript/ 使用jQuery我们可以通过绑定click事件来做到这一点,但是我的要求是在javascript /
Thanks! 谢谢!
element.addEventListener("click", alert('clicked'), false);// Add onclick eventListener
var element= document.getElementsByClassName('classname');
getElementsByClassName
returns an HTMLCollection
, so even though you have only one element with that classname in DOM, you have to retrieve it with index 0: getElementsByClassName
返回一个HTMLCollection
,因此即使您在DOM中只有一个具有HTMLCollection
元素,也必须使用索引0来检索它:
var element = document.getElementsByClassName('classname')[0];
element.addEventListener("click", function(e) {
alert('something');
}, false);
Alternatively, since you only have one element with the classname, you can safely use querySelector
, which will return the first match element. 另外,由于只有一个具有类名的元素,因此可以安全地使用querySelector
,它将返回第一个match元素。
var element = document.querySelector('.classname');
^
element.addEventListener("click", function(e) {
alert('something');
}, false);
Please note the dot in above code. 请注意上面代码中的点。 querySelector
accepts a CSS selector string as a parameter. querySelector
接受CSS选择器字符串作为参数。
Try this: 尝试这个:
document.getElementsByClassName
always returns array of elements. document.getElementsByClassName
始终返回元素数组。
var element= document.getElementsByClassName('classname');
for(var i=0;i<element.length;i++){
element[i].addEventListener("click", function(){alert('clicked')}, false);
}
You have to pass reference of a function instead of adding inline alert. 您必须传递函数的引用,而不是添加内联警报。
var element= document.getElementsByClassName('classname');
function doSomething() {
alert('clicked')
}
// add event listener to element
element.addEventListener("click", doSomething, false);
You can use .attr()
jquery method for this: 您可以为此使用.attr()
jquery方法:
$('.classname').attr("onClick", "javascript:alert('clicked'); return false;");
JavaScript 的JavaScript
var element= document.getElementsByClassName('classname');
element[0].onclick = function() { alert('Hello'); };//-- here i used "[0]" to refer first matched element
You can use an event delegation or DOMNode.matches. 您可以使用事件委托或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
I was able to add an onclick event to an element using following javascript code 我能够使用以下javascript代码向元素添加onclick事件
list_title = document.createElement('UL');
list_title.onclick=function() {
// place your code here
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.