08-JavaScript 事件（上）

1. 注册事件（绑定事件）

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式：传统方式 和 方法监听注册方式

传统注册方式

• 利用 on 开头的事件 onclick
• <button onclick= "alert('hi!')"></button>
• btn.onclick = function() {}
• 特点：注册事件的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

• w3c 标准推荐方式
• addElementListener() 是一个方法
• IE9 之前的IE 不支持此方法， 可使用attachEvent() 代替
• 特点：同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次执行

1.2 addElementListener() 事件监听方式

eventTarget.addElementListener(type,listener[,useCapture])

eventTarget.addElementListener() 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数
该方法接收的三个参数：

• type：事件类型字符串，比如click ，mouseover，这里不需要带on
• Listener：事件处理函数，事件发生时，会调用该监听函数
• useCapture：可选参数，是一个布尔值，默认false

2. 删除事件（解绑事件）

2.1 删除事件的方式

1. 传统注册方式
eventTarget.onclick = null

2. 方法监听注册方式
eventTarget.removeEventListener(type, listener[, useCapture])

3.DOM 事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程是 DOM 事件流

DOM 事件流 分为 3 个阶段：

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

事件冒泡：IE 最早提出，事件开始由最具体的元素接收，然后逐级向上传播到 DOM 最顶层节点的过程
事件捕获：网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程

注意：

1. JS 代码中只能执行捕获或冒泡其中的一个阶段
2. onclick 和 attachEvent 只能得到冒泡阶段
3. addEventListener (type, listener[, useCapture]) 第三个参数如果是true ，表示在事件捕获阶段调用事件处理程序；如果是false （不写就是默认 false ），表示在事件冒泡阶段调用事件处理程序
4. 事件开发中很少使用事件捕获，更关注事件冒泡
5. 有些事件是没有冒泡的，如：onbulr, onfocus, onmouseenter, onmouseleave

4. 事件对象

4.1 什么是事件对象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event){})
// 这里的 event 就是事件对象，还可以写成 e 或者 evt

event 对象：代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
即事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event ，它也有很多方法和属性

如：

1. 谁绑定了这个事件
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

4.2 事件对象的使用语法

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event){})
// 这里的 event 就是事件对象，还可以写成 e 或者 evt

这个event 是形参，系统设定为事件对象，不需要传递实参过去
当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

4.3 事件对象的兼容性方案

事件对象本身的获取存在兼容问题：

1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e 就可以获取到
2. 在ie678 中，浏览器不会给方法传递参数，如果需要，可以通过window.event
   解决兼容问题：e = e || window.event

4.4 事件对象的常见属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象 标准
e.srcElement	返回触发事件的对象 非标准ie678使用
e.type	返回事件的类型 如：click mouseover 不带on
e.cancelBubble	该属性阻止冒泡 非标准 ie678使用
e.returnValue	该属性阻止默认事件（默认行为） 非标准 ie678使用 比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为） 标准 比如不让链接跳转
e.stoppropagation()	阻止冒泡 标准