摘要：支持三個參數分別表示事件名稱，是否可以冒泡，是否阻止事件的默認操作觸發參數表示事件對象，是方法返回的創建的對象監聽方法自定義事件常用模擬模擬方法操作或者自定義事件我的自定義事件。

事件這塊知識點雖然是老生長談的,但對于我來說多多整理,多多感悟,溫故知新,每次看看這塊都有不同的收獲.(在這里我不會長篇大論,只會挑重點;具體的小伙伴們自行查找)

在編程時系統內發生的動作或者發生的事情.
系統通過它來告訴編程者,在編程者愿意的情況下,編程者一某種方式對它做出回應.

var btn = document.querySelector("button");

btn.onclick = function() {
  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
}

或者

var btn = document.querySelector("button");

function bgChange() {
  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange

Press me

function bgChange() {
  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
}

或者

Press me

addEventListener()和removeEventListener();

btn.addEventListener("click", function() {
  var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
  document.body.style.backgroundColor = rndCol;
});

或者

btn.removeEventListener("click", bgChange);

元素屬性

優:
     1. 兼容性好
     2. 行為的分離
     3.便于操作當事對象，因為function是作為on***的屬性出現的，可直接用this引用當事對象
缺: 
     1. 給同一個監聽器注冊多個處理器,后面的會覆蓋前面
     btn.onclick=function(){alert("a")};
     btn.onclick=function(){alert("b")};

行內事件

優:
     1. 兼容性好,是最早的事件處理方法
     2. 方便快捷
缺: 
     1. 代碼雜糅
     2. 難以管理和效率低下,一個按鈕看起來還好，但是如果有一百個按鈕呢？得在文件中加上100個屬性
     3. 文檔很難解析

注冊事件監聽

優:
     1. 它允許為事件添加多個多帶帶的處理程序。這對于DHTML庫或Mozilla擴展尤其有用，即使使用其他庫/擴展也需要很好的工作
     2. 它可以讓你更好地控制階段，當聽者被激活（捕獲與冒泡）
     3. 它適用于任何DOM元素，而不僅僅是HTML元素
     4. 行為的分離 
缺:
    兼容性(不過網上有很多成熟的hack);

具體請看event詳解-https://developer.mozilla.org

在觸發DOM上的某個事件時，會在事件處理程序函數中會產生一個事件對象event，這個對象中包含著所有與事件有關的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關的信息.

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
    alert(event.type); //"click"
}
btn.addEventListener("click", function(event) {
    alert(event.type); //"click"
}, false);

事件對象event的target屬性始終是事件剛剛發生的元素的引用

例如，你可能有一組16塊方格，當它們被點擊時就會消失。用e.target總是能準確選擇當前操作的東西（方格）并執行操作讓它消失，而不是必須以更困難的方式選擇它.

var divs = document.querySelectorAll("div");

for (var i = 0; i < divs.length; i++) {
  divs[i].onclick = function(e) {
    e.target.style.backgroundColor = bgChange();
  }
}

有時，你會遇到一些情況，你希望事件不執行它的默認行為例如自定義注冊表單

var form = document.querySelector("form");
var fname = document.getElementById("fname");
var lname = document.getElementById("lname");
var submit = document.getElementById("submit");
var para = document.querySelector("p");
form.onsubmit = function(e) {
  if (fname.value === "" || lname.value === "") {
    e.preventDefault();
    para.textContent = "You need to fill in both names!";
  }
}

描述事件觸發時序問題的術語。
事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。
事件冒泡是自下而上的去觸發事件。
綁定事件方法的第三個參數，就是控制事件觸發順序是否為事件捕獲。true,事件捕獲；false,事件冒泡。默認false,即事件冒泡

冒泡還允許我們利用事件委托——這個概念依賴于這樣一個事實,如果你想要在大量子元素中單擊任何一個都可以運行一段代碼，您可以將事件監聽器設置在其父節點上，并將事件監聽器氣泡的影響設置為每個子節點，而不是每個子節點多帶帶設置事件監聽器

如:鼠標放到li上對應的li背景變灰

    
item1
    
item2
    
item3
    
item4
    
item5
    
item6

利用事件冒泡實現

$("ul").on("mouseover",function(e){
     $(e.target).css("background-color","#ffffd").siblings().css("background-color","white");
})

給所有li都綁上事件

$("li").on("mouseover",function(){
      $(this).css("background-color","#ffffd").siblings().css("background-color","white");
})

代碼簡潔程度上，兩者是相若仿佛的。
前者少了一個遍歷所有li節點的操作，所以在性能上肯定是更優的
如果在綁定事件完成后，頁面又動態的加載了一些元素
第二種方案，由于綁定事件的時候item7還不存在，所以為了效果，我們還要給它再綁定一次事件.

js原生自定義事件分三個階段(創造、初始化、觸發)

摘自 https://developer.mozilla.org...

(1). 創造

var event = document.createEvent(type);
type:是一個字符串，表示要創建的事件類型。事件類型可能包括是一個字符串，表示要創建的事件類型。
事件類型可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"

(2) 初始化

event.initEvent("build", true, true);
于初始化通過DocumentEvent接口創建的Event的值。支持三個參數：initEvent(eventName, canBubble,preventDefault)
分別表示事件名稱，是否可以冒泡，是否阻止事件的默認操作

(3). 觸發

elem.dispatchEvent(event);
參數event表示事件對象，是createEvent()方法返回的創建的Event對象

監聽方法

elem.addEventListener("build", function (e) {
// e.target matches elem
}, false);

jq自定義dom事件

(1). trigger()

常用模擬
  模擬方法操作
   $("#btn").trigger("click");
     或者    
   $("#btn").click();

自定義事件
   $("#btn").on("myClick", function () {
       $("#test").append("
我的自定義事件。
")；
    })；    
   $("btn").trigger("myClick");

傳遞數據
  trigger(tpye[,datea])；
  第一個參數是要觸發的事件類型，
  第二個單數是要傳遞給事件處理函數的附加數據，以數組形式傳遞。
  通常可以通過傳遞一個參數給回調函數來區別這次事件是代碼觸發的還是用戶觸發的
   $("#btn").bind("clickCustomize", function (event, message1, message2) { //獲取數據
        $("#test").append("p" + message1 + message2 + "
");
   });
   $("#btn").trigger("clickCustomize",["我的自定義","事件"]); //傳遞兩個數據
   $(“#btn”).trigger(“clickCustomize”,["我的自定義","事件"]); //傳遞兩個數據

(2). triggerHandler();(阻止默認事件)

triggerHandler("lickCustomize");

DOM自定義事件優勢與劣勢：

(1)、優勢：

1、自定義事件完全由我們控制觸發時機，這就意味著實現了一種 JavaScript 的解耦。我們可以把多個關聯但邏輯復雜的操作利用自定義事件的機制靈活地控制好
2、既然綁定也可以解綁，如果不需要了，直接移除綁定事件

(2)、劣勢

1、兼容性差，要自己hack(jq除外)