首頁 > 開發者 > 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 跨瀏覽器的事件系統
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
