高程3總結#第13章事件
阿新 • • 發佈：2018-12-10
事件
事件流
- 事件流描述的是從頁面中接收事件的順序
事件冒泡
- IE的事件流叫做事件冒泡，即事件開始時由最具體的元素(文件中巢狀層次最深的那個節點)接收，然後逐級向上傳播到較為不具體的節點
事件捕獲
- 事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件，事件捕獲的用意在於在事件到達預定目標之前捕獲它。
DOM事件流
- DOM2級事件規定的事件流包括三個階段：事件捕獲階段，處於目標階段和事件冒泡階段
事件處理程式
HTML事件處理程式
-
某個元素支援的每種事件都可以使用一個與相應事件處理程式同名的HTML特性來指定，這個特性的值應該是能夠執行的JavaScript程式碼
<input type="button" value="Click Me" onclick="alert('Clicked')">
DOM0級事件處理程式
-
每個元素，包括window和document都有自己的事件處理程式屬性，這些屬性通常全部小寫
var btn=document.getElementById("myBtn"); btn.onclick=function(){ alert("Clicked"); };
DOM2級事件處理程式
-
DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程式的操作，addEventListener()和removeEventListener()。所有DOM節點中都包含這兩個方法，並且它們都接受3個引數：要處理的事件名，作為事件處理程式的函式和一個布林值。最後這個布林值引數如果是true，表示在捕獲階段呼叫事件處理程式，如果是false，表示在冒泡階段呼叫事件處理程式
var btn=document.getElementById("myBtn"); btn.addEventListener("click",function()){ alert(this.id); },false); btn.addEventListener("click",function(){ alert("Hello world!"); },false) - 通過addEventListener()新增的事件處理程式只能使用removeEventListener()來移除，移除時傳入的引數與新增處理程式時使用的引數相同，這也意味著通過addEventListener()來新增的匿名函式將無法移除
IE事件處理程式
- IE實現了與DOM中蕾西的兩個方法，attachEvent()和detachEvent()。這兩個方法接收相同的兩個引數，事件處理程式和事件處理程式函式
跨瀏覽器的事件處理程式
- 要保證處理事件的程式碼能在大多數瀏覽器下一致地執行，只需關注冒泡階段
- 第一個要建立的方法是addHandler()，它的職責是視情況分別使用DOM0級方法，DOM2級方法或IE方法來新增時間，這個方法屬於一個名叫EventUtil的物件。addHandler()方法接收3個引數：要操作的元素、事件名稱和事件處理程式函式
- 與addHandler()對應的方法是removeHandler()它也接收相同的引數，這個方法的職責是移除之前新增的事件處理程式，無論事件處理程式時採取什麼方式新增到元素中的，如果其他方法無效，預設採用DOM0級方法
事件物件
DOM中的事件物件
- 相容DOM的瀏覽器會將一個event物件傳入到事件處理程式中，無論指定事件處理程式使用什麼方法，都會傳入event物件
IE中的事件物件
事件型別
-
DOM3級事件規定以下幾類事件
- UI事件，當用戶與頁面上的元素互動時觸發
- 焦點事件，當元素獲得或失去焦點時觸發
- 滑鼠事件，當用戶通過滑鼠在頁面上執行操作時觸發
- 滾輪事件，當使用滑鼠滾輪時觸發
- 文字事件，當在文件中輸入文字時觸發
- 鍵盤事件，當用戶通過鍵盤在頁面上執行操作時觸發
- 合成事件，當為IME輸入字元時觸發
- 變動事件，當底層DOM結構發生變化時觸發
- 變動名稱事件，當元素或屬性名變動時觸發，已廢棄
UI事件
-
UI事件指的是那些不一定與使用者操作有關的事件
- DOMActivate，表示元素已經被使用者操作，通過滑鼠或鍵盤啟用
- load，當頁面完全載入後在window上面觸發，當所有的框架都載入完畢時在框架集上面觸發，當影象載入完畢時在<img>元素上觸發，或者嵌入的內容載入完畢時在<object>元素上面觸發
- unload，當頁面完全解除安裝後在window上面觸發，當左右框架都解除安裝後在框架上面觸發，或者當嵌入的內容解除安裝完畢後在<object>元素上面觸發
- abort，在使用者停止下載過程時，如果嵌入的內容沒有載入完，則在<object>元素上面觸發
- error，當大聲在JavaScript錯誤時在window上面觸發，當無法載入影象時在<img>元素上面觸發，當無法載入嵌入內容時，在<object>元素上面觸發，或者當有一個或多個框架無法載入時在框架集上面觸發
- select，當用戶選擇文字框中一個或多個字元時觸發
- resize，當視窗或框架的大小變化時在window或框架上面觸發
- scroll，當用戶滾動帶滾動條的元素中的內容時，在該元素上面觸發，<body>元素彙總包含所載入頁面的滾動條
焦點事件
-
焦點事件會在頁面元素獲得或失去焦點時觸發
- blur，在元素失去焦點時觸發，事件不會冒泡，所有瀏覽器都支援
- DOMFocusIn，在元素獲得焦點時觸發，這個時間與HTML事件focus等價，但是冒泡，只有Opera支援這個事件，DOM3級事件廢棄了DOMFocusIn，選擇了focusin
- DOMFocusOut，在元素失去焦點時觸發，這個事件是HTML事件blur的通用版本，室友Opera支援這個事件，DOM3級事件廢棄了DOMFocusOut，選擇了focusout
- focus，在元素獲得焦點時觸發，這個事件不會冒泡，所有瀏覽器都支援它
- focusin，在元素獲得焦點時觸發，這個事件與HTML事件focus等價，但它冒泡，支援這個事件的瀏覽器有IE5.5+、Safari5.1+、Opera11.5+和Chrome
- focusout，在元素失去焦點時觸發，這個事件是HTML事件blur的通用版本，支援這個事件的瀏覽器有IE5.5+、Safari5.1+、Opera11.5+和Chrome
-
當焦點從頁面中的一個元素移動到另一個元素
- focusout在失去焦點的元素上觸發
- focusin在獲得焦點的元素上觸發
- blur在失去焦點的元素上觸發
- DOMFocusOut在失去焦點的元素上觸發
- focus在獲得焦點的元素上觸發
- DOMFocusIn在獲得焦點的元素上觸發
滑鼠與滾輪事件
-
滑鼠事件是Web開發中最常用的一類事件
- click，在使用者單擊主滑鼠按鈕（一般是左邊的按鈕）或者按下回車鍵時觸發。這一點對確保易訪問性很重要，意味著 onclick 事件處理程式既可以通過鍵盤也可以通過滑鼠執行。
- dblclick，在使用者雙擊主滑鼠按鈕（一般是左邊的按鈕）時觸發。從技術上說，這個事件並不是 DOM2 級事件規範中規定的，但鑑於它得到了廣泛支援，所以 DOM3 級事件將其納入了標準。
- mousedown，在使用者按下了任意滑鼠按鈕時觸發。不能通過鍵盤觸發這個事件。
- mouseenter，在滑鼠游標從元素外部首次移動到元素範圍之內時觸發。這個事件不冒泡，而且在游標移動到後代元素上不會觸發。DOM2 級事件並沒有定義這個事件，但 DOM3 級事件將它納入了規範。IE、Firefox 9+和 Opera 支援這個事件。
- mouseleave，在位於元素上方的滑鼠游標移動到元素範圍之外時觸發。這個事件不冒泡，而且在游標移動到後代元素上不會觸發。DOM2 級事件並沒有定義這個事件，但 DOM3 級事件將它納入了規範。IE、Firefox 9+和 Opera 支援這個事件。
- mousemove，當滑鼠指標在元素內部移動時重複地觸發。不能通過鍵盤觸發這個事件。
- mouseout，在滑鼠指標位於一個元素上方，然後使用者將其移入另一個元素時觸發。又移入的另一個元素可能位於前一個元素的外部，也可能是這個元素的子元素。不能通過鍵盤觸發這個事件。
- mouseover，在滑鼠指標位於一個元素外部，然後使用者將其首次移入另一個元素邊界之內時觸發。不能通過鍵盤觸發這個事件。
- mouseup，在使用者釋放滑鼠按鈕時觸發。不能通過鍵盤觸發這個事件。
-
發生位置
- 客戶區座標位置，clientX和clientY
- 頁面座標位置，pageX和pageY
- 螢幕座標位置，screenX和screenY
-
修改鍵
- 規定4個屬性，shiftKey、ctrlKey、altKey和metaKey
- 這些屬性中包含的都是布林值，如果相應的鍵被按下，則值為true，否則為false
-
滑鼠按鈕
- 0，表示沒有按下按鈕
- 1，表示按下了主滑鼠按鈕
- 2，表示按下了次滑鼠按鈕
- 3，表示同時按下了主、次滑鼠按鈕
- 4，表示按下了中間的滑鼠按鈕
- 5，表示同時按下了主滑鼠按鈕和中間的滑鼠按鈕
- 6，表示同時按下了次滑鼠按鈕和中間的滑鼠按鈕
- 7，表示同時按下了三個滑鼠按鈕
-
更多的事件資訊
- altLeft，布林值，表示是否按下了Alt鍵，如果altLeft值為true，則altKey值也為true
- ctrlLeft，布林值，表示是否按下了Ctrl鍵，如果ctrlLeft值為true，則ctrlKey值為true
- offsetX，游標相對於目標元素邊界的x座標
- offsetY，游標相對於目標元素邊界的y座標
- shiftLeft，布林值，表示是否按下了Shift鍵，如果shiftLeft值為true，則shiftKey值為true
-
滑鼠滾輪事件
- 與mousewheel事件對應的event物件除包含滑鼠事件的所有標準資訊外，還包含一個特殊的wheelDelta屬性，當用戶向前滾動滑鼠滾輪時，wheelDelta是120的倍數，當用戶向後滾動滑鼠滾輪時，wheelDelta是-120的倍數
-
觸控裝置
- 不支援dbclick事件，雙擊瀏覽器視窗會放大畫面，而且沒有辦法改變該行為
- 輕擊可單擊元素會觸發mousemove事件，如果此操作會導致內容變化，將不再有其他事件發生，如果螢幕沒有因此變化，那麼會一次發生mousedown、mouseup和click事件，輕擊不可單擊的元素不會觸發任何事件，可單擊的元素指的是那些單擊可產生預設操作得元素，或者那些已經被指定了onclick事件處理程式的元素
- mousemove事件也會觸發mouseover和mouseout事件
- 兩個手指放在螢幕上且頁面隨手指移動而滾動時會觸發mousewheel和scroll事件
鍵盤與文字事件
-
3個鍵盤事件
- keydown，當用戶按下鍵盤上的任意鍵時觸發，而且如果按住不放的話，會重複觸發此事件
- keypress，當用戶按下鍵盤上的字元鍵時觸發，而且如果按住不放的話，會重複觸發此事件
- keyup，當用戶釋放鍵盤上的鍵時觸發
- 鍵碼
-
textInput事件，event物件上一個屬性，叫inputMethod，表示把文字輸入到文字框中的方式
- 0，表示瀏覽器不確定是怎麼輸入的
- 1，表示是使用鍵盤輸入的
- 2，表示文字是貼上進來的
- 3，表示文字是拖放進來的
- 4，表示文字是使用IME輸入的
- 5，表示文字是通過在表單中選擇某一項輸入的
- 6，表示文字是通過手寫輸入的
- 7，表示文字是通過語音輸入的
- 8，表示文字是通過幾種方法組合輸入的
- 9，表示文字是通過指令碼輸入的
複合事件
-
用於處理IME的輸入序列
- compositionstart，在IME的文字複合系統開啟時觸發，表示要開始輸入了
- compositionupdate，在向輸入欄位中插入新字元時觸發
- compositionend，在IME的文字複合系統關閉時觸發，表示返回正常鍵盤輸入狀態
-
複合事件與文字事件在很多方面都很相似，在觸發複合事件時，目標是接收文字的輸入欄位，但它比文字事件的事件物件多一個屬性data
- 如果compositionstart事件發生時訪問，包含正在編輯的文字
- 如果在compositionupdate事件發生時訪問，包含正插入的新字元
- 如果在compositionend事件發生時訪問，包含此次輸入會話中插入的所有字元
變動事件
-
在DOM中的某一部分發生變化時給出提示，變動事件是為XML或HTML DOM設計的，並不特定某種語言
- DOMSubtreeModified，在DOM結構中發生任何變化時觸發，這個事件在其他任何事件觸發後都會觸發
- DOMNodeInserted，在一個節點作為子節點被插入到另一個節點中時觸發
- DOMNodeRemoved，在節點從其父元素中被移除時觸發
- DOMNodeInsertedIntoDocument，在一個節點被直接插入文件或通過子樹間接插入文件之後觸發
- DOMNodeRemovedFromDocument，在一個節點被直接從文件中移除或通過子樹間接從文件中移除之前觸發
- DOMAttrModified，在特性被修改之後觸發
- DOMCharacterDataModified，在文字節點的值發生變化時觸發
-
刪除節點
- 在使用removeChild()或replaceChild()從DOM中刪除節點時，首先會觸發DOMNodeRemoved事件
- 緊隨其後觸發的是DOMSubtreeModified事件，這個事件的目標是被移除節點的父節點，此時的event物件也不會提供與事件相關的其他資訊
-
插入節點
- 在使用appendChild()、replaceChild()或insertBefore()向DOM中插入節點時，首先會觸發DOMNodeInserted事件，這個事件的目標是被插入的節點
- 緊接著會在新插入的節點上面觸發DOMNodeInsertedIntDocument事件，這個事件不冒泡，因此必須在插入節點之前為它新增這個事件處理程式
- 最後一個觸發的是DOMSubtreeModified，觸發於新插入節點的父節點
HTML5事件
- contextmenu事件，用以表示何時應該顯示上下文選單，以便開發人員取消預設的上下文選單而提供自定義的選單
- beforeunload事件，為了讓開發人員有可能在頁面解除安裝前阻止這一個操作，這個事件會在瀏覽器解除安裝頁面之前觸發，可以通過它來取消解除安裝並繼續使用原有頁面
-
readystatechange事件，目的是提供與文件或元素載入狀態有關的資訊，但這個事件的行為有時候也難預料，支援readystatechange事件的每個物件都有一個readyState屬性
- uninitialized，物件存在但尚未初始化
- loading，物件正在載入資料
- loaded，物件載入資料完成
- interactive，可以操作物件了，但還沒有完全載入
- complete，物件已經載入完畢
- pageshow事件，在頁面顯示時觸發，無論該頁面是否來自bfcache，在重新載入的頁面中，pageshow會在load事件觸發後觸發，而對於bfcache中的頁面，pageshow會在頁面狀態完全恢復的那一刻觸發
- pagehide事件，在瀏覽器解除安裝頁面的時候觸發，而且是在unload事件之前觸發，與pageshow事件一樣，pagehide在document上面觸發，但其事件處理程式必須要新增到window物件
- hashchange事件，在URL引數列表發生變化時，通知開發人員。之所以新增這個事件，是因為在Ajax應用中，開發人員經常要利用URL引數列表來儲存狀態或導航資訊
裝置事件
- orientationchange事件，以便開發人員能夠確定使用者何時將裝置由橫向檢視模式切換為縱向檢視模式。0表示肖像模式，90表示向左旋轉的橫向模式，-90表示向右旋轉的橫向模式
-
MozOrientation事件，當裝置的加速計檢測到裝置方向改變時，就會觸發這個事件
- event物件包含三個屬性，x、y、z，這幾個屬性的值都介於1到-1之間，表示不同座標軸上的方向。在靜止狀態下，x值為0，y值為0，z值為1。如果裝置向右傾斜，x值會減小；反之向左傾斜，x值會增大。類似的，如果裝置向遠離使用者的方向傾斜，y值會減小，向接近使用者的方向傾斜，y值會增大。z軸檢測垂直加速度，1表示靜止不動，在裝置移動時，值會減小，失重狀態下值為0
- deviceorientation事件與Mozorientation事件類似，它也是在加速計檢測到裝置方向變化時，在window物件上觸發，而且具有與MozOrientation事件相同的支援限制。不過deviceorientation事件的意圖是告訴開發人員裝置在空間中朝向哪兒，而不是如何移動
-
觸發deviceorientation事件時，事件物件中包含著每個軸相對於裝置靜止狀態下發生變化的資訊，包含5個屬性
- alpha，在圍繞z軸旋轉時(左右旋轉)，y軸的度數差，是一個介於0到360之間的浮點數
- beta，在圍繞x軸旋轉時(前後旋轉)，z軸的度數差，是一個介於-180到180度之間的浮點數
- gamma，在圍繞y軸旋轉時(扭轉裝置)，z軸的度數差，是一個介於-90到90之間的浮點數
- absolute，布林值，表示裝置是否返回一個絕對值
- compassCalibrated，布林值，表示裝置的指南針是否校準過
-
devicemotion事件，告訴開發人員裝置什麼時候移動，而不僅僅是裝置方向如何改變
- acceleration，一個包含x、y和z屬性的物件，在不考慮重力的情況下，說明每個方向上的加速度
- accelerationIncludingGravuty，一個包含x、y和z屬性的物件，在考慮z軸自然重力加速度的情況下，說明每個方向上的加速度
- interval，以毫秒錶示的時間值，必須在另一個devicemotion事件觸發前傳入，這個值在每個事件中應該是一個常量
- rotationRate，一個包含表示方向的alpha、beta和gamma屬性的物件
觸控與手勢事件
-
觸控事件
- touchstart，當手指觸控式螢幕幕時觸發；即使已經有一個手指放在了螢幕上也會觸發。
- touchmove，當手指在螢幕上滑動時連續地觸發。在這個事件發生期間，呼叫 preventDefault()可以阻止滾動。
- touchend，當手指從螢幕上移開時觸發。
- touchcancel ：當系統停止跟蹤觸控時觸發。關於此事件的確切觸發時間，文件中沒有明確說明。
-
除了常見的DOM屬性之外，觸控事件還包含三個用於跟蹤觸控的屬性
- touches，表示當前跟蹤的觸控操作的 Touch 物件的陣列。
- targetTouchs，特定於事件目標的 Touch 物件的陣列。
- changeTouches，表示自上次觸控以來發生了什麼改變的 Touch 物件的陣列。
-
每個Touch物件包含下列屬性
- clientX，觸控目標在視口中的 x 座標。
- clientY，觸控目標在視口中的 y 座標。
- identifier，標識觸控的唯一 ID。
- pageX，觸控目標在頁面中的 x 座標。
- pageY，觸控目標在頁面中的 y 座標。
- screenX，觸控目標在螢幕中的 x 座標。
- screenY，觸控目標在螢幕中的 y 座標。
- target，觸控的 DOM 節點目標。
-
手勢事件
- gesturestart，當一個手指已經按在螢幕上而另一個手指又觸控式螢幕幕時觸發。
- gesturechange，當觸控式螢幕幕的任何一個手指的位置發生變化時觸發。
- gestureend，當任何一個手指從螢幕上面移開時觸發。
記憶體和效能
事件委託
-
對"事件處理程式過多"問題的解決方案，就是事件委託。事件委託利用了事件冒泡，只指定一個事件處理程式，就可以管理某一型別的所有事件
var item1 = document.getElementById("goSomewhere"); var item2 = document.getElementById("doSomething"); var item3 = document.getElementById("sayHi"); EventUtil.addHandler(item1, "click", function(event){ location.href = "http://www.wrox.com"; }); EventUtil.addHandler(item2, "click", function(event){ document.title = "I changed the document's title"; }); EventUtil.addHandler(item3, "click", function(event){ alert("hi"); });
模擬事件
DOM中的事件模擬
-
可以在document物件上使用createEvent()方法建立event物件，這個方法就是接收一個引數，即表示要建立的事件型別的字串
- UIEvents，一般化的UI事件，滑鼠事件和鍵盤事件都繼承自UI事件，DOM3級中是UIEvent
- MouseEvents，一般化的滑鼠事件，DOM3級中是MouseEvent
- MutationEvents，一般化的DOM變動事件，DOM3級中是MutationEvent
- HTMLEvents，一般化的HTML事件，沒有對應的DOM3級事件
-
模擬滑鼠事件
- type(字串)，表示要觸發的事件型別，例如 "click" 。
- bubbles(布林值)，表示事件是否應該冒泡。為精確地模擬滑鼠事件，應該把這個引數設定為true 。
- cancelable(布林值)，表示事件是否可以取消。為精確地模擬滑鼠事件，應該把這個引數設定為 true 。
- view(AbstractView)，與事件關聯的檢視。這個引數幾乎總是要設定為 document.defaultView 。
- detail(整數)，與事件有關的詳細資訊。這個值一般只有事件處理程式使用，但通常都設定為 0 。
- screenX(整數)，事件相對於螢幕的 X 座標。
- screenY(整數)，事件相對於螢幕的 Y 座標。
- clientX(整數)，事件相對於視口的 X 座標。
- clientY(整數)，事件想對於視口的 Y 座標。
- ctrlKey(布林值)，表示是否按下了 Ctrl 鍵。預設值為 false 。
- altKey(布林值)，表示是否按下了 Alt 鍵。預設值為 false 。
- shiftKey(布林值)，表示是否按下了 Shift 鍵。預設值為 false 。
- metaKey(布林值)，表示是否按下了 Meta 鍵。預設值為 false 。
- button(整數)，表示按下了哪一個滑鼠鍵。預設值為 0 。
- relatedTarget(物件)，表示與事件相關的物件。這個引數只在模擬 mouseover 或 mouseout時使用。
var btn = document.getElementById("myBtn"); //建立事件物件 var event = document.createEvent("MouseEvents"); //初始化事件物件 event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //觸發事件 btn.dispatchEvent(event); -
模擬鍵盤事件
- type(字串)，表示要觸發的事件型別，如 "keydown" 。
- bubbles(布林值)，表示事件是否應該冒泡。為精確模擬滑鼠事件，應該設定為 true 。
- cancelable(布林值)，表示事件是否可以取消。為精確模擬滑鼠事件，應該設定為 true 。
- view(AbstractView) ，與事件關聯的檢視。這個引數幾乎總是要設定document.defaultView 。
- key(布林值)，表示按下的鍵的鍵碼。
- location(整數)，表示按下了哪裡的鍵。0 表示預設的主鍵盤，1 表示左，2 表示右，3 表示數字鍵盤，4 表示移動裝置（即虛擬鍵盤），5 表示手柄。
- modifiers(字串)，空格分隔的修改鍵列表，如 "Shift" 。
- repeat(整數)，在一行中按了這個鍵多少次。
var textbox = document.getElementById("myTextbox"), event; //以 DOM3 級方式建立事件物件 if (document.implementation.hasFeature("KeyboardEvents", "3.0")){ event = document.createEvent("KeyboardEvent"); //初始化事件物件 event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0); } //觸發事件 textbox.dispatchEvent(event); -
在Firefox中，呼叫createEvent()並傳入"KeyEvents"就可以建立一個鍵盤事件，返回的事件物件會包含一個initKeyEvent()方法，接收10個引數
- type(字串)，表示要觸發的事件型別，如 "keydown" 。
- bubbles(布林值)，表示事件是否應該冒泡。為精確模擬滑鼠事件，應該設定為 true 。
- cancelable(布林值)，表示事件是否可以取消。為精確模擬滑鼠事件，應該設定為 true 。
- view(AbstractView) ，與事件關聯的檢視。這個引數幾乎總是要設定為 document.default-View 。
- ctrlKey(布林值)，表示是否按下了 Ctrl 鍵。預設值為 false 。
- altKey(布林值)，表示是否按下了 Alt 鍵。預設值為 false 。
- shiftKey(布林值)，表示是否按下了 Shift 鍵。預設值為 false 。
- metaKey(布林值)，表示是否按下了 Meta 鍵。預設值為 false 。
- keyCode(整數)，被按下或釋放的鍵的鍵碼。這個引數對 keydown 和 keyup 事件有用，預設值為 0 。
- charCode(整數)，通過按鍵生成的字元的 ASCII 編碼。這個引數對 keypress 事件有用，預設值為 0 。
//只適用於 Firefox var textbox = document.getElementById("myTextbox") // 建立事件物件 var event = document.createEvent("KeyEvents"); // 初始化事件物件 event.initKeyEvent("keypress", true, true, document.defaultView, false, false, false, false, 65, 65); //觸發事件 textbox.dispatchEvent(event); -
要建立新的自定義事件，可以呼叫createEvent("CustomEvent")，接收4個引數
- type(字串)，觸發的事件型別，例如 "keydown" 。
- bubbles(布林值)，表示事件是否應該冒泡。
- cancelable(布林值)，表示事件是否可以取消。
- detail(物件)，任意值，儲存在 event 物件的 detail 屬性中
var div = document.getElementById("myDiv"), event; EventUtil.addHandler(div, "myevent", function(event){ alert("DIV: " + event.detail); }); EventUtil.addHandler(document, "myevent", function(event){ alert("DOCUMENT: " + event.detail); }); if (document.implementation.hasFeature("CustomEvents", "3.0")){ event = document.createEvent("CustomEvent"); event.initCustomEvent("myevent", true, false, "Hello world!"); div.dispatchEvent(event); }
IE中的事件模擬
-
模擬一個按鈕觸發click事件過程
var btn = document.getElementById("myBtn"); //建立事件物件 var event = document.createEventObject(); //初始化事件物件 event.screenX = 100; event.screenY = 0; event.clientX = 0; event.clientY = 0; event.ctrlKey = false; event.altKey = false; event.shiftKey = false; event.button = 0; //觸發事件 btn.fireEvent("onclick", event); -
模擬keypress事件
var textbox = document.getElementById("myTextbox"); //建立事件物件 var event = document.createEventObject(); //初始化事件物件 event.altKey = false; event.ctrlKey = false; event.shiftKey = false; event.keyCode = 65; //觸發事件 textbox.fireEvent("onkeypress", event);