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

Question

我想通过ID为元素添加基本的点击处理程序。通常我会使用jQuery，但我忘记了如何在vanilla js中实现。

不使用jQuery，最好的方法是什么：

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

- NimChimpsky

---

这个问题到底有什么不明确的地方？它是一个非常清晰、简洁的问题。不要因为它们太基础而关闭问题。 - thomasruns

同意，@thomasruns。我在谷歌上搜索“vanilla javascript add click handler”时发现这个问答很有帮助，正是我所需要的。 - Mindi Torrey

我也觉得这很有帮助，因为我有完全相同的问题。 - zero_cool

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 对象的方法。

- I Hate Lazy

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

- Niet the Dark Absol

---

为什么这是最正确的方式？ - NimChimpsky

因为它允许您附加多个处理程序，而反复分配给 onclick 将覆盖旧的处理程序。第二种方法还通过检查要使用的方法来包括浏览器兼容性。 - Niet the Dark Absol

你可能想测试.addEventListener而不是.attachEvent，这样IE9+将使用“最佳”方法。 - I Hate Lazy

Answer 3

document.getElementById('myBasic').addEventListener("click",function(){alert("teststring")});

- Anton