腳本之家服務器常用軟件

快捷導航

js事件驅動機制瀏覽器兼容處理方法

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

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

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

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

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

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

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

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

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

注意：

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

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

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

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

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

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

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

不同的瀏覽器，有各自獨有的綁訂方式，因為丌兼容，所以盡量少用。

Script腳本可以在<body>中寫

等價于下圖

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

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

3.3. 事件對象 ***

1) 獲得事件對象

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

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

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

2) 事件對象的作用

a. 獲得鼠標點擊的坐標

event.clientX event.clientY

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

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

3.4. 事件冒泡 **

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

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

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

【案例3.4】事件對象 **

<html>

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

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

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

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

對事件進行處理程序或函數(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>