如何使用纯Javascript捕获点击事件？

Question

我知道在使用jQuery时可以使用$('element').click();来捕获HTML元素的点击事件，但是如何使用纯Javascript实现呢？

- chromedude

Answer 1

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

演示: http://jsfiddle.net/e9jZW/1/

- gen_Eric

---

需要注意的一点是：jquery选择器'element'将用于"element"标签，例如<element>...</element>。getElementById('element')选择具有id为"element"的元素，例如<div id="element">...</div>。 - Asmor

@Asmor: 是的，在这种情况下，你可以使用document.getElementsByTagName('div')代替。示例： http://jsfiddle.net/e9jZW/2/ - gen_Eric

Answer 2

通过添加 事件监听器 或设置元素的 onclick 处理程序：

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

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

// ... or ...

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

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

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

- maerics

---

添加事件监听器是否有优势（相比使用onclick）？ - chromedude

在IE中，您必须使用attachEvent而不是标准的addEventListener。 - ashansky

@chromedude：是的，有一些，特别是你可以添加多个监听器，还可以明确地防止或允许事件传播到父元素。关于事件监听器的链接MDN页面有更多信息。 - maerics

@ashansky：是的，IE直到版本9才支持它，尽管它是DOM 2级的一部分（发布于2000年11月）。 - maerics

attachEvent 存在一个缺陷，即 "this" 的值将是对窗口对象的引用，而不是触发它的元素。该死的 IE... - gen_Eric

Answer 3

我通常创建一种全局事件处理程序，非常强大，你可以捕获事件“类型”的className、nodeTypes等等，我希望人们会发现这很有用。

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);
        }
    }
}

- david

---

好的，这是关于编程的内容。针对一个或三个元素，我会发布一个示例来展示如何更实用。 - david

此外，即使没有事件（甚至在链接上），每次单击都会调用此函数，似乎效率低下。 - gen_Eric

“han” 在这里似乎是多余的，它与“elem”相同，因此不需要。 - gen_Eric

什么？这与具有重复ID有什么关系？我的意思是每次单击都会调用此事件，然后它必须检查ID（或类或其他）。我认为附加单个事件更有效。 - gen_Eric

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/4539/discussion-between-david-and-rocket - david

Answer 4

我建议使用addEventListener代替直接分配处理程序函数。

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

有几个原因导致这样，但我将列举我认为最重要的：

1. 使用 addEventListener 时，您不会错误地将事件侦听器添加到非DOM对象上 - 您的代码会失败，而不是将 onclick 函数静默地分配给某个对象。
2. 您可以通过使用 onclick 附加仅一个事件侦听器（无需为每个要添加的处理程序进行其他代码操作） - 这可能会限制一些内容。

- ZenMaster

---

好的，如果您先备份原始事件，就可以使用 onclick 附加多个事件。 var _click = el.onclick; el.onclick=function(e){_click.call(this,e); //More code};. - gen_Eric

@Rocket 首先 - 感谢您修复“附加”到“添加”的拼写错误。 :) 其次，我当然可以在它周围进行一些"切面编程"，问题是 - 使用您的代码的其他人，同时编写或自定义它的人可能不会那么慷慨... - ZenMaster

同意。只是说你可以，并不代表这是一个好主意。 - gen_Eric

Answer 5

感谢原生JavaScript。

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。

- GSKKC

Answer 6

这是一篇关于此事的有趣文章，我有时也会使用相同的方法，基本上，您需要将事件处理程序添加到window。

http://mislav.uniqpath.com/js/handling-events-on-elements/

- VoidMain

---

将事件附加到元素，然后再找出要调用什么，难道不比直接将事件附加到多个元素更低效吗？ - gen_Eric