如何在不使用jQuery的情况下添加单击处理程序

Question

我想使用ID向元素添加基本的单击处理程序.通常我会使用jQuery,但我忘记了如何在vanilla js中完成它.

在不使用jQuery的情况下,最好的方法是什么:

$("#myBasic").click(function(){
  alert(“testString”);
});

Answer 1

非常基本的方法是只为函数的on[event]属性赋值

document.getElementById("myBasic").onclick = function() { 
                                                 alert("testString");
                                             };

这具有非常广泛的支持,并且对大多数基本情况都很有用

还有其他事件处理功能.addEventListener(evt, fn, capture),但IE只在IE9中开始支持它.在此之前,您需要使用attachEvent(onevt, fn),类似但不相同.

主要的问题.attachEvent()是它没有给你一个自动引用绑定处理程序的元素this.但是有一些解决方法.

要创建一个兼容浏览器的解决方案,您可以执行以下操作:

function addListener(elem, type, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(type, fn, false);

    } else if (elem.attachEvent) {
        elem.attachEvent("on" + type, function() {
                                          return fn.call(elem, window.event);
                                       });
    } else {
        elem["on" + type] = fn;
    }
}

你会这样称呼它:

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

addListener(el, "click", function(e) { alert(this.id); });

这应该涵盖大多数情况,虽然我有点担心.attachEvent版本的内存泄漏.

所有这些只涉及绑定处理程序.要获得一致的跨浏览器行为,您可能需要为该event对象准备好修复程序.

Answer 2

最简单的只是:

document.getElementById('myBasic').onclick = function() {
    // do something
};

最正确的方法是:

var f = function() {
    // do something
};
if( document.body.attachEvent)
    document.getElementById('myBasic').attachEvent("onclick",f);
else
    document.getElementById('myBasic').addEventListener("click",f);