javascript - 如何在不使用 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);

Answer 3

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