1. 事件基本概念

事件是指在文檔或者浏覽器中發生的一些特定互動瞬間，比如打開某一個網頁，浏覽器加載完成後會觸發 load 事件，當滑鼠懸浮于某一個元素上時會觸發 hover 事件，當滑鼠點選某一個元素時會觸發 click 事件等等。

事件處理就是當事件被觸發後，浏覽器響應這個事件的行為，而這個行為所對應的代碼即為事件處理程式。

2. 事件操作：監聽與移除監聽

2.1 監聽事件

浏覽器會根據一些事件作出相對應的事件處理，事件處理的前提是需要監聽事件，監聽事件的方法主要有以下三種：

2.1.1 HTML 内聯屬性

即在 HTML 元素裡直接填寫與事件相關的屬性，屬性值為事件處理程式。示例如下：

<button onclick="console.log('You clicked me!');"></button>

onclick 對應着 click 事件，是以當按鈕被點選後，便會執行事件處理程式，即控制台輸出 "You clicked me!"。

不過我們需要指出的是，這種方式将 HTML 代碼與 JavaScript 代碼耦合在一起，不利于代碼的維護，是以應該盡量避免使用這樣的方式。

2.1.2 DOM 屬性綁定

通過直接設定某個 DOM 節點的屬性來指定事件和事件處理程式，上代碼：

const btn = document.getElementById("btn");
btn.onclick = function(e) {
    console.log("You clicked me!");
};

上面示例中，首先獲得 btn 這個對象，通過給這個對象添加 onclick 屬性的方式來監聽 click 事件，這個屬性值對應的就是事件處理程式。這段程式也被稱作 DOM 0 級事件處理程式。

2.1.3 事件監聽函數

标準的事件監聽函數如下：

const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
    console.log("You clicked me!");
}, false);

上面的示例表示先獲得表示節點的 btn 對象，然後在這個對象上面添加了一個事件監聽器，當監聽到 click 事件發生時，則調用回調函數，即在控制台輸出 "You clicked me!"。addEventListener 函數包含了三個參數 false，第三個參數的含義在後面的事件觸發三個階段之後再講解。這段程式也被稱作 DOM 2 級事件處理程式。IE9+、FireFox、Safari、Chrome 和 Opera 都是支援 DOM 2 級事件處理程式的，對于 IE8 及以下版本，則用 attacEvent() 函數綁定事件。

是以我們可以寫一段具有相容性的代碼：

function addEventHandler(obj, eventName, handler) {
    if (document.addEventListener) {
        obj.addEventListener(eventName, handler, false);
    }
    else if (document.attachEvent) {
        obj.attachEvent("on" + eventName, handler);
    }    
    else {
        obj["on" + eventName] = handler;
    }
}

2.2 移除事件監聽

在為某個元素綁定了一個事件後，如果想接觸綁定，則需要用到 removeEventListener 方法。看如下例子：

const handler = function() {
    // handler logic
}
const btn = document.getElementById("btn");

btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

需要注意的是，綁定事件的回調函數不能是匿名函數，必須是一個已經被聲明的函數，因為解除事件綁定時需要傳遞這個回調函數的引用。

同樣，IE8 及以下版本也不支援上面的方法，而是用 detachEvent 代替。

const handler = function() {
    // handler logic
}
const btn = document.getElementById("btn");

btn.attachEvent("onclick", handler);
btn.detachEvent("onclick", handler);

同樣，可以寫一段具有相容性的删除事件函數：

function removeEventHandler(obj, eventName, handler) {
    if (document.removeEventListener) {
        obj.removeEventListener(eventName, handler, false);
    }
    else if (document.detachEvent) {
        obj.detachEvent("on" + eventName, handler);
    }
    else {
        obj["on" + eventName] = null;
    }
}

3. 事件觸發過程

事件流描述了頁面接收事件的順序。現代浏覽器（指 IE6-IE8 除外的浏覽器，包括 IE9+、FireFox、Safari、Chrome 和 Opera 等）事件流包含三個過程，分别是捕獲階段、目标階段和冒泡階段，下圖形象地說明這個過程：

下面就詳細地講解這三個過程。

3.1 捕獲階段

當我們對 DOM 元素進行操作時，比如滑鼠點選、懸浮等，就會有一個事件傳輸到這個 DOM 元素，這個事件從 Window 開始，依次經過 docuemnt、html、body，再不斷經過子節點直到到達目标元素，從 Window 到達目标元素父節點的過程稱為捕獲階段，注意此時還未到達目标節點。

3.2 目标階段

捕獲階段結束時，事件到達了目标節點的父節點，最終到達目标節點，并在目标節點上觸發了這個事件，這就是目标階段。

需要注意的是，事件觸發的目标節點為最底層的節點。比如下面的例子：

<div>
    <p>你猜，目标在這裡還是<span>那裡</span>。</p>
</div>

當我們點選“那裡”的時候，目标節點是<span></span>，點選“這裡”的時候，目标節點是<p></p>，而當我們點選<p></p>區域之外，<div></div>區域之内時，目标節點就是<div></div>。

3.3 冒泡階段

當事件到達目标節點之後，就會沿着原路傳回，這個過程有點類似水泡從水底浮出水面的過程，是以稱這個過程為冒泡階段。

針對這個過程，wilsonpage 做了一個 DEMO，可以非常直覺地檢視這個過程。

現在再看 addEventListener(eventName, handler, useCapture) 函數。第三個參數是 useCapture，代表是否在捕獲階段進行事件處理，如果是 false，則在冒泡階段進行事件處理，如果是 true，在捕獲階段進行事件處理，預設是 false。這麼設計的主要原因是當年微軟和 netscape 之間的浏覽器戰争打得火熱，netscape 主張捕獲方式，微軟主張冒泡方式，W3C 采用了折中的方式，即先捕獲再冒泡。

4、事件委托

上面我們講了事件的冒泡機制，我們可以利用這一特性來提高頁面性能，事件委托便事件冒泡是最典型的應用之一。

何謂“委托”？在現實中，當我們不想做某件事時，便“委托”給他人，讓他人代為完成。JavaScript 中，事件的委托表示給元素的父級或者祖級，甚至頁面，由他們來綁定事件，然後利用事件冒泡的基本原理，通過事件目标對象進行檢測，然後執行相關操作。看下面例子：

// HTML
<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

// JavaScript
var list = document.getElementById("list");
list.addEventListener("click", function(e) {
    console.log(e.target);
});

上面的例子中，5 個清單項的點選事件均委托給了父元素 <ul id="list"></ul>。

先看看事件委托的可行性。有人會問，當事件不是加在某個元素上的，如何在這個元素上觸發事件呢？我們就是利用事件冒泡的機制，事件流到達目标元素後會向上冒泡，此時父元素接收到事件流便會執行事件執行程式。有人又會問，被委托的父元素下面如果有很多子元素，怎麼知道事件流來自于哪個子元素呢？這個我們可以從事件對象中的 target 屬性獲得。事件對象下面會詳細講解。

我們再來看看為什麼需要事件委托。

減少事件綁定。上面的例子中，也可以分别給每個清單項綁定事件，但利用事件委托的方式不僅省去了一一綁定的麻煩，也提升了網頁的性能，因為每綁定一個事件便會增加記憶體使用。
可以動态監聽綁定。上面的例子中，我們對 5 個清單項進行了事件監聽，當删除一個清單項時不需要單獨删除這個清單項所綁定的事件，而增加一個清單項時也不需要單獨為新增項綁定事件。

看了上面的例子和解釋，我們可以看出事件委托的核心就是監聽一個 DOM 中更高層、更不具體的元素，等到事件冒泡到這個不具體元素時，通過 event 對象的 target 屬性來擷取觸發事件的具體元素。

5、阻止事件冒泡

事件委托是事件冒泡的一個應用，但有時候我們并不希望事件冒泡。比如下面的例子：

const ele = document.getElementById("ele");
ele.addEventListener("click", function() {
    console.log("ele-click");
}, false);

document.addEventListener("click", function() {
    console.log("document-click");
}, false);

我們本意是當點選 ele 元素區域時顯示 "ele-click"，點選其他區域時顯示 "document-click"。但是我們發現點選 ele 元素區域時會依次顯示 "ele-click" "document-click"。那是因為綁定在 ele 上的事件冒泡到了 document 上。想要解決這個問題，隻需要加一行代碼：

const ele = document.getElementById("ele");
ele.addEventListener("click", function(e) {
    console.log("ele-click");
    e.stopPropagation(); // 阻止事件冒泡
}, false);

document.addEventListener("click", function(e) {
    console.log("document-click");
}, false);

我們還能用 e.cancelBubble = true 來替代 e.stopPropagation()。網上的說法是 cancelBubble 僅僅适用于 IE，而stopPropagation 适用于其他浏覽器。但根據我實驗的結果，現代浏覽器（IE9 及以上、Chrome、FF 等）均同時支援這兩種寫法。為了保險起見，我們可以采用以下代碼：

function preventBubble(e) {
    if (!e) {
        const e = window.event;
    }
    e.cancelBubble = true;
    if (e.stopPropagation) {
        e.stopPropagation();
    }
}

6、event 對象

Event 對象代表事件的狀态，比如事件在其中發生的元素、鍵盤按鍵的狀态、滑鼠的位置、滑鼠按鈕的狀态。當一個事件被觸發的時候，就會建立一個事件對象。

我們用下面的代碼列印出事件對象：

<div id="list">
    <li>Item 1</li>
    <li>Item 2</li>
</div>
<script>
    const list = document.getElementById("list");
    list.addEventListener("click", function(e) {
        console.log(e);
    });
</script>

chrome 49 的運作結果如下：

下面介紹一些比較常用的屬性和方法。

target、 srcElement、 currentTarget 和 relatedTarget、fromElement、 toElement

target 與 srcElement 完全相同；
target 指觸發事件的元素， currentTarget 指事件所綁定的元素；
relatedTarget：與事件的目标節點相關的節點。對于 mouseover 事件來說，該屬性是滑鼠指針移到目标節點上時所離開的那個節點。對于 mouseout 事件來說，該屬性是離開目标時，滑鼠指針進入的節點。對于其他類型的事件來說，這個屬性沒有用；
fromElement 和 toElement 僅僅對于 mouseover 和 mouseout 事件有效。

以上面的例子說明，當點選 <li>Item 1</li> 時，target 就是 <li>Item 1</li> 元素，而 currentTarget 是 <div id="list"></div>。

clientX/Y、 screenX/Y、 pageX/Y、 offsetX/Y

上圖：

offsetX/Y：點選位置相對于所處元素左上角的位置；
clientX/Y：點選位置相對于浏覽器内容區域左上角的位置；
screenX/Y：點選位置相對于螢幕左上角的位置；
pageX/Y：點選位置相對整張頁面左上角的位置；
pageX/Y 與 clientX/Y 一般情況下會相同，隻有出現滾動條時才不一樣。

altKey、 ctrlKey、 shiftKey

altKey：傳回當事件被觸發時，"ALT" 是否被按下；
ctrlKey：傳回當事件被觸發時，"CTRL" 鍵是否被按下；
shiftKey：傳回當事件被觸發時，"SHIFT" 鍵是否被按下；

其他屬性

type：傳回目前 Event 對象表示的事件的名稱
bubbles：傳回布爾值，訓示事件是否是起泡事件類型；
cancelable：傳回布爾值，訓示事件是否可擁可取消的預設動作；
eventPhase：傳回事件傳播的目前階段，有三個值： Event.CAPTURING_PHASE、 Event.AT_TARGET、 Event.BUBBLING_PHASE，對應的值為 1、2、3，分别表示捕獲階段、正常事件派發和起泡階段；
path：冒泡階段經過的節點；

方法

preventDefault()：通知浏覽器不要執行與事件關聯的預設動作；
stopPropagation()：阻止冒泡；

參考及拓展閱讀：

HTML DOM Event 對象
最詳細的JavaScript和事件解讀
JavaScript Events
[解惑]JavaScript事件機制

轉自：https://zhuanlan.zhihu.com/p/23059366

JavaScript 浏覽器事件解讀

1. 事件基本概念

2. 事件操作：監聽與移除監聽

3. 事件觸發過程

4、事件委托

5、阻止事件冒泡

6、event 對象

繼續閱讀

Async、Await 實作原理Async、Await 實作原理

如何去除van-cell元件中的外邊框

css height 100% 無效

Nearth===>WEB前端--第一課/html5新增标簽

webstorm 快速搭建react項目前端新手如何安裝webstorm ，初步搭建react項目

css多行文本溢出省略号顯示

表格元件列屬性formatter和styler使用方法

jsp--1.配置

【轉載】inline-block，block以及inline元素

Vue學習之Vue結合 ElementUI 元件庫搭建Web工程項目

vue-ant-design 在ie的相容問題

最近使用過的釋出訂閱模式

京東cssreset樣式小總結

表格下拉框選擇，關聯表格行的關聯顯示和隐藏，tr行的顯示和隐藏

css中display屬性inline,block,inline-block詳解

html中修改超連結a标簽的樣式修改a标簽的預設樣式