Question

我知道在使用jQuery时你可以$('element').click();来捕获HTML元素的click事件，但是如何使用普通的Javascript来做到这一点？

Answer 1

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

DEMO：http://jsfiddle.net/e9jZW/1/

Answer 2

添加event listener或设置元素的onclick handler：

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

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

// ... or ...

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

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

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

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

Answer 4

我建议使用addEventListener而不是直接分配处理函数。

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

有几个原因可以解释我认为最重要的原因：

您不能错误地将事件侦听器添加到addEventListener的非DOM对象 - 您的代码将失败而不是安静地将onclick函数分配给某个对象
您可以附加仅一个（对于您要添加的每个处理程序没有额外的代码操作）事件监听器onclick - 可能会限制的内容

Answer 5

这是一篇有趣的文章，我有时使用相同的方法，基本上，你将事件处理程序添加到window。 http://mislav.uniqpath.com/js/handling-events-on-elements/

Answer 6

感谢香草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

你如何用普通的Javascript捕获点击事件？

6 个答案: