javascript中attachEvent用法實(shí)例分析
本文實(shí)例講述了javascript中attachEvent用法。分享給大家供大家參考。具體分析如下：
一般我們?cè)贘S中添加事件,是這樣子的
obj.onclick=method
這種綁定事件的方式，兼容主流瀏覽器,但如果一個(gè)元素上添加多次同一事件呢?
obj.onclick=method1 obj.onclick=method2 obj.onclick=method3
如果這樣寫,那么只有最后綁定的事件,這里是method3會(huì)被執(zhí)行,這個(gè)時(shí)候我們就不能用onclick這樣的寫法了,主角改登場(chǎng)了,在IE中我們可以使用attachEvent方法
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
使用格式是前面是事件類型,注意的是需要加on,比如onclick,onsubmit,onchange,執(zhí)行順序是
method3->method2->method1
可惜這個(gè)微軟的私人方法,火狐和其他瀏覽器都不支持,幸運(yùn)的是他們都支持W3C標(biāo)準(zhǔn)的addEventListener方法
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
執(zhí)行順序?yàn)閙ethod1->method2->method3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>attachEvent</title>
<script type="text/javascript">
//第一種方式(微軟的私人方法)
function iniEvent() {
var btn = document.getElementById("btn");
btn.attachEvent("onclick", click1);
btn.attachEvent("onclick", click2);
btn.attachEvent("onclick", click3);
}
//第二種方式(火狐和其他瀏覽器)
function iniEvent2() {
var btn = document.getElementById("btn");
btn.addEventListener("click", click1, false);
btn.addEventListener("click", click2, false);
btn.addEventListener("click", click3, false);
}
function click1() {
alert('click1');
}
function click2() {
alert('click2');
}
function click3() {
alert('click3');
}
</script>
</head>
<body onload="iniEvent()">
<input type="button" id="btn" value="attachEvent" />
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- js event事件的傳遞與冒泡處理
- Nodejs實(shí)戰(zhàn)心得之eventproxy模塊控制并發(fā)
- JavaScript使用addEventListener添加事件監(jiān)聽用法實(shí)例
- JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
- Node.js事件循環(huán)（Event Loop）和線程池詳解
- node.js中的events.emitter.once方法使用說明
- JS和JQ的event對(duì)象區(qū)別分析
- JavaScript運(yùn)行機(jī)制之事件循環(huán)(Event Loop)詳解
- js中的preventDefault與stopPropagation詳解
- javascript Event對(duì)象詳解及使用示例
- Javascript Event（事件）的傳播與冒泡
相關(guān)文章
Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單Dropdowns的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實(shí)例
當(dāng)鼠標(biāo)滑過超鏈接出現(xiàn)提示框效果實(shí)例，需要的朋友可以參考一下2013-04-04
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap導(dǎo)航條的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
localStorage的黑科技-js和css緩存機(jī)制
本文主要介紹了localStorage的黑科技-js和css緩存機(jī)制的相關(guān)知識(shí)，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
JavaScript使用prototype定義對(duì)象類型(轉(zhuǎn))[
JavaScript使用prototype定義對(duì)象類型(轉(zhuǎn))[...2006-12-12
JS對(duì)外部文件的加載及對(duì)IFRMAME的加載的實(shí)現(xiàn),當(dāng)加載完成后,指定指向方法(方法回調(diào))
callback方法回調(diào)是指當(dāng)某方法執(zhí)行完成后,去自動(dòng)執(zhí)行指定的另一方法的過程.下面舉兩個(gè)代表性的例子,說說JS世界里的方法回調(diào).2011-07-07
微信小程序?qū)崿F(xiàn)tab組件切換動(dòng)畫
tab相對(duì)而言用的還是比較多的,但是用起來并沒有難,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置之tab的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
本文主要介紹了js面向?qū)ο缶幊痰南嚓P(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
原生js封裝二級(jí)城市下拉列表的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄鷍s封裝二級(jí)城市下拉列表的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
JS實(shí)現(xiàn)圖片懶加載(lazyload)過程詳解
這篇文章主要介紹了JS實(shí)現(xiàn)圖片懶加載(lazyload)過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04