瀏覽器兼容事件處理程序

掌握要點(diǎn):1、理解事件流
2、使用事件處理程序
3熙侍、不同的事件類型

一、事件流
事件流描述的是從頁面中接受事件的順序履磨。
IE的事件流是事件冒泡流蛉抓,而Netscape的事件流是事件捕獲流
1、事件冒泡
事件冒泡蹬耘,即事件最開始由最具體的元素(文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn))接收芝雪,然后逐級向上轉(zhuǎn)播至最不具體的節(jié)點(diǎn)(文檔)减余。
2综苔、事件捕獲
事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件,而最具體的節(jié)點(diǎn)最后接收到事件位岔。
二如筛、事件處理程序
1、HTML事件處理程序
2抒抬、DOM0級事件處理程序
3杨刨、DOM2級事件處理程序
DOM2級事件定義了兩個(gè)方法:用于處理指定和刪除事件處理程序的操作:addEventListener()和removeEventListener()。它們都接收三個(gè)參數(shù):要處理的事件名擦剑、作為事件處理程序的函數(shù)和一個(gè)布爾值妖胀。
4、IE事件處理程序
attachEvent()添加事件
detachEvent()刪除事件
這兩個(gè)方法接收相同的兩個(gè)參數(shù):事件處理程序名稱與事件處理函數(shù)
5惠勒、跨瀏覽器的事件處理程序
三赚抡、事件對象
事件對象event
1、DOM中的事件對象
(1)纠屋、type:獲取事件類型
(2)涂臣、target:事件目標(biāo)
(3)、stopPropagation() 阻止事件冒泡
(4)售担、preventDefault() 阻止事件的默認(rèn)行為
2赁遗、IE中的事件對象
(1)署辉、type:獲取事件類型
(2)、srcElement:事件目標(biāo)
(3)岩四、cancelBubble=true阻止事件冒泡
(4)哭尝、returnValue=false阻止事件的默認(rèn)行為

代碼

//    瀏覽器兼容事件處理程序
var eventUtil = {  
  
addHandler: function (element, type, handler) {       
 if (element.addEventListener) {            element.addEventListener(type, handler, false);        
} else if(element.attachEvent) {           
 element.attachEvent('on'+type, handler);        
} else {           
 element['on'+type]=handler;        
}    
},    
// 刪除句柄    
removeHandler: function (element, type, handler) {        
if (element.removeEventListener) {            element.removeEventListener(type, handler, false);        
} else if(element.detachEvent) {           
 element.detachEvent('on'+type, handler);        
} else {            
element['on'+type]=null;        
}    
},    
// 獲取事件   
 getEvent:function (event) {       
 return event?event:window.event;    
},    
// 獲取事件的類型   
 getType:function (event) {       
 return event.type;    
},   
 // 獲取事件來自于那個(gè)元素    
getElement:function () {      
return event.target || event.srcElement;   
 },    
// 阻止事件的默認(rèn)行為    
preventDefalut:function (event) {        
if (event.preventDefault){            
event.preventDefault();        
}else{           
event.returnValue=false;        
}    
},    
// 阻止事件冒泡    
stopPropagation:function (event) {        
if (event.stopPropagation){            
event.stopPropagation();        
} else {            
event.cancelBubble = true;        
}    
}


getStyle: function(obj, attr){
if(obj.currentStyle){
     return obj.currentStyle[attr];
}else{
      return getComputedStyle(obj, false)[attr];
}
}

}

四、cache的作用就是第一次請求完畢之后剖煌,如果再次去請求刚夺,可以直接從緩存里面讀取而不是再到服務(wù)器端讀取。

如果使用jquery末捣,可以使用 cache參數(shù)來控制

$.ajax({
url: "test.html",
cache: false, //或者設(shè)置true
success: function(html){
$("#results").append(html);
}
});

五侠姑、一行代碼解決各種IE兼容問題,IE6,IE7,IE8,IE9,IE10

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市箩做,隨后出現(xiàn)的幾起案子莽红,更是在濱河造成了極大的恐慌,老刑警劉巖邦邦,帶你破解...
    沈念sama閱讀 222,000評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件安吁,死亡現(xiàn)場離奇詭異,居然都是意外死亡燃辖,警方通過查閱死者的電腦和手機(jī)鬼店,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來黔龟,“玉大人妇智,你說我怎么就攤上這事∈仙恚” “怎么了巍棱?”我有些...
    開封第一講書人閱讀 168,561評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長蛋欣。 經(jīng)常有香客問我航徙,道長,這世上最難降的妖魔是什么陷虎? 我笑而不...
    開封第一講書人閱讀 59,782評論 1 298
  • 正文 為了忘掉前任到踏,我火速辦了婚禮,結(jié)果婚禮上尚猿,老公的妹妹穿的比我還像新娘窝稿。我一直安慰自己,他們只是感情好谊路,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,798評論 6 397
  • 文/花漫 我一把揭開白布讹躯。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪潮梯。 梳的紋絲不亂的頭發(fā)上骗灶,一...
    開封第一講書人閱讀 52,394評論 1 310
  • 那天,我揣著相機(jī)與錄音秉馏,去河邊找鬼耙旦。 笑死,一個(gè)胖子當(dāng)著我的面吹牛萝究,可吹牛的內(nèi)容都是我干的免都。 我是一名探鬼主播,決...
    沈念sama閱讀 40,952評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼帆竹,長吁一口氣:“原來是場噩夢啊……” “哼绕娘!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起栽连,我...
    開封第一講書人閱讀 39,852評論 0 276
  • 序言:老撾萬榮一對情侶失蹤险领,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后秒紧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體绢陌,經(jīng)...
    沈念sama閱讀 46,409評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,483評論 3 341
  • 正文 我和宋清朗相戀三年熔恢,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了脐湾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,615評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡叙淌,死狀恐怖秤掌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情凿菩,我是刑警寧澤机杜,帶...
    沈念sama閱讀 36,303評論 5 350
  • 正文 年R本政府宣布帜讲,位于F島的核電站衅谷,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏似将。R本人自食惡果不足惜获黔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,979評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望在验。 院中可真熱鬧玷氏,春花似錦、人聲如沸腋舌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赞辩,卻和暖如春雌芽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辨嗽。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1 272
  • 我被黑心中介騙來泰國打工世落, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人糟需。 一個(gè)月前我還...
    沈念sama閱讀 49,041評論 3 377
  • 正文 我出身青樓屉佳,卻偏偏與公主長得像,于是被迫代替她去往敵國和親洲押。 傳聞我的和親對象是個(gè)殘疾皇子武花,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,630評論 2 359

推薦閱讀更多精彩內(nèi)容

  • JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設(shè)計(jì)風(fēng)格下杈帐,當(dāng)文檔髓堪、瀏覽器、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,257評論 3 11
  • 一、問答 1. dom對象的innerText和innerHTML有什么區(qū)別炮沐? innerHTML: 也就是從對象...
    饑人谷_羅偉恩閱讀 600評論 0 2
  • 以下文章為轉(zhuǎn)載争群,對理解JavaScript中的事件處理機(jī)制很有幫助,淺顯易懂大年,特分享于此换薄。 什么是事件? 事件(E...
    jxyjxy閱讀 3,042評論 1 10
  • 本章內(nèi)容 理解事件流 使用事件處理程序 不同的事件類型 JavaScript 與 HTML 之間的交互是通過事件實(shí)...
    悶油瓶小張閱讀 284評論 0 0
  • 寫了兩個(gè)月翔试,今天終于提交了轻要。走在學(xué)校的路,在細(xì)碎的夕陽下垦缅,沿著樹林一路自言自語冲泥,完全處于無意識的狀態(tài)”谙眩看著車外班車...
    木ding西閱讀 449評論 0 1