浏览器事件冒泡、捕获、阻止-蒲公英云

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

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

一、冒泡型事件流

事件冒泡

事件会从 target (事件源)开始触发，然后逐级向上层元素传递，直到 window 结点
挂载冒泡型事件响应
1. 标签上用 onclick 挂载函数调用，多个函数调用可以用 ; 分隔，会按调用顺序依次执行。
2. 脚本中用 obj.onclick = fn 挂载，会覆盖原先在标签上已挂载的所有响应。
3. 脚本中用 obj.addEventListener(type, fn) 或 obj.addEventListener(type, fn, false)
阻止事件冒泡
1. w3c：event.stopPropagation()
2. IE(11以下)：window.event.cancleBubble = true

事件委托

当多个子元素都需要响应某个事件时，可以利用事件冒泡机制将该事件委托到其父元素中响应，从而减少给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);
    })
}

二、捕获型事件流

事件捕获

事件会从 window 结点开始触发，并逐级向下层传递，直到 target (事件源)结点
挂载捕获型事件响应

脚本中 obj.addEventListener(obj, fn, true) 最后一个参数 capture=true 表明是捕获模式
阻止事件捕获
1. w3c：event.stopPropagation()
2. IE(11以下)：window.event.cancleBubble = true

三、标准事件流

标准事件流
1. 事件捕获阶段
2. 目标阶段
3. 事件冒泡阶段

监听函数执行顺序

事件捕获阶段：从 window 开始执行响应
目标阶段：按照函数挂载到监听器的顺序依次执行（元素标签上的 onclick 挂载的函数会在页面解析标签时挂载；脚本中的onclick, addEventListener 则需要等到页面解析完毕再挂载，挂载顺序与代码先后顺序相同）
事件冒泡阶段：从 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

四、默认事件

默认事件

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