js原生attachEvent與addEventListener的用法

標籤：style   blog   io   ar   color   sp   java   on   div   

現在jquery比較流行，所以我們用得比較多的是jquery，很少用原生的js. 不過還是要瞭解一下滴。

代碼如下：

<a id="btnClick" href="javascript:void(0);">點擊我</a>

如果我們要給該按鈕的點擊按鈕綁定三個函數，對js瞭解比較少的人容易寫成這樣：

<script type="text/javascript">var ele=document.getElementById("test");ele.click=method1;ele.click=method2;ele.click=method3;</script>

這是錯誤的，因為點擊事件只會執行函數3。所以我們需要用到attachEvent和addEventListener事件，attachEvent只適用於ie瀏覽器，而addEventListener只適用於Firefox

瀏覽器。綜上正確的寫法如下：

<script type="text/javascript">var ele=document.getElementById("test");if(window.attachEvent){    ele.attachEvent("onclick",function(){alert("你點擊了我");})    ele.attachEvent("onclick",function(){alert("你又點擊了我");})    ele.attachEvent("onclick",function(){alert("你又又點擊了我");})}else{    ele.addEventListener("click",function(){alert("你點擊了我");})    ele.addEventListener("click",function(){alert("你又點擊了我");})    ele.addEventListener("click",function(){alert("你又又點擊了我");})}</script>

細心的人會發現，用attachEvent時我們用的是onclick,用addEventListener時用的是click.

同時，移除綁定的函數用到的分別是deattachEvent和removeEventListener。

js原生attachEvent與addEventListener的用法