js 入門 stopPropagation() 方法

首先了解一下Event 對象的概念。

Event 對象

1. 代表事件的狀态，比如事件在其中發生的元素、鍵盤按鍵的狀态、滑鼠的位置、滑鼠按鈕的狀态。
2. 事件通常與函數結合使用，函數不會在事件發生前被執行

事件句柄　(Event Handlers)

比如當使用者點選某個 HTML 元素時啟動一段 JavaScript

<Menu>
  <Menu.Item>                
    <a onClick={e => { e.stopPropagation(); this.add(0) }}>添加子產品</a>              </Menu.Item>              
  <Menu.Item>                
    <a onClick={e => { e.stopPropagation(); this.add(1) }}>添加用例</a>              </Menu.Item>            
</Menu>      

onClick就是一個事件，後面定義這個事件的行為

下面來看stopPropagation() 方法的定義：

1. 不再派發事件。終止事件在傳播過程的捕獲、目标處理或起泡階段進一步傳播。調用該方法後，該節點上處理該事件的處理程式将被調用，事件不再被分派到其他節點

文法（如上）：

event.stopPropagation()      

也就是說該方法會停止事件的傳播，阻止它被分派到其他Document 節點。

我用到的架構是react，在調用這個方法時componentWillReceiveProps()遇到了問題是，我不想在觸發某一個事件（比如上面代碼的onClick）後，把props的資料更新，就可以使用stopPropagation方法阻止資料的分派。

順便了解了一下其他兩個事件：

preventDefault()

event.preventDefault()      

1. 通知 Web 浏覽器不要執行與事件關聯的預設動作（如果存在這樣的動作）

例如，如果 type 屬性是 “submit”，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止送出表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那麼就沒有預設動作，或者不能阻止預設動作。無論哪種情況，調用該方法都沒有作用。

initEvent()

event.initEvent(eventType,canBubble,cancelable)      

該方法将初始化 Document.createEvent() 方法建立的合成 Event 對象的 type 屬性、bubbles 屬性和 cancelable 屬性。隻有在新建立的 Event 對象被 Document 對象或 Element 對象的 dispatchEvent() 方法分派之前，才能調用 Event.initEvent() 方法

// 建立事件.
var event = document.createEvent('Event');

// 初始化一個點選事件，可以冒泡，無法被取消
event.initEvent('click', true, false);      

event = new Event(typeArg, eventInit);      

// 建立一個支援冒泡且不能被取消的look事件

var e = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);

// 事件可以在任何元素觸發，不僅僅是document
myDiv.dispatchEvent(ev);