如何用普通Javascript捕捉点击事件？

我知道当使用jQuery时，您可以执行

$（'element'）

捕获HTML元素的单击事件，但是如何使用纯Javascript实现这一点

document.getElementById('element').onclick = function(e){
  alert('click');
}

演示：

通过添加或设置元素：

var el = document.getElementById("myelement");

el.addEventListener('click', function() {
  alert("Clicked");
});

// ... or ...

el.onclick = function() {
  alert("Clicked");
}

请注意，偶数侦听器样式允许添加多个侦听器，而回调处理程序样式是独占的（只能有一个）

---

如果需要将这些处理程序添加到多个元素中，则必须根据需要获取它们，并将它们分别添加到每个元素中。

我建议使用

addEventListener

，而不是直接分配处理程序函数

var div = document.getElementById('test');
div.addEventListener('click', function(){ 
    console.log('CLICKED');
});

我将列举一些我认为最重要的原因：

您不能使用

addEventListener

错误地将事件侦听器添加到非DOM对象中-您的代码将失败，而不是悄悄地将

onclick

函数分配给某个对象

使用

onclick

，您只能附加一个事件侦听器（不需要对每个要添加的处理程序进行额外的代码操作），这可能会被证明是有限的

---

这是一篇关于这方面的有趣文章，我曾经使用过相同的方法，基本上，您可以将事件处理程序添加到

窗口

。

---

我通常创建一种全局事件处理程序，非常强大，您可以捕获事件“类型”节点类型的类名，您可以命名，我希望人们会发现这很有用

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

需要注意的一件事：jquery选择器'element'将用于“element”标记，即。。。。getElementById（'element'）选择id为“element”的元素，例如…@Asmor:True，在这种情况下，您可以使用

document.getElementsByTagName（'div'）

。演示：添加事件监听器（相对于使用onclick）有什么好处吗？在IE中，您必须使用attachEvent而不是标准的addEventListener。@chromedude：有，值得注意的是，您可以添加多个监听器，还可以显式防止或允许事件传播到父元素。关于事件侦听器的链接MDN页面有更多信息。@ashansky:true，IE直到版本9才支持它，即使它是DOM level 2（2000年11月发布）的一部分。

attachEvent有一个缺点，即“this”的值将是对窗口对象的引用，而不是对其激发的元素的引用。

该死的IE…如果先备份原始事件，则可以使用

onclick

附加多个事件<代码>变量单击=el.onclick；el.onclick=function（e）{u click.call（this，e）；//更多代码}@Rocket 1st-感谢

将
附加到
添加
排版修复：第二，当然我可以围绕它做一些“方面”的工作，问题是——其他人正在使用您的代码，并行编写代码或定制代码，他们可能不会这么慷慨……同意。只是说你可以，但这不是一个好主意。这似乎比将事件附加到你想要的单个元素效率低。好吧，这将是一个或三个元素，我将发布一个示例来说明它如何更实用。此外，即使没有事件（即使在链接上），每次单击都会调用此函数，似乎效率不高。@Rocket No Rocket它不会受伤，如果有两个相同的ID，谁会傻呢：）
han
在这里似乎是多余的，它与
elem
一样，因此是不需要的。附加事件，然后找出什么比只将事件附加到多个元素效率低？