JavaScript 事件基礎

事件

1. DOM0級事件

經過函數賦值給事件處理程序屬性。

• 注意：this指針指向當前元素(做用域爲元素做用域)

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    console.log(this.id);//myBtn
};

2. DOM2級事件

經過addEventListener()添加的事件處理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);

3. 事件類型

• UI事件
  DOMActivate,load(全部一切加載完畢),unload,abort,error,select,resize,scroll
• 焦點事件
  blur,focus,focusin,focusout
• 鼠標和滾輪事件
  click,dblclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup
• 鍵盤和文本事件
  keydown,keypress,keyup
• 複合事件
  compositionstart(IME文本複合系統打開),~update(IME向輸入字段輸入字符),~end(IME輸入結束，返回正常狀態)
• 變更事件
  DOMSubtreeModified,DOMNodeInserted,DOMNodeRemoved,DOMNodeInsertedIntoDocument,DOMNodeRemovedFromDocument,DOMAttrModified,DOMCharacterDataModified
• HTML5事件
  Contextmenu(右鍵自定義菜單),beforeunload,DOMContentLoaded(僅DOM樹完成，無論外部資源),readystatechange(JSONP),hashchange(URL中#後變化)
• 設備事件
  orientationchange,deviceorientation
• 觸摸與手勢事件
  touchstart(單手指操做),touchmove,touchend,touchcancel,gesturestart(多手指操做),gesturechange,gestureend

全部類型參考: https://developer.mozilla.org/zh-CN/docs/Web/Events

4. 事件捕獲和事件冒泡

DOM2級事件流三個階段：

1. 事件捕獲階段
2. 目標階段
3. 事件冒泡階段

5. 事件對象event

當事件處理程序被觸發時，系統傳入的對象參數。
不一樣的事件具備一些不一樣的事件對象屬性，但都會具備圖中的：

6. 事件委託

經過事件冒泡和事件對象能夠獲取到觸發該事件的元素屬性，在最頂層定義DOM2級事件處理程序，這就是事件委託。

7. 事件模擬

經過createEvent()方法建立event對象，經過dispatchEvent()方法將事件發送給瀏覽器。