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

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

在編程時系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生的事情.
系統(tǒng)通過它來告訴編程者,在編程者愿意的情況下,編程者一某種方式對它做出回應(yīng).

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);

元素屬性

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

行內(nèi)事件

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

注冊事件監(jiān)聽

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

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

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

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屬性始終是事件剛剛發(fā)生的元素的引用

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

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

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

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

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!";
  }
}

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

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

如:鼠標放到li上對應(yīng)的li背景變灰

    
item1
    
item2
    
item3
    
item4
    
item5
    
item6

利用事件冒泡實現(xiàn)

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

給所有l(wèi)i都綁上事件

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

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

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

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

(1). 創(chuàng)造

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

(2) 初始化

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

(3). 觸發(fā)

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

監(jiān)聽方法

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");

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

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

triggerHandler("lickCustomize");

DOM自定義事件優(yōu)勢與劣勢：

(1)、優(yōu)勢：

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

(2)、劣勢

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