首頁 > 開發者 > JavaScript
<html> <head></head> <body> <div></div> </body></html>
一：事件冒泡：
在中，如果單擊div，那麼事件的初始點由div->body->html->document對象，這種模式叫事件冒泡。主要是IE遊覽器支援這一種模式，還有Firefox Chrome Safari，只是這三種遊覽器與IE有一點點差異，它們都冒泡在了window對象上。
二：事件捕獲：
在中，如果單擊div，那麼事情的初始點由document對象開始，document對象->html->body-div，這種模式叫事件捕獲。主要是Firefox Chrome Safari Opera遊覽器支援。
三：DOM2級事件：
在中，如果單擊div，實際的目標在捕獲階段不會接收事件，一直由document->html->body接著停止在這一階段。接著在div這個目標上觸發事件，又由此回走，div->body-html-document對象。【Firefox Chrom Safari Opera 支援，IE不支援。】
實際階段：
在我們做開發的時候，常用的幾種方式，一是：鑲嵌在HTML結構中，二是通過一個匿名函數來執行事件，三是通過事件處理常式添加事件。
第一種：HTML結構中的事件：
<html> <head></head> <body> <div Onclick ="指令碼函數"; ></div> </body></html>
第二種：匿名函數
function(){ var a = document.getElementById("d"); a.onclick = function(){ 執行函數 }}
第三種：事件處理常式添加事件
function de(){ var a = document.getElementById("a"); a.addEventListener("click",function(){ 執行函數 },false);}
當然既然能添加事件，也能移除事件，方法是：removeEventListener()。
var a = document.getElementById("a");var b = function(){ 執行函數}//添加事件a.addEventListener("click",b,false);//移除事件a.removeEventListener("click",b,false);
經驗：添加事件時，最好是用一個變數來接收你需要執行的內容，通過一個匿名函數，不然移除會報錯。
var a = document.getElemetById("a");a.addEventListener("click",function(){ 函數體},false);a.removeEventListener("click",function(){ 函數體},false);//報錯，無效。
在用事件添加程式添加事件時，IE與其他遊覽器有些不同，它的方法如下：
var a = document.getElementById("a");var b = function(){ 函數體}//添加事件a.attachEvent("onclick",b);//移除事件a.detachEvent("onclick",b);
IE的事件中，具體事件參數，需要用HTML事件中的參數，如onclick。而其他遊覽器中則是click即可。
在整個事件模型中，還有一個event對象，它的主要作用是提供包含事件的所有資訊，比如，這是什麼事件，onclick嗎？這個東東有點重要，如下是它的一些屬性：
bubbles // 事件是否冒泡cancelable // 是否取消事件的預設行為currentTarget // 事件處理常式正在處理的那個元素detail // 與事件相關的細節資訊eventPhase // 事件處理常式的階段，1，2，3preventDefault() //取消事件的預設行為stopPropagation() // 取消事件捕獲或冒泡target // 事件的目標type // 事件的類型view //與事件相關的抽象視圖
下面舉一個例子：
var a = document.getElementById("a");//匿名函數方式a.onclick = function(event){ alert(event.type); //事件的類型是onclick事件}//事件處理常式添加方式非IEa.addEventListener("click",function(event){ alert(event.type);},false);//IE方式a.attachEvent("onclick",function(event){ alert(event.type);});
以上這些都屬於滑鼠事件，既然有滑鼠也會有鍵盤事件，只是鍵盤事件，大部分在實際開發中能用到很少，當然也有一些特殊人士需要用到它。keydown keypress
keyup。keydown是當按下鍵盤上的任意鍵時觸發，keypress是按下鍵盤上的字元鍵時觸發，keyup是釋放鍵盤按鍵時觸發。在鍵盤中，每個鍵都會有對應的一個鍵碼，實際上，我們需要操作的是這些鍵碼，具體的鍵碼，還需要實際運用到的朋友去搜閱。
事件委託：在事件委託中，經常的做法是，在目標元素中的DOM樹中，選擇一個盡量最高層次來添加事件處理常式。舉個例子：
<ul id="a"></ul>
var listEvent = document.getElementById("a")var EventAll = function(event){ switch(event.type){ case "click": alert(1); break; case "mouseover": alert(2); break; }}listEvent.onclick = EventAll;listEvent.onmouseover = EventAll;
當然如果，ul中有li的話，則需要每次匹配li中的id，再做出相應的事件。
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
