DOM事件相关

123 阅读2分钟

什么是事件委托?

事件委托也称之为事件代理,“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务。由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。

举例子: 比如一个宿舍的同学的快递到了,一种方法是他们一个个去领取,还一种方法是同学们委托宿舍长去领取然后根据收件人一一发给同学;这里取快递就是事件,每个同学指的是需要响应的事件DOM元素,同一去领快递的宿舍长就是代理元素,所以真正绑定事件的是这个元素(宿舍长),按照收件人分发快递的过程就是事件执行中,需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个

一个事件触发后,会在子元素和父元素之间传播,传播分成三个阶段:

  1. (捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”,捕获阶段不会响应任何事件;
  2. 目标阶段:在目标节点上触发,称为“目标阶段”
  3. 冒泡阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。

事件委托的优点

1.可以大量节省内存占用,减少事件注册。比如给100个按钮添加点击事件,只要监听这100个按钮的祖先,等冒泡的时候判断target是不是这个100按钮中的一个

2.可以动态绑定事件,当我们通过AJAX或者用户操作动态的增加或删除列表li元素,这样每一次改变的时候都需要重新给新增的元素绑定事件,给即将删去的元素解绑事件;使用事件委托就没有这种麻烦了,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的;所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

怎么阻止默认动作?

用preventDefault()可以阻止默认动作

怎么阻止事件冒泡

用stopPropagation()可以阻止事件冒泡