javascript中注冊和移除事件的4種方式
更新時間：2013年03月20日 14:55:17 作者：
對于html中的一些元素注冊事件的方式有多種，接下來將為大家詳細介紹下，大家可以測試并對比下根據(jù)自己的習慣使用哪一種方式
對于html中的一些元素注冊事件的方式有多種
第一種：
<script>
function test()
{
alert("OK");
}
</script>
<a href="#" onclick="test()">測試</a>
第二種：
<a href="#" id="a">測試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.onclick=test;//注意沒有()
</script>
第三種(W3C模型)：
<a href="#" id="a">測試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.addEventListener("click",test,false);
</script>
其中addEventListener()三個參數(shù)中，第一個表示什么事件類型，注意沒有on，第二個指定方法，第三個是標示是事件冒泡(true)還是事件捕獲(false)，涉及到從下到上還是從上到下的事件發(fā)生順序。
移除事件的方法時removeEventListener(),其中參數(shù)和addEventListener()一樣。
這種模式在IE瀏覽器中會報錯，在chrome中正常執(zhí)行。
第四種(微軟模型)：
<a href="#" id="a">測試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.attachEvent("onclick",test);
</script>
其中attachEvent()兩個參數(shù)中，第一個表示什么事件類型，注意帶on，第二個指定方法。
移除事件的方法是detachEvent(),其中參數(shù)和attachEvent()一樣。
第一種：
復制代碼 代碼如下:
<script>
function test()
{
alert("OK");
}
</script>
<a href="#" onclick="test()">測試</a>
第二種：
復制代碼 代碼如下:
<a href="#" id="a">測試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.onclick=test;//注意沒有()
</script>
第三種(W3C模型)：
復制代碼 代碼如下:
<a href="#" id="a">測試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.addEventListener("click",test,false);
</script>
其中addEventListener()三個參數(shù)中，第一個表示什么事件類型，注意沒有on，第二個指定方法，第三個是標示是事件冒泡(true)還是事件捕獲(false)，涉及到從下到上還是從上到下的事件發(fā)生順序。
移除事件的方法時removeEventListener(),其中參數(shù)和addEventListener()一樣。
這種模式在IE瀏覽器中會報錯，在chrome中正常執(zhí)行。
第四種(微軟模型)：
復制代碼 代碼如下:
<a href="#" id="a">測試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.attachEvent("onclick",test);
</script>
其中attachEvent()兩個參數(shù)中，第一個表示什么事件類型，注意帶on，第二個指定方法。
移除事件的方法是detachEvent(),其中參數(shù)和attachEvent()一樣。
相關(guān)文章
微信小程序配置服務(wù)器提示驗證token失敗的解決方法
這篇文章主要介紹了微信小程序配置服務(wù)器提示驗證token失敗的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
JS.getTextContent(element,preformatted)使用介紹
JS.getTextContent獲取標簽的文字想必大家并不陌生吧，下面為大家介紹下具體的使用方法，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了electron 如何將任意資源打包的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了JS和Nodejs中的事件驅(qū)動，對事件驅(qū)動感興趣的同學，可以參考下2021-05-05
這篇文章主要介紹了Javascript對象按照屬性排序方法示例探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
layui使用及簡單的三級聯(lián)動實現(xiàn)教程
這篇文章主要給大家介紹了關(guān)于layui使用及簡單的三級聯(lián)動的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
javascript實現(xiàn)顯示和隱藏div方法匯總
本文章通過幾個簡單的實例告訴你如何來實例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦，有需要的同學可以參考一下本文章。2015-08-08
javascript實現(xiàn)簡單飛機大戰(zhàn)小游戲
這篇文章主要為大家詳細介紹了javascript實現(xiàn)簡單飛機大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
下面小編就為大家分享一篇javaScript動態(tài)添加Li元素的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02![一個非常好用的文字滾動的案例，鼠標懸浮可暫停[兩種方案任選]](http://img.jbzj.com/images/xgimg/bcimg9.png)
一個非常好用的文字滾動的案例，鼠標懸浮可暫停[兩種方案任選]
本文主要介紹了非常好用的文字滾動的案例，鼠標懸浮可暫停的兩種實現(xiàn)方案，代碼簡潔，可收藏備用。需要的朋友來看下吧2016-12-12