基础笔记(2)——JS事件机制

昨天event的bubbles属性让我对事件有个新的认识。事件机制本身是个基础问题,但是实践发现活学活用和细节都很重要。之前打算把一些基础知识点整理出来,但是开了个头就断了。现在看来,这个想法还是很有必要的。还得在实践过程保持记录,温故知新。

事件级别

DOM0级就是在元素上用属性的方式绑定事件
DOM2级就是addEventListener和removeEventListener来处理回调方法(IE低版本用attachEvent和detachEvent)(真是对IE讨厌到极致)
DOM3级就是在2的基础上丰富了很多类型,并且可以自定义事件

分级我个人觉得也只能算理论知识,分级对实际使用影响不大。

事件阶段

DOM事件模型分为捕获和冒泡。一个事件发生后,会在子元素和父元素之间传播(propagation)。这种传播分成三个阶段。
(1)捕获阶段:事件从window对象自上而下向目标节点传播的阶段;
(2)目标阶段:真正的目标节点正在处理事件的阶段
(3)冒泡阶段:事件从目标节点自下而上向window对象传播的阶段。

    element.addEventListener(eventType, fn, useCapture);
    // element 是目标节点
    // eventType是监听的事件类型
    // fn是事件的回调函数
    // useCapture是否在捕获阶段触发,默认是在冒泡阶段触发

事件属性

currentTarget和eventPhase是变化的。以上面的代码为例:

  1. fn中获取到的currentTarget就是element
  2. eventPhase分别是1, 2, 3。1是捕获阶段,2是目标阶段, 3是冒泡阶段

bubbles为false的事件是不会向上冒泡的。常见不冒泡的事件有:

load、unload、focus、blur、change、mouseleave、mouseenter、scroll(非document触发)

事件的类型、方法、其他非通用属性可以去W3school看下: https://www.w3school.com.cn/jsref/dom_obj_event.asp

事件委托(事件代理)

事件委托就是把子元素的事件绑在父元素上,当冒泡到父元素时,父元素通过判断targetTarget来处理对应子元素的事件回调。
具体实现代码以后来补。
不冒泡的事件就没法通过事件委托来处理了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注