事件模型

這是一個完整的事件流： 事件捕獲----處於目標----事件冒泡

注意：事件捕獲由於瀏覽器相容問題用的比較少

事件處理程式（addEventListener）

格式為：element.addEventListener(type, handle, false);

type: 事件觸發型別，如click,keypress等等，下面我們詳細的講講事件型別！！

handle:事件處理函式，事件出發後，定義可能發生的變化！！

false: 表示事件冒泡模型，一般來說都是false。

栗子如下所示（只展示關鍵程式碼）：

var flag = false;
btn.addEventListener('click',function(){
   senction.style.backgroundColor = flag?'#ddd':'#bbb'
},false);
 

效果圖如下圖所示：

在這兩種背景顏色之間來回轉換。

事件物件

將handle事件處理函式中的function(){}適當的修改為：function（event）{conso;le.log(event)}；則將會輸出該事件的全部資訊，截圖如圖所示：

包括觸發事件時滑鼠所點選的位置，是否取消冒泡事件（cancelBubble）：這就是上面的addEventListener最後一項是false的原因了。

事件型別

事件型別整體來說可以分為三大類：

1）滑鼠類

click                        點選

mousedown            按下

mouseup                鬆開

mouseenter            划進

mouseleave           劃出

mouseover            划進

mouseout              劃出

mousemove          移動

上面兩個划進劃出，區別在於是否對子元素有影響，具體可以去百度查一查用法的差異

2）鍵盤類

keydown         按下（按所有鍵都會觸發）

keypress         按下（按字符集觸發）

keyup              鬆開

兩者設計的初衷就不同。

keypress

兩者事件物件上的 keyCode 值也不同。

keyCode是一個程式碼，與鍵盤上的一個鍵對應。在 keypress 事件中，這個 keyCode 還與 ASCII碼對應，比如keyCode 等於 105 ，就是按了 i。

最後說下，判斷一個前端專業不專業，就問下他開發介面的時候有沒有考慮過鍵盤事件。

3）UI類

load                 載入

unload             過載

resize             改變瀏覽器尺寸

scroll               使用滾動條

本部落格屬於作者原創，如需轉載請註明出處