JavaScript DOM 添加事件
更新時(shí)間：2009年02月14日 13:58:40 作者：
這是我在給庫中添加事件的時(shí)候?qū)懙奶砑邮录姆椒?！這個(gè)方法實(shí)現(xiàn)了跨瀏覽器之間的方法！
因?yàn)閷τ谥С諨OM的瀏覽器來說，添加事件是用addEventListener()方法來給對象添加事件！
而對于MSIE來說則是用attachEvent()來給對象添加事件！這就使得我們必須用一個(gè)容器來裝載這兩個(gè)不同瀏覽器上對事件的處理方式！這樣我們就可以直接調(diào)用addEvent()方法來給對象添加事件了！
這不是更方便？！呵呵……
讓我們來看看吧！
/**
* 注冊一個(gè)監(jiān)聽事件到元素
* @param {Object} node 所要添加事件的對象
* @param {Object} type 事件類型
* @param {Object} listener 事件方法
*/
function addEvent( node, type, listener ) {
//使用前面的方法檢查兼容性以保證平穩(wěn)退化
if(!(node = $(node))) return false;
if(node.attachEvent) { // 這是針對IE 的方法
node['e'+type+listener] = listener;
node[type+listener] = function(){node['e'+type+listener]( window.event );}
node.attachEvent( 'on'+type, node[type+listener] );
return true;
}else if (node.addEventListener) {
// 這是針對支持DOM的瀏覽器的方法
node.addEventListener( type, listener, false );
return true;
}
// 若兩種方法都不具備則返回false;
return false;
};
window['liujingning']['addEvent'] = addEvent;
使用方法：
比如我們要給頁面的onload()上添加事件，我們就可以這樣寫：
liujingning.addEvent(window,'load',function(Event) { //這里寫你要寫的代碼}
我們也可以給某個(gè)ID添加事件
var getId = document.getElementById('aa');
liujingning.addEvent(getId,'load',function(Event) { //這里寫你要寫的代碼}
而對于MSIE來說則是用attachEvent()來給對象添加事件！這就使得我們必須用一個(gè)容器來裝載這兩個(gè)不同瀏覽器上對事件的處理方式！這樣我們就可以直接調(diào)用addEvent()方法來給對象添加事件了！
這不是更方便？！呵呵……
讓我們來看看吧！
/**
* 注冊一個(gè)監(jiān)聽事件到元素
* @param {Object} node 所要添加事件的對象
* @param {Object} type 事件類型
* @param {Object} listener 事件方法
*/
function addEvent( node, type, listener ) {
//使用前面的方法檢查兼容性以保證平穩(wěn)退化
if(!(node = $(node))) return false;
if(node.attachEvent) { // 這是針對IE 的方法
node['e'+type+listener] = listener;
node[type+listener] = function(){node['e'+type+listener]( window.event );}
node.attachEvent( 'on'+type, node[type+listener] );
return true;
}else if (node.addEventListener) {
// 這是針對支持DOM的瀏覽器的方法
node.addEventListener( type, listener, false );
return true;
}
// 若兩種方法都不具備則返回false;
return false;
};
window['liujingning']['addEvent'] = addEvent;
使用方法：
比如我們要給頁面的onload()上添加事件，我們就可以這樣寫：
liujingning.addEvent(window,'load',function(Event) { //這里寫你要寫的代碼}
我們也可以給某個(gè)ID添加事件
var getId = document.getElementById('aa');
liujingning.addEvent(getId,'load',function(Event) { //這里寫你要寫的代碼}
您可能感興趣的文章:
- JS中dom0級事件和dom2級事件的區(qū)別介紹
- 一些主流JS框架中DOMReady事件的實(shí)現(xiàn)小結(jié)
- Javascript Event事件中IE與標(biāo)準(zhǔn)DOM的比較
- javascript 刪除dom對象的事件函數(shù)代碼
- DOM3中的js textInput文本事件
- JS、CSS以及img對DOMContentLoaded事件的影響
- Javascript封裝DOMContentLoaded事件實(shí)例
- JavaScript DOM事件(筆記)
- 關(guān)于javascript DOM事件模型的兩件事
- js學(xué)習(xí)總結(jié)之dom2級事件基礎(chǔ)知識詳解
相關(guān)文章
防抖和節(jié)流嚴(yán)格算起來應(yīng)該屬于性能優(yōu)化的知識,但實(shí)際上遇到的頻率相當(dāng)高,處理不當(dāng)或者放任不管就容易引起瀏覽器卡死,下面這篇文章主要給大家介紹了關(guān)于JavaScript防抖與節(jié)流的實(shí)現(xiàn)與注意事項(xiàng),需要的朋友可以參考下2022-04-04
JavaScript判斷頁面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧
這篇文章主要介紹了JavaScript判斷頁面加載完之后再執(zhí)行預(yù)定函數(shù)的技巧,原理還是利用監(jiān)聽器監(jiān)聽元素事件、被觸發(fā)則執(zhí)行函數(shù),需要的朋友可以參考下2016-05-05
uniapp微信小程序無法使用本地靜態(tài)資源圖片(背景圖在真機(jī)不顯示)的解決方法
寫微信小程序的時(shí)候,難免會為了趕進(jìn)度而直接使用本地的圖片,在模擬器上的時(shí)候可以正確顯示圖片,但是到手機(jī)上就無法顯示圖片了,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序無法使用本地靜態(tài)資源圖片(背景圖在真機(jī)不顯示)的方法,需要的朋友可以參考下2022-12-12
在日常開發(fā)中，很多時(shí)候會不經(jīng)意間寫出符合某種設(shè)計(jì)模式的代碼，而適配器其實(shí)在JavaScript中應(yīng)該是比較常見的一種了。這篇文章主要介紹了適配器在JavaScript中的體現(xiàn) ,需要的朋友可以參考下2018-09-09
在我們的日常開發(fā)過程中，我們經(jīng)常會遇到數(shù)字與字符串轉(zhuǎn)換，檢查對象中是否存在對應(yīng)值，條件性操作對象數(shù)據(jù)，過濾數(shù)組中的錯(cuò)誤值，等等這類處理。本文整理出了一些常用的小技巧，希望大家能喜歡2022-06-06
前端的初學(xué)者在學(xué)習(xí)Javascript中this指向的時(shí)候經(jīng)常都會一頭霧水,尤其是在ES6箭頭函數(shù)出現(xiàn)之前,所以本篇文章主要是介紹和總結(jié)了各種情況下的this指向,希望對大家有所幫助2023-12-12
element-ui 上傳圖片后標(biāo)注坐標(biāo)點(diǎn)
有個(gè)組件庫的名稱叫做element-ui,基于Vue2.0開發(fā),提供了豐富的PC端組件，本文通過實(shí)例代碼給大家介紹element-ui 上傳圖片后標(biāo)注坐標(biāo)點(diǎn)的示例代碼，感興趣的朋友跟隨小編一起看看吧2021-07-07
本文主要介紹了JS中的工廠模式實(shí)踐。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
關(guān)聯(lián)的Select，可以支持客戶端動態(tài)更新
關(guān)聯(lián)的Select，可以支持客戶端動態(tài)更新...2006-09-09
js實(shí)現(xiàn)QQ面板拖拽效果（慕課網(wǎng)DOM事件探秘）（全）
這篇文章主要為大家詳細(xì)介紹了QQ面板拖拽效果，探秘慕課網(wǎng)DOM事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09