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

chr*_*ude 21 html javascript onclick

我知道在使用jQuery时你可以$('element').click();捕获HTML元素的click事件,但是如何使用普通的Javascript呢?

Roc*_*mat 37

document.getElementById('element').onclick = function(e){
  alert('click');
}
Run Code Online (Sandbox Code Playgroud)

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


mae*_*ics 14

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

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

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

// ... or ...

el.onclick = function() {
  alert("Clicked");
}
Run Code Online (Sandbox Code Playgroud)

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

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

  • 在IE中,您必须使用attachEvent而不是标准的addEventListener. (2认同)
  • @ashansky:是的,IE直到第9版才支持它,尽管它是DOM 2级的一部分(2000年11月发布). (2认同)

dav*_*vid 5

我通常创建一种全局事件处理程序,非常强大,您可以捕获事件“类型”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);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)