javascript中注冊(cè)和移除事件的4種方式
更新時(shí)間:2013年03月20日 14:55:17 作者:
對(duì)于html中的一些元素注冊(cè)事件的方式有多種,接下來(lái)將為大家詳細(xì)介紹下,大家可以測(cè)試并對(duì)比下根據(jù)自己的習(xí)慣使用哪一種方式
對(duì)于html中的一些元素注冊(cè)事件的方式有多種
第一種:
<script>
function test()
{
alert("OK");
}
</script>
<a href="#" onclick="test()">測(cè)試</a>
第二種:
<a href="#" id="a">測(cè)試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.onclick=test;//注意沒(méi)有()
</script>
第三種(W3C模型):
<a href="#" id="a">測(cè)試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.addEventListener("click",test,false);
</script>
其中addEventListener()三個(gè)參數(shù)中,第一個(gè)表示什么事件類(lèi)型,注意沒(méi)有on,第二個(gè)指定方法,第三個(gè)是標(biāo)示是事件冒泡(true)還是事件捕獲(false),涉及到從下到上還是從上到下的事件發(fā)生順序。
移除事件的方法時(shí)removeEventListener(),其中參數(shù)和addEventListener()一樣。
這種模式在IE瀏覽器中會(huì)報(bào)錯(cuò),在chrome中正常執(zhí)行。
第四種(微軟模型):
<a href="#" id="a">測(cè)試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.attachEvent("onclick",test);
</script>
其中attachEvent()兩個(gè)參數(shù)中,第一個(gè)表示什么事件類(lèi)型,注意帶on,第二個(gè)指定方法。
移除事件的方法是detachEvent(),其中參數(shù)和attachEvent()一樣。
第一種:
復(fù)制代碼 代碼如下:
<script>
function test()
{
alert("OK");
}
</script>
<a href="#" onclick="test()">測(cè)試</a>
第二種:
復(fù)制代碼 代碼如下:
<a href="#" id="a">測(cè)試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.onclick=test;//注意沒(méi)有()
</script>
第三種(W3C模型):
復(fù)制代碼 代碼如下:
<a href="#" id="a">測(cè)試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.addEventListener("click",test,false);
</script>
其中addEventListener()三個(gè)參數(shù)中,第一個(gè)表示什么事件類(lèi)型,注意沒(méi)有on,第二個(gè)指定方法,第三個(gè)是標(biāo)示是事件冒泡(true)還是事件捕獲(false),涉及到從下到上還是從上到下的事件發(fā)生順序。
移除事件的方法時(shí)removeEventListener(),其中參數(shù)和addEventListener()一樣。
這種模式在IE瀏覽器中會(huì)報(bào)錯(cuò),在chrome中正常執(zhí)行。
第四種(微軟模型):
復(fù)制代碼 代碼如下:
<a href="#" id="a">測(cè)試</a>
<script>
function test()
{
alert("OK");
}
var x=document.getElementById("a");
x.attachEvent("onclick",test);
</script>
其中attachEvent()兩個(gè)參數(shù)中,第一個(gè)表示什么事件類(lèi)型,注意帶on,第二個(gè)指定方法。
移除事件的方法是detachEvent(),其中參數(shù)和attachEvent()一樣。
相關(guān)文章
PHP讀取遠(yuǎn)程txt文檔到數(shù)組并實(shí)現(xiàn)遍歷
這篇文章主要介紹了PHP讀取遠(yuǎn)程txt文檔到數(shù)組并實(shí)現(xiàn)遍歷,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能
本文通過(guò)實(shí)例代碼給大家介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)實(shí)現(xiàn)圖表功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-07-07JavaScript實(shí)現(xiàn)枚舉的幾種方法總結(jié)
在前端開(kāi)發(fā)中,我們可能經(jīng)常需要用到枚舉,使用枚舉的好處是為了讓代碼的可讀性更強(qiáng),避免直接使用數(shù)字或未知的字符串,但是在JavaScript中,要自己實(shí)現(xiàn)一個(gè)枚舉功能,那么大家能想到多少種實(shí)現(xiàn)枚舉的方法呢,我將介紹幾種實(shí)現(xiàn)枚舉的好方法2023-08-08input file的默認(rèn)value清空與賦值方法
出于安全性考慮,JS是不能直接設(shè)置File的value值的,下面是我總結(jié)出來(lái)的方法2010-09-09微信小程序外賣(mài)選購(gòu)頁(yè)實(shí)現(xiàn)切換分類(lèi)與數(shù)量加減功能案例
這篇文章主要介紹了微信小程序外賣(mài)選購(gòu)頁(yè)實(shí)現(xiàn)切換分類(lèi)與數(shù)量加減功能,結(jié)合具體實(shí)例形式分析了微信小程序狀態(tài)記錄、判定及數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-01-01javascript實(shí)現(xiàn)的HashMap類(lèi)代碼
這篇文章主要介紹了javascript實(shí)現(xiàn)的HashMap類(lèi)代碼,實(shí)現(xiàn)了添加、獲取、刪除、查詢(xún)key和value功能,需要的朋友可以參考下2014-06-06微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟
這篇文章主要介紹了微信小程序搭建(mpvue+mpvue-weui+fly.js)的詳細(xì)步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09