快捷導(dǎo)航

js事件驅(qū)動機(jī)制瀏覽器兼容處理方法

更新時間：2016年07月23日 09:57:26 投稿：jingxian

下面小編就為大家?guī)硪黄猨s事件驅(qū)動機(jī)制瀏覽器兼容處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

3.1. 事件是如何產(chǎn)生的 *

第一種情況，用戶對網(wǎng)頁做了某些操作，比如，點(diǎn)擊了一個按鈕，產(chǎn)生點(diǎn)擊事件。第二種情況，用戶沒有對網(wǎng)頁做操作，也可能產(chǎn)生事件，比如瀏覽器已經(jīng)將整個頁面加載完畢，會產(chǎn)生加載完成事件。當(dāng)事件產(chǎn)生以后，瀏覽器會查找產(chǎn)生事件的節(jié)點(diǎn)有沒有綁訂相應(yīng)的事件處理代碼。如果有，則調(diào)用該代碼來處理。如果沒有，會繼續(xù)向上查找父節(jié)點(diǎn)，有沒有對應(yīng)的事件處理代碼(事件冒泡)。

3.2. 綁訂事件處理代碼 **

1) 綁訂事件處理代碼到html標(biāo)記乊上

比如: <a id="a1" href="" onclick="f1();">click</a>

2) 綁訂事件處理代碼到dom節(jié)點(diǎn)之上

var obj = document.getElementById('a1'); obj.onclick=f1;

注意：

a. f1不要加"()",加"()"表示立即執(zhí)行f1這個凼數(shù)。

b. 可以使用匿名凼數(shù)迚行綁訂。

即： obj.onclick=function(){ //代碼。 }

c. 綁訂事件處理代碼到dom節(jié)點(diǎn)之上，可以將js代碼不html完全分離，方便代碼的維護(hù)。

d. 如果要給綁訂的凼數(shù)傳參?？梢允褂媚涿蕯?shù)來解決。

即: obj.onclick=function(){ f(參數(shù)); }

3) 使用瀏覽器自帶的綁訂方式（了解）

不同的瀏覽器，有各自獨(dú)有的綁訂方式，因?yàn)樨⒓嫒?，所以盡量少用。

Script腳本可以在<body>中寫

等價于下圖

如果傳參數(shù)怎么辦？使用匿名凼數(shù)

【案例3.1】綁訂事件處理代碼到html標(biāo)記之上 **

3.3. 事件對象 ***

1) 獲得事件對象

IE瀏覽器: 可以直接使用event獲得

firefox: 必須給方法添加一個參數(shù)event

一般為了兼容ie,firefox，給方法添加一個參數(shù)event

2) 事件對象的作用

a. 獲得鼠標(biāo)點(diǎn)擊的坐標(biāo)

event.clientX event.clientY

b. 獲得事件源(產(chǎn)生事件的那個對象)

firefox: event.target獲得 IE瀏覽器: event.srcElement獲得

3.4. 事件冒泡 **

1) 什么是事件冒泡？當(dāng)一個節(jié)點(diǎn)產(chǎn)生事件以后，該事件會依次向上傳遞(先傳給父節(jié)點(diǎn)，如果父節(jié)點(diǎn)還有父節(jié)點(diǎn)，再向上傳遞)。

2) 如何禁止冒泡? event.cancelBubble = true;

2) “事件冒泡”現(xiàn)象關(guān)閉對話框“你點(diǎn)擊了一個鏈接”，繼續(xù)彈出對話框“你點(diǎn)擊了一個div”

【案例3.4】事件對象 **

<html>

------------------------------------------------------------------------------------------------------

js是采用事件驅(qū)動(event-driven)響應(yīng)用戶操作的。

比如通過鼠標(biāo)或者按鍵在瀏覽器窗口或者網(wǎng)頁元素(按鈕,文本框...)上執(zhí)行的操作,我們稱之為事件(Event)。

由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動作,稱之為事件驅(qū)動 (Event-Driver)。

對事件進(jìn)行處理程序或函數(shù)，我們稱之為事件處理程序 (Event Handler)。

----------------------------------------------------------------------------------------------------------------------

瀏覽器兼容處理

<script language="javascript">
<!--
   if(window.XMLHttpRequest){ //Mozilla, Safari, IE7,IE8 
   if(!window.ActiveXObject){ // Mozilla, Safari, 
     alert('Mozilla, Safari'); 
   }else{ 
     alert('IE7 .8'); 
   } 
 }else { 
   alert('IE6'); 
 } 
//-->
</script>