2020-11-24

DOM事件模型

一、DOM事件流分为三个阶段

拿下面代码为例子

<div class= "xxx">
      <div class= "yyy">
              <div class="zzz" >
              </div>
      </div>
</div>

• 事件捕获：由外（xxx）向内（zzz）找监听函数
• 目标阶段：指事件响应到触发事件的最底层元素上
• 事件冒泡：由内（zzz）向外（xxx）找监听函数

W3C 事件模型/事件机制：对每个事件先捕获再冒泡

先捕获再冒泡，两个阶段都要走一遍（人为取消冒泡除外，捕获不可以取消），事件绑定API只是写明函数调用的阶段

image.png

特例：当只有一个div被监听（不考虑父子级同时监听），函数fn分别在捕获阶段和冒泡阶段监听click事件，执行顺序是先监听的先执行

二、事件绑定API

IE5*：div.attachEvent('onclick',fn)
网景：div.addEventListener('click',fn)
W3C：div.addEventListener('click',fn,bool) //bool可不写，默认为false冒泡

三、target和currentTarget区别

x.target //用户操作的元素
x.currentTarget //程序员监听的元素（this）
例：
div>span(文字)，用户点击文字
x.target  //span
x.currentTarget  //div

四、取消冒泡API

x.stopPropagation() 
一般用于封装独立属性

五、自定义事件

button1.addEventListener('click',()=>{
     const event = new CustomEvent('frank',{ //自定义事件frank
      detail:{name:'frank',age:'18'}
    })
    button1.dispatchEvent(event)  //触发事件
})
//监听frank事件
button1.addEventListener('frank',(e)=>{
    console.log(e.detail)
})