DOM事件模型及事件委托

·  阅读 252

1、DOM事件模型

提问:点击hello时,最先调用哪一个函数?

<div class=yeye>
  <div class=baba>
    <div class=erzi>
    hello
    </div>
  </div>
</div>
给3个div分别添加事件监听fnYe/fnBa/fnEr
复制代码
  • 如果按照从内向外顺序调用函数,叫做事件冒泡
  • 如果按照从外向内顺序调用函数,叫做事件捕获

2002年,W3C发布标准,规定浏览器应同时支持两种调用顺序,首先按照从外向内顺序,然后按照从内向外的顺序,有监听函数就调用,并提供事件信息,没有就跳过。 一个事件发生后,会在子元素和父元素之间传播

事件传播机制

事件的传播机制:捕获阶段-目标阶段-冒泡阶段

window ->document ->HTML ->body ->outer ->inner ->center

当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,如果父级没有绑定事件函数,那么就算传递了也不会有什么表现。

截屏2021-12-02 下午4.11.13.png

绑定事件API

addEventListener

div1.addEventListener('click',fn,bool)
.stopPropagation //阻止事件冒泡
复制代码

DOM0

绑定的方法都是在目标或者冒泡阶段执行

如果bool值不传或者为falsy,fn会在冒泡阶段执行

DOM2

可以控制在捕获阶段执行

如果bool值为true,fn会在捕获阶段执行

一个特例

只有一个div被监听(不考虑父子同时被监听),用户点击的元素就是开发者监听的

div.addEventListener('click',f1)
div.addEventListner('click',f2,true)
复制代码

此时f1先执行,谁先监听谁执行。

事件委托

把原本需要绑定在子元素上的响应事件(click,keydown)委托给父元素,让父元素担当事件监听的职务。事件代理的原理就是DOM元素的事件冒泡。

  • 优点
  1. 省监听数(内存):大量节省内存占用
<ul id="list">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 ...
 <li>itemx</li>
</ul>
复制代码

可以在ul上代理所有的click事件

  1. 可以动态监听元素:实现新增子对象时无需再次对其绑定

以上例子中,增加或减少item,都不影响点击被监听。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改