你如何用普通的 Javascript 捕捉点击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7908056/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you catch a click event with plain Javascript?
提问by chromedude
I know that when using jQuery you can do $('element').click();to catch the click event of an HTML element, but how do you do that with plain Javascript?
我知道在使用 jQuery 时，您可以$('element').click();捕获 HTML 元素的点击事件，但是您如何使用纯 Javascript 做到这一点？
回答by Rocket Hazmat
document.getElementById('element').onclick = function(e){
alert('click');
}
回答by maerics
By adding an event listeneror setting the onclickhandlerof an element:
通过添加事件侦听器或设置元素的onclick处理程序：
var el = document.getElementById("myelement");
el.addEventListener('click', function() {
alert("Clicked");
});
// ... or ...
el.onclick = function() {
alert("Clicked");
}
Note that the even listener style allows multiple listeners to be added whereas the callback handler style is exclusive (there can be only one).
请注意，偶数侦听器样式允许添加多个侦听器，而回调处理程序样式是独占的（只能有一个）。
If you need to add these handlers to multiple elements then you must acquire them as appropriate and add them to each one separately.
如果您需要将这些处理程序添加到多个元素，那么您必须根据需要获取它们并将它们分别添加到每个元素中。
回答by ZenMaster
I would recommend going with addEventListenerinstead of assigning the handler function directly.
我建议使用addEventListener而不是直接分配处理程序函数。
var div = document.getElementById('test');
div.addEventListener('click', function(){
console.log('CLICKED');
});
There are several reasons for that by I am going to name those I find the most important:
我将列出我认为最重要的原因有几个原因：
- You can't mistakenly add event listener to a non-DOM object with
addEventListener- your code would fail instead of quietly assigningonclickfunction to some object - You can attach only one(without additional code manipulation for every handler that you want to add) event listener with
onclick- something that might prove limiting
- 您不能错误地将事件侦听器添加到非 DOM 对象
addEventListener- 您的代码将失败，而不是悄悄地将onclick函数分配给某个对象 - 您只能附加一个（无需为您要添加的每个处理程序进行额外的代码操作）事件侦听器
onclick- 这可能会被证明是限制性的
回答by david
I usaly create a kind of global event handler, very powerful, you can capture className, of the event "types" nodeTypes, you name it, i hope people will find this useul
我通常创建一种全局事件处理程序，非常强大，您可以捕获事件“类型”nodeTypes 的 className，您命名它，我希望人们会发现这个有用
document.onclick = eventRef
function eventRef(evt) {
var han;
evt || (evt = window.event);
if (evt) {
var elem = evt.target ? han = evt.target : evt.srcElement && (han = evt.srcElement);
// evt.type could be, mouseup, mousedown...
// elem.id is the id or the element
// elem.className is the class name of the element
// you could nest expression, use substrings to extract part of a className
if (evt.type=="click" && elem.id == "gotit" || elem.className == "someClassName") {
alert(elem.id);
}
}
}
回答by Krishna Gupta
Thanks to vanilla js
感谢香草js
document.addEventListener('click', function (event) {
// If the clicked element doesn't have the right selector, bail
if (!event.target.matches('input')) return;
// Don't follow the link
event.preventDefault();
// Log the clicked element in the console
console.log(event.target);
}, false);
This also show which element is c
这也显示哪个元素是 c
回答by VoidMain
Here is an interesting article about that, i used the same approach some times, basically, you add the event handler to window.
http://mislav.uniqpath.com/js/handling-events-on-elements/
这是一篇关于此的有趣文章，我有时使用相同的方法，基本上，您将事件处理程序添加到window.
http://mislav.uniqpath.com/js/handling-events-on-elements/
