浏览器事件机制

概述

浏览器事件传播存在三个阶段:捕获阶段,目标阶段,冒泡阶段

  • 捕获阶段:从window对象派发到事件目标的父级的过程
  • 目标阶段:目标被找到
  • 冒泡阶段:从目标父级到window对象
    在任何阶段调用 stopPropagation 都将终止本次事件的传播。
    查看e.path可以查看dom链路
事件传播

代码实验

dom以及style如下

<style>
    #root{
        width: 100px;
        height: 100px;
        background: red;
    }
    #parent{
        width: 60px;
        height: 60px;
        background: yellow;
    }
    #child{
        width: 30px;
        height: 30px;
        background: blue;
    }
</style>

<div id="root">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>
三层嵌套.png

如上所述,我们嵌套了三层结构,root,parent,child,下面我们给每一层绑定捕获和冒泡的点击事件

        var getDom = function(id){
            return document.getElementById(id)
        }
        var root = getDom('root')
        var parent = getDom('parent')
        var child = getDom('child')
        root.addEventListener('click', function(e){
            console.log('root---捕获阶段')
        }, true)
        parent.addEventListener('click', function(e){
            console.log('parent---捕获阶段')
        }, true)
        child.addEventListener('click', function(e){
            console.log('child---捕获阶段')
        }, true)
        root.addEventListener('click', function(e){
            console.log('root---冒泡阶段')
        }, false)
        parent.addEventListener('click', function(e){
            console.log('parent---冒泡阶段')
        }, false)
        child.addEventListener('click', function(e){
            console.log('child---冒泡阶段')
        }, false)

实验一:验证捕获阶段和冒泡阶段的执行顺序

点击红区区域(target:root层)

root事件.png

点击黄色区域(target:parent层)

parent事件.png

点击蓝色区域(target:child层)

child事件.png

实验二:在各个流程进行打断

a. 仅在root层捕获阶段停止捕获,点击root层,root层的事件经历捕获阶段,目标阶段,冒泡阶段

root.addEventListener('click', function(e){
  e.stopPropagation()
  console.log('root---捕获阶段')
}, true)
事件流程完成.png

b.仅在root层捕获阶段停止捕获,点击child层,会在root层结束捕获,并不再向下传播,整个事件流终止


root层捕获阶段停止捕获.png

c.仅在child层冒泡阶段停止冒泡,点击child层,会在child层结束冒泡,并不再向上传播,整个事件流终止


child层冒泡阶段停止冒泡.png

其他

addEventListener可以再一个dom上绑定多个元素,而on-event只能绑定一次,因为on-event只是一个属性如下代码,onclick将被覆盖

child.setAttribute('onclick', "alert('child-first')");
child.onclick = function(){
  console.log('child---click')
}
//执行child---click
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。