快捷導(dǎo)航

javascript 跨瀏覽器開(kāi)發(fā)經(jīng)驗(yàn)總結(jié)（五） js 事件

更新時(shí)間：2010年05月19日 19:02:33 作者：

javascript 跨瀏覽器開(kāi)發(fā)之js 事件的兼容性問(wèn)題，需要的朋友可以參考下。

簡(jiǎn)單事件模型和高級(jí)事件模型

簡(jiǎn)單事件模型和高級(jí)事件模型簡(jiǎn)單事件，就是事件與頁(yè)面元素直觀的綁定在一起的形式，如：

 
<div onclick="alert(this.innerHTML);"> 
element.onclick = function(){alert(this.innerHTML);} 

只要不是用了個(gè)別瀏覽器獨(dú)有的事件，一般的click，mouseover事件等在各瀏覽器中都可以這么使用。

但是當(dāng)一個(gè)事件需要綁定多個(gè)監(jiān)聽(tīng)，或者需要?jiǎng)討B(tài)注冊(cè)/移出監(jiān)聽(tīng)時(shí)，簡(jiǎn)單事件模型就不夠用了，需要使用高級(jí)事件模型（IE和其他瀏覽器在使用高級(jí)事件模型時(shí)就有區(qū)別了）：

復(fù)制代碼代碼如下:

 
//注冊(cè) 
function addEventHandler(element, evtName, callback, useCapture) { 
//DOM標(biāo)準(zhǔn) 
if (element.addEventListener) { 
element.addEventListener(evtName, callback, useCapture); 
} else { 
//IE方式,忽略u(píng)seCapture參數(shù) 
element.attachEvent('on' + evtName, callback); 
} 
} 

//移除 
function removeEventHandler(element, evtName, callback, useCapture) { 
//DOM標(biāo)準(zhǔn) 
if (element.removeEventListener) { 
element.removeEventListener(evtName, callback, useCapture); 
} else { 
//IE方式,忽略u(píng)seCapture參數(shù) 
element.dettachEvent('on' + evtName, callback); 
} 
} 

標(biāo)簽中onclick事件與href屬性的調(diào)用順序關(guān)系
在a標(biāo)簽響應(yīng)點(diǎn)擊事件時(shí)，會(huì)先進(jìn)行onclick事件的響應(yīng)，再執(zhí)行href中的跳轉(zhuǎn)方法。如以下標(biāo)簽點(diǎn)擊后會(huì)先后提示“button”和“href”：

<a href=”javascript:alert(“href”);” onclick="alert(this.innerHTML);"> button </a>

但是，最好不要在href中定義具體的javascript方法，因?yàn)檫@個(gè)是定義跳轉(zhuǎn)的鏈接地址的屬性，如果需要先后執(zhí)行兩個(gè)javascript方法，應(yīng)該這樣寫(xiě)：

<a href=”#” onclick="alert(this.innerHTML); alert(“href”);"> button </a>

但是上面的寫(xiě)法中如果onclick綁定的響應(yīng)方法中并沒(méi)有提交請(qǐng)求跳轉(zhuǎn)至別的頁(yè)面，那么會(huì)發(fā)現(xiàn)當(dāng)前網(wǎng)頁(yè)做了一次刷新，因?yàn)橐陨洗a中href=“#”表示跳轉(zhuǎn)到當(dāng)前頁(yè)的頂部，但是并沒(méi)有發(fā)出新的html請(qǐng)求。有的時(shí)候，我們并不希望頁(yè)面在響應(yīng)onclick事件后又跳回頂部（尤其是頁(yè)面高度較長(zhǎng)，出現(xiàn)滾動(dòng)條，并且該鏈接位于頁(yè)面底部時(shí)，跳轉(zhuǎn)至頂部后用戶還需要拖動(dòng)滾動(dòng)條找回原來(lái)位置繼續(xù)操作時(shí)），那么應(yīng)該在onclick后返回false值，阻止繼續(xù)進(jìn)行href定義的動(dòng)作，如：

<a href=”#” onclick="alert(this.innerHTML); alert(“href”);return false；"> button </a>

或者將#替換成空的javascript語(yǔ)句：

<a href=”javascript:void(0)” onclick="alert(this.innerHTML); alert(“href”);"> button </a>

onload事件的調(diào)用順序

有的時(shí)候在頁(yè)面初始化時(shí)需要調(diào)用一些腳本來(lái)設(shè)置頁(yè)面元素的初始狀態(tài)，最標(biāo)準(zhǔn)的做法是用<body onload=””>方式或者document.onload方式調(diào)用。onload的事件的觸發(fā)會(huì)在頁(yè)面元素渲染完畢之后調(diào)用，這樣就保證了不會(huì)出現(xiàn)腳本執(zhí)行時(shí)找不到未渲染的頁(yè)面元素的情況。如果是在<head>區(qū)域的<script>塊中執(zhí)行腳本，并使用了頁(yè)面元素時(shí)，就很有可能出現(xiàn)找不到元素的錯(cuò)誤。如果是在<body>區(qū)域的<script>塊中執(zhí)行腳本，只能使用該<script>塊之前的頁(yè)面元素，因?yàn)?lt;body>區(qū)域的元素基本是順序解析的。

onchange事件

<input>元素和<select>的<option>元素都支持onchangge事件，但是經(jīng)常我們會(huì)發(fā)現(xiàn)元素的內(nèi)容值變化了卻沒(méi)有觸發(fā)onchangge事件。這是因?yàn)閛nchange事件的觸發(fā)還有另一個(gè)條件:當(dāng)前元素處于失去焦點(diǎn)(onblur)的狀態(tài)。所以，onchange事件只能捕獲用戶操作時(shí)的值變化，對(duì)于使用javascript腳本動(dòng)態(tài)改變?cè)豽alue的情況，它是捕獲不到的。

事件截獲

因除了IE之外的瀏覽器不能識(shí)別window.event所以要使用以下方式來(lái)獲取當(dāng)前事件和事件發(fā)生的目標(biāo)元素：
var evt = e?e:(window.event?window.event:null);
var el = evt.srcElement?evt.srcElement:evt.target;

這里有一些其它相關(guān)的文章，非常值得參考下
JavaScript Event事件學(xué)習(xí)第一章 Event介紹
javascript 跨瀏覽器的事件系統(tǒng)

您可能感興趣的文章: