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

电玩女神 2022-11-21 11:42 236阅读 0赞

### 一、冒泡型事件流 ###

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;	// 兼容写法
        		_fn(e, target);
        	})
        }

### 二、捕获型事件流 ###

1.  事件捕获
    
    > 事件会从 `window` 结点开始触发，并逐级向下层传递，直到 `target` (事件源)结点
2.  挂载捕获型事件响应
    
    > 脚本中 `obj.addEventListener(obj, fn, true)` 最后一个参数 `capture=true` 表明是捕获模式
3.  阻止事件捕获
    
    > 1.  w3c：`event.stopPropagation()`
    > 2.  IE(11以下)：`window.event.cancleBubble = true`

### 三、标准事件流 ###

1.  标准事件流
    
    > 1.  事件捕获阶段
    > 2.  目标阶段
    > 3.  事件冒泡阶段  
    >     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70_pic_center]
2.  监听函数执行顺序
    
    > 1.  事件捕获阶段：从 `window` 开始执行响应
    > 2.  目标阶段：按照函数挂载到监听器的顺序依次执行（元素标签上的 `onclick` 挂载的函数会在页面解析标签时挂载；脚本中的`onclick`, `addEventListener` 则需要等到页面解析完毕再挂载，挂载顺序与代码先后顺序相同）
    > 3.  事件冒泡阶段：从 `target` 开始执行响应
    
        <!DOCTYPE html>
        <html>
        
          <head>
            <link rel='stylesheet' href="./test.css"/>
        
            <style> .div1{ width: 50px; height: 50px; background-color: red; } </style>
          </head>
          
          <body>
            <div class="div1" onclick="div1Click()"></div>
        
            <script> let div1 = document.querySelector('.div1'); window.addEventListener('click', () => { console.log('冒泡阶段 window') }) window.addEventListener('click', () => { console.log('捕获阶段 window') }, true) div1.addEventListener('click', () => { console.log('目标阶段 div1 capture=false') }) div1.addEventListener('click', () => { console.log('目标阶段 div1 capture=true') }, true) function div1Click(){ console.log('目标阶段 div1 div标签中onclick挂载') } /* 会覆盖原先的onclick方法，与其他目标阶段的响应函数按在<script>脚本中定义的顺序执行 */ // div1.onclick = function(){ // console.log('目标阶段 div1 script脚本中onclick挂载') // } </script>
        
          </body>
          
        </html>
    
        捕获阶段 window
        目标阶段 div1 div标签中onclick挂载
        目标阶段 div1 capture=false
        目标阶段 div1 capture=true
        冒泡阶段 window

### 四、默认事件 ###

1.  默认事件
    
    > 浏览器已经规定的某些标签在触发某个事件后的默认行为  
    > 例如：`<a>` 标签，会在点击后跳到指定页面
2.  取消默认事件
    
    > 1.  w3c：`event.preventDefault()`
    > 2.  IE(8以下)：`window.event.returnValue = false`
    > 3.  无兼容性问题：`return false` (不能在标签 `onclick` 绑定的函数上使用；不能在 `addEventListener` 中使用)  
    >     **就是一般就在脚本中使用 `obj.onclick = fn` ，在 `fn` 中使用啦**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NKMTU1MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/eef41d32acb74ddfa759d11254f30de3.png