Js事件處理之“事件傳播三個階段”

一、三個階段

根據事件流類型，可以把事件傳播的整個過程分為3個階段，依次為：

1. 事件捕獲階段

   先由文檔的根節點document往事件觸發對象，從外向内捕獲事件對象

2. 目标階段（目标對象本身的事件程式）

   到達目标事件位置，觸發事件本身的程式内容；

3. 事件冒泡階段1

   再從目标事件位置往文檔的根節點方向回溯，從内向外冒泡事件對象。

二、事件傳播過程

特點：從document對象開始，最後傳回document對象結束。

本質上，事件首先向下周遊父元素，直到到達目标元素(捕獲階段)為止。

當事件到達目标時，它将在那兒觸發(目标階段)。

然後傳回鍊上(冒泡階段)，并一路調用處理程式

三、執行個體

目标元素是指觸發事件的确切位置。

例如，如果您單擊

<div>

中的

<button>

，則相應的

<button>

标記将成為目标。 該元素可以作為

event.target

進行通路，并且在事件傳播的整個階段都不會更改。

藍色箭頭代表捕獲過程，紫色箭頭代表冒泡過程：

1. （1）所有現代浏覽器都支援事件冒泡，但在具體實作中略有差别。IE5.5及更早版本中事件冒泡會跳過元素(從body直接跳到document)。IE9、Firefox、Chrome、和Safari則将事件一直冒泡到window對象。

   （2）IE9、Firefox、Chrome、Opera、和Safari都支援事件捕獲。盡管DOM标準要求事件應該從document對象開始傳播，但這些浏覽器都是從window對象開始捕獲事件的。

   （3）、由于老版本浏覽器不支援，很少有人使用事件捕獲。建議使用事件冒泡。有特殊情況再使用捕獲。 ↩︎

一、三個階段

根據事件流類型，可以把事件傳播的整個過程分為3個階段，依次為：

1. 事件捕獲階段

   先由文檔的根節點document往事件觸發對象，從外向内捕獲事件對象

2. 目标階段（目标對象本身的事件程式）

   到達目标事件位置，觸發事件本身的程式内容；

3. 事件冒泡階段1

   再從目标事件位置往文檔的根節點方向回溯，從内向外冒泡事件對象。

二、事件傳播過程

特點：從document對象開始，最後傳回document對象結束。

本質上，事件首先向下周遊父元素，直到到達目标元素(捕獲階段)為止。

當事件到達目标時，它将在那兒觸發(目标階段)。

然後傳回鍊上(冒泡階段)，并一路調用處理程式

三、執行個體

目标元素是指觸發事件的确切位置。

例如，如果您單擊

<div>

中的

<button>

，則相應的

<button>

标記将成為目标。 該元素可以作為

event.target

進行通路，并且在事件傳播的整個階段都不會更改。

藍色箭頭代表捕獲過程，紫色箭頭代表冒泡過程：

1. （1）所有現代浏覽器都支援事件冒泡，但在具體實作中略有差别。IE5.5及更早版本中事件冒泡會跳過元素(從body直接跳到document)。IE9、Firefox、Chrome、和Safari則将事件一直冒泡到window對象。

   （2）IE9、Firefox、Chrome、Opera、和Safari都支援事件捕獲。盡管DOM标準要求事件應該從document對象開始傳播，但這些浏覽器都是從window對象開始捕獲事件的。

   （3）、由于老版本浏覽器不支援，很少有人使用事件捕獲。建議使用事件冒泡。有特殊情況再使用捕獲。 ↩︎