用JavaScript事件串連執(zhí)行多個(gè)處理過(guò)程的方法
更新時(shí)間:2007年03月09日 00:00:00 作者:
最近用到JavaScript 事件處理機(jī)制,找了些資料。
以前寫 JavaScript 程序時(shí),事件都是采用
object.event = handler;
的方式初始化。這種方式對(duì)于 Internet Explorer、Mozilla/Firefox 和 Opera 來(lái)說(shuō)很通用。但是有一個(gè)問(wèn)題就是,這種方式只能一個(gè)事件對(duì)應(yīng)一個(gè)事件處理過(guò)程。如果希望一個(gè)事件可以依次執(zhí)行多個(gè)處理過(guò)程就不好用了。
但是 Internet Explorer 從 5.0 開(kāi)始提供了一個(gè) attachEvent 方法,使用這個(gè)方法,就可以給一個(gè)事件指派多個(gè)處理過(guò)程了。attachEvent 對(duì)于目前的 Opera 也適用。但是問(wèn)題是 Mozilla/Firefox 并不支持這個(gè)方法。但是它支持另一個(gè) addEventListener 方法,這個(gè)方法跟 attachEvent 差不多,也是用來(lái)給一個(gè)事件指派多個(gè)處理過(guò)程的。但是它們指派的事件有些區(qū)別,在 attachEvent 方法中,事件是以 “on” 開(kāi)頭的,而在 addEventListener 中,事件沒(méi)有開(kāi)頭的 “on”,另外 addEventListener 還有第三個(gè)參數(shù),一般這個(gè)參數(shù)指定為 false 就可以了。
因此要想在你的程序中給一個(gè)事件指派多個(gè)處理過(guò)程的話,只要首先判斷一下瀏覽器,然后根據(jù)不同的瀏覽器,選擇使用 attachEvent 還是 addEventListener 就可以了。實(shí)例如下:
if (document.all) {
window.attachEvent('onload', handler1);
window.attachEvent('onload', handler2);
}
else {
window.addEventListener('load', handler1, false);
window.addEventListener('load', handler2, false);
}
注意:attachEvent 所指派的多個(gè)過(guò)程的執(zhí)行順序是隨機(jī)的,所以這幾個(gè)過(guò)程之間不要有順序依賴。另外 attachEvent 和 addEventListener 不僅僅適用于 window 對(duì)象,其他的一些對(duì)象也支持該方法。
function addEvent(obj, evenTypeName, fn){
if (obj.addEventListener){
obj.addEventListener(evenTypeName, fn, true);
return true;
} else if (obj.attachEvent){
return obj.attachEvent("on"+evenTypeName, fn);
} else {
return false;
}
}
以前寫 JavaScript 程序時(shí),事件都是采用
復(fù)制代碼 代碼如下:
object.event = handler;
的方式初始化。這種方式對(duì)于 Internet Explorer、Mozilla/Firefox 和 Opera 來(lái)說(shuō)很通用。但是有一個(gè)問(wèn)題就是,這種方式只能一個(gè)事件對(duì)應(yīng)一個(gè)事件處理過(guò)程。如果希望一個(gè)事件可以依次執(zhí)行多個(gè)處理過(guò)程就不好用了。
但是 Internet Explorer 從 5.0 開(kāi)始提供了一個(gè) attachEvent 方法,使用這個(gè)方法,就可以給一個(gè)事件指派多個(gè)處理過(guò)程了。attachEvent 對(duì)于目前的 Opera 也適用。但是問(wèn)題是 Mozilla/Firefox 并不支持這個(gè)方法。但是它支持另一個(gè) addEventListener 方法,這個(gè)方法跟 attachEvent 差不多,也是用來(lái)給一個(gè)事件指派多個(gè)處理過(guò)程的。但是它們指派的事件有些區(qū)別,在 attachEvent 方法中,事件是以 “on” 開(kāi)頭的,而在 addEventListener 中,事件沒(méi)有開(kāi)頭的 “on”,另外 addEventListener 還有第三個(gè)參數(shù),一般這個(gè)參數(shù)指定為 false 就可以了。
因此要想在你的程序中給一個(gè)事件指派多個(gè)處理過(guò)程的話,只要首先判斷一下瀏覽器,然后根據(jù)不同的瀏覽器,選擇使用 attachEvent 還是 addEventListener 就可以了。實(shí)例如下:
復(fù)制代碼 代碼如下:
if (document.all) {
window.attachEvent('onload', handler1);
window.attachEvent('onload', handler2);
}
else {
window.addEventListener('load', handler1, false);
window.addEventListener('load', handler2, false);
}
復(fù)制代碼 代碼如下:
function addEvent(obj, evenTypeName, fn){
if (obj.addEventListener){
obj.addEventListener(evenTypeName, fn, true);
return true;
} else if (obj.attachEvent){
return obj.attachEvent("on"+evenTypeName, fn);
} else {
return false;
}
}
您可能感興趣的文章:
- JavaScript中的事件處理
- JavaScript入門教程(11) js事件處理
- Ext javascript建立超鏈接,進(jìn)行事件處理的實(shí)現(xiàn)方法
- js event事件的傳遞與冒泡處理
- javascript 處理事件綁定的一些兼容寫法
- 淺談Javascript事件處理程序的幾種方式
- js onload處理html頁(yè)面加載之后的事件
- 引用其它js時(shí)如何同時(shí)處理多個(gè)window.onload事件
- 輕松創(chuàng)建nodejs服務(wù)器(5):事件處理程序
- 詳細(xì)解讀JavaScript的跨瀏覽器事件處理
- 詳解javascript中的事件處理
- JavaScript事件處理的方式(三種)
相關(guān)文章
uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法
在uniapp的開(kāi)發(fā)中用過(guò)彈窗的都知道有個(gè)bug就是滑動(dòng)彈窗的內(nèi)容底部頁(yè)面也會(huì)跟著滑動(dòng),所以這篇文章主要給大家介紹了關(guān)于uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法,需要的朋友可以參考下2023-09-09

針對(duì)JavaScript中this指向的簡(jiǎn)單理解
這篇文章主要為大家詳細(xì)JavaScript中this指向的簡(jiǎn)單理解,感興趣的小伙伴們可以參考一下
2016-08-08 
JS利用?React.lazy?優(yōu)化頁(yè)面初次渲染
這篇文章主要介紹了JS利用?React.lazy?優(yōu)化頁(yè)面初次渲染,React.lazy?接受一個(gè)函數(shù),這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用import(),它必須返回一個(gè)Promise,該P(yáng)romise需要resolve一個(gè)default?export的React組件
2022-07-07 
two.js之實(shí)現(xiàn)動(dòng)畫效果示例
本篇文章主要介紹了two.js之實(shí)現(xiàn)動(dòng)畫效果示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11 
Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果
這篇文章主要介紹了Javascript仿新浪游戲頻道鼠標(biāo)懸停顯示子菜單效果,涉及鼠標(biāo)事件及頁(yè)面元素結(jié)點(diǎn)的遍歷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08 
微信小程序云開(kāi)發(fā)(數(shù)據(jù)庫(kù))詳解
使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲,無(wú)需搭建服務(wù)器,這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)數(shù)據(jù)庫(kù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
2019-05-05