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