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

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

3 个答案: