如何在不使用jQuery的情況下添加點擊處理程序

Question

我想向使用ID的元素添加基本的點擊處理程序。通常我會使用jQuery，但我已經忘記了如何在香草js中做到這一點。

什麼是做到這一點的最好辦法，而無需使用jQuery：

$("#myBasic").click(function(){ 
    alert(「testString」); 
}); 

Answer 1

非常基本的方法是把一個函數分配給該on[event]屬性的元素

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

這具有非常廣泛的browswer支持，並且對於大多數基本案例很有用

---

有o還有事件處理功能，如.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")});