进阶篇：事件 (12-1)

饥人谷学习进阶第 12 天

事件

某个行为或者触发

JS和HTML的交互式通过事件来实现的。JS采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。事件的绑定在执行栈中（同步），事件的触发执行在队列中（异步）。

如果JS关注特定类型事件，可以注册当这类事件发生时要调用的句柄

• 点击、鼠标移动
• 当用户点击鼠标时
• 当网页已加载时
• 当图像已加载时
• 当鼠标移动到元素上时
• 当用户触发按键时...

事件流

描述的是从页面中接收事件的顺序
三种模型：

1. 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
2. 事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反
3. DOM事件流：DOM2事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后就是冒泡阶段。

事件冒泡模型	事件捕获模型	DOM事件流
事件冒泡模型	事件捕获模型	DOM事件流

具体的元素就是最小的最直接接触事件的元素
不太具体的元素就是包含最直接（具体）元素的元素，跟最直接（具体）元素一起接触事件的元素，比如：父元素

Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡

事件处理程序

也称为事件侦听器，事件就是用户或浏览器自身执行的某种动作。比如click、load、mouseover等，都是事件类型（名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器

给元素添加事件处理程序：

• HTML内联方式
  元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个属性的值应该是可以执行的JS代码，如：

HTML事件处理程序中可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本

HTML中指定事件处理程序书写方便，但有两个缺点：

1. 存在加载顺序问题，如果事件处理程序在HTML代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，存在时间差问题；
2. 这样写HTML和JS代码紧密耦合，维护不方便。

JS指定事件处理程序：
通过JS指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。

每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如 onclick 等，将这些属性的值设置为一个函数，就可以指定事件处理程序

事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick

另一个好处：可以删除事件处理程序（把元素的 onclick 属性赋值为 null 即可）

DOM2事件处理程序：
DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

1. addEventListener
2. removeEventListener

所有的DOM节点都包含这两个方法，都接受三个参数：

1. 事件类型
2. 事件处理方法
3. 布尔参数，如果是 true 表示在捕获阶段调用事件处理程序，如果是 false ，则是在事件冒泡阶段处理（默认是 false）

好处：可以为click事件添加多个处理程序
多个事件处理程序会在用户触发事件后按照事件添加顺序依次执行

通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写