前端开发 ·

JavaScript 事件

一、基本概念

0x1 事件

1、定义
事件是可以被 JavaScript 侦测到的行为,通俗的讲就是当用户与Web页面进行某些交互时,解释器就会创建响应的event对象以描述事件信息。
2、事件句柄
事件句柄(又称事件处理函数、事件监听函数),指用于响应某个事件而调用的函数。每一个事件均对应一个事件句柄,在程序执行时,将相应的函数或语句指定给事件句柄,则在该事件发生时,浏览器便执行指定的函数或语句。

0x2 事件定义

一个事件的定义必须有三部:

  • 事件对象
  • 为事件对象绑定一个事件类型
  • 事件句柄

为特定事件定义监听函数有三种方式:
(1)、直接在HTML中定义元素的事件相关属性
缺点:违反了“ 内容与行为相分离” 的原则,应尽可能少用。

(2)、 DOM0级事件
JavaScript中为元素的事件相关属性赋值:
缺点:此语法实现了“ 内容与行为相分离” ,但元素只能绑定一个监听函数。

(3)、 DOM2级事件
高级事件处理方式,一个事件可以绑定多个监听函数
此语法可以为一个元素绑定多个监听函数,但需要注意浏览器兼容性问题
DOM2支持同一dom元素注册多个同种事件。
DOM2新增了捕获和冒泡的概念。

0x3 DOM事件流

1、添加移除事件

  • addEventListener()
  • removeEventListener()

2、IE事件流

  • attachEvent()
  • detachEvent()

事件绑定与移除的兼容性代码

3、事件周期
解释器创建一个event对象后,会按如下过程将其在HTML元素间进行传播

  • 第一阶段:事件捕获,事件对象沿DOM树向下传播
  • 第二阶段:目标触发,运行事件监听函数
  • 第三阶段:事件冒泡,事件沿DOM树向上传播

事件的冒泡处理机制

4、Event对象
- type:事件的类型;
- srcElement/target:事件源,就是发生事件的元素;
- cancelBubble:布尔属性,设为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当e.stopPropagation(););
- returnValue:布尔属性,设置为false的时候可以组织浏览器执行默认
的事件动作;(e.returnValue = false; 相当于 e.preventDefault(););

参与评论