DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript 跨浏覽器開發經驗總結(五) js 事件
javascript 跨浏覽器開發經驗總結(五) js 事件
編輯:關於JavaScript     
簡單事件模型和高級事件模型

簡單事件模型和高級事件模型簡單事件,就是事件與頁面元素直觀的綁定在一起的形式,如:
復制代碼 代碼如下:
<div onclick="alert(this.innerHTML);">
element.onclick = function(){alert(this.innerHTML);}

只要不是用了個別浏覽器獨有的事件,一般的click,mouseover事件等在各浏覽器中都可以這麼使用。

但是當一個事件需要綁定多個監聽,或者需要動態注冊/移出監聽時,簡單事件模型就不夠用了,需要使用高級事件模型(IE和其他浏覽器在使用高級事件模型時就有區別了):
復制代碼 代碼如下:
//注冊
function addEventHandler(element, evtName, callback, useCapture) {
//DOM標准
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture參數
element.attachEvent('on' + evtName, callback);
}
}

//移除
function removeEventHandler(element, evtName, callback, useCapture) {
//DOM標准
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture參數
element.dettachEvent('on' + evtName, callback);
}
}



標簽中onclick事件與href屬性的調用順序關系
在a標簽響應點擊事件時,會先進行onclick事件的響應,再執行href中的跳轉方法。如以下標簽點擊後會先後提示“button”和“href”:

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

但是,最好不要在href中定義具體的javascript方法,因為這個是定義跳轉的鏈接地址的屬性,如果需要先後執行兩個javascript方法,應該這樣寫:

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

但是上面的寫法中如果onclick綁定的響應方法中並沒有提交請求跳轉至別的頁面,那麼會發現當前網頁做了一次刷新,因為以上代碼中href=“#”表示跳轉到當前頁的頂部,但是並沒有發出新的html請求。有的時候,我們並不希望頁面在響應onclick事件後又跳回頂部(尤其是頁面高度較長,出現滾動條,並且該鏈接位於頁面底部時,跳轉至頂部後用戶還需要拖動滾動條找回原來位置繼續操作時),那麼應該在onclick後返回false值,阻止繼續進行href定義的動作,如:

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

或者將#替換成空的javascript語句:

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


onload事件的調用順序

有的時候在頁面初始化時需要調用一些腳本來設置頁面元素的初始狀態,最標准的做法是用<body onload=””>方式或者document.onload方式調用。onload的事件的觸發會在頁面元素渲染完畢之後調用,這樣就保證了不會出現腳本執行時找不到未渲染的頁面元素的情況。如果是在<head>區域的<script>塊中執行腳本,並使用了頁面元素時,就很有可能出現找不到元素的錯誤。如果是在<body>區域的<script>塊中執行腳本,只能使用該<script>塊之前的頁面元素,因為<body>區域的元素基本是順序解析的。


onchange事件

<input>元素和<select>的<option>元素都支持onchangge事件,但是經常我們會發現元素的內容值變化了卻沒有觸發onchangge事件。這是因為onchange事件的觸發還有另一個條件:當前元素處於失去焦點(onblur)的狀態。所以,onchange事件只能捕獲用戶操作時的值變化,對於使用javascript腳本動態改變元素value的情況,它是捕獲不到的。

事件截獲

因除了IE之外的浏覽器不能識別window.event所以要使用以下方式來獲取當前事件和事件發生的目標元素:
var evt = e?e:(window.event?window.event:null);
var el = evt.srcElement?evt.srcElement:evt.target;

這裡有一些其它相關的文章,非常值得參考下
JavaScript Event事件學習第一章 Event介紹
javascript 跨浏覽器的事件系統
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved