浏览器 事件冒泡、捕获、阻止

一、冒泡型事件流

1. 事件冒泡

   事件会从 target (事件源)开始触发，然后逐级向上层元素传递，直到 window 结点

2. 挂载冒泡型事件响应

   1. 标签上用 onclick 挂载函数调用，多个函数调用可以用 ; 分隔，会按调用顺序依次执行。
   2. 脚本中用 obj.onclick = fn 挂载，会覆盖原先在标签上已挂载的所有响应。
   3. 脚本中用 obj.addEventListener(type, fn) 或 obj.addEventListener(type, fn, false)

3. 阻止事件冒泡

   1. w3c：event.stopPropagation()
   2. IE(11以下)：window.event.cancleBubble = true

4. 事件委托

   当多个子元素都需要响应某个事件时，可以利用事件冒泡机制将该事件委托到其父元素中响应，从而减少给DOM添加过多的绑定事件
   
   
   补充：多个子元素可以通过获取事件源的方法区分

   w3c：event.target
   IE：window.event.srcElement

   function bindListener(_obj, _type, _fn){
        
   	/**
   	 * @param {Node} _obj: 父元素
   	 * @param {String} _type: 事件类型
   	 * @param {Function} _fn: 事件响应 回调函数参数(event, target)
   	 */
   	_obj.addEventListener(_type, function(e){
        
   		let e = e || event || window.event;		// 兼容写法
   		let target = e.target || e.srcElement;