[英]How do you catch a click event with plain Javascript?
我知道在使用 jQuery 时你可以做$('element').click();
捕捉 HTML 元素的点击事件,但是如何使用普通的 Javascript 做到这一点?
document.getElementById('element').onclick = function(e){
alert('click');
}
演示: http : //jsfiddle.net/e9jZW/1/
通过添加 事件侦听器或设置元素的onclick
处理程序:
var el = document.getElementById("myelement");
el.addEventListener('click', function() {
alert("Clicked");
});
// ... or ...
el.onclick = function() {
alert("Clicked");
}
请注意,偶数侦听器样式允许添加多个侦听器,而回调处理程序样式是独占的(只能有一个)。
如果您需要将这些处理程序添加到多个元素,那么您必须根据需要获取它们并将它们分别添加到每个元素中。
我通常创建一种全局事件处理程序,非常强大,您可以捕获事件“类型”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);
}
}
}
感谢香草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);
这也显示哪个元素是 c
我建议使用addEventListener
而不是直接分配处理程序函数。
var div = document.getElementById('test');
div.addEventListener('click', function(){
console.log('CLICKED');
});
我将列出我认为最重要的原因有几个原因:
addEventListener
错误地将事件侦听器添加到非 DOM 对象 - 您的代码将失败,而不是悄悄地将onclick
函数分配给某个对象onclick
附加一个(无需为要添加的每个处理程序进行额外的代码操作)事件侦听器 - 这可能会受到限制这是一篇关于此的有趣文章,我有时使用相同的方法,基本上,您将事件处理程序添加到window
。 http://mislav.uniqpath.com/js/handling-events-on-elements/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.