第五章 事件
1. 给元素监听/绑定事件
1.1 事件的监听/绑定
// 第一种方法 把事件当做标签的属性
<button onclick="fn()"></button>
// 第二种方法， 把事件当做元素对象的方法
btnElement.onclick = fn;
// 第三种方法 事件监听方式
element.addEvenetListener('click', fn);
1.2 解除事件绑定
// 如果是第一种方式绑定 把事件当做标签属性
element.onclick = null; //覆盖
// 如果是第二种方式绑定 把事件当做元素对象方法
element.onclick = null; //覆盖
// 如果是第三种方式绑定 事件监听， 移除监听者
element.removeEventListener('click', fn);
1.3 事件监听方式的兼容性问题
//IE9+ 以及其他浏览器
addEventListener()
removeEventListener()
// IE8以及以下
attachEvent() //添加监听 事件名加on
detachEvent() //移除监听
2. 事件流
“DOM2级事件”规定的事件流包括三个阶段：
1）事件捕获阶段
2）目标阶段
3）事件冒泡阶段
首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
默认，事件是在冒泡阶段触发。
addEventListener（） 第三个参数是布尔值，默认是(false)表示冒泡阶段触发，如果设置为true，会在捕获阶段触发。
其他绑定事件的方式，无法设置在冒泡阶段触发还是捕获阶段触发，统一在冒泡阶段触发。
3 this 在事件回调函数中的指向
① 第一种绑定事件方式 事件当做标签属性
this 可以直接在属性值中使用，表示监听事件的元素对象。
② 第二种方式 把事件当做元素对象的方法
this 指向监听事件的元素对象。
③ 第三种方式 事件监听方式。
this 指向监听事件的的元素对象。
4 常用事件介绍
4.1 鼠标事件
| 事件名 | 功能介绍 |
|---|---|
| click | 单击 |
| dblclick | 双击 |
| contextmenu | 右击（菜单事件） |
| mousedown | 鼠标按键按下 |
| mouseup | 鼠标按键抬起 |
| mousemove | 鼠标移动 |
| mouseover | 鼠标进入元素 |
| mouseout | 鼠标离开元素 |
| mouseenter | 鼠标进入元素，用来代替 mouseover |
| mouseleave | 鼠标离开元素，用来代替 mouseout |
| mousewheel | 鼠标滚轮滚动，用于 chrome、safari、ie 等 |
| DOMMouseScroll | 鼠标滚轮滚动，用于 Firefox，只能使用 addEventListener 监听 |
鼠标按键按下和抬起事件如何获取按的是哪个键？
事件对象.button 可以获取到鼠标按键，值如下：
0: 左键
1：滚轮键
2：右键
鼠标移动事件如何获取鼠标位置？
事件对象的属性可以获取到鼠标位置：
offsetX / offsetY 获取鼠标在目标元素上的位置
clientX / clientY 获取鼠标在视口上的位置
pageX / pageY 获取鼠标在页面上的位置
screenX / screenY 获取鼠标在屏幕上的位置
滚轮滚动事件兼容性处理：
// Chrome、Safari、Opear、IE
window.onmousewheel = wheelScrollFn;
// Firefox 浏览器
window.addEventListener('DOMMouseScroll', wheelScrollFn);
// 定义滚轮事件的回调函数
function wheelScrollFn(event) {
if (event.wheelDelta) {
// chrome、safari、ie 等
if (event.wheelDelta < 0) {
console.log('滚轮向下滚');
} else {
console.log('滚轮向上滚');
}
} else if (event.detail) {
// firefox 浏览器
if (event.detail > 0) {
console.log('滚轮向下滚');
} else {
console.log('滚轮向上滚');
}
}
}
4.2 键盘事件
| 事件名 | 功能介绍 |
|---|---|
| keydown | 键盘的按键按下 |
| keyup | 键盘的按键抬起 |
| keypress | 键盘的按键按下（字符按键） |
哪些元素可以监听键盘事件？
keypress 和 keydown 的区别：
keydown： 所有按键都可以触发，无法区分键盘上字母大小写
keypress： 只有可输入字符按键可以触发， 事件对象.keyCode 能够区分键入字母的大小写
如何获取按的是哪个键？
事件对象中，有属性可以获取到键盘按键的值：
keyCode：获取按键对应的ascii码
which：同 keyCode
key：获取按键的名字
4.3 文档事件
| 事件名 | 功能介绍 |
|---|---|
| load | 文档加载完毕 |
| DOMContentLoaded | 文档加载完毕 |
| unload | 文档关闭 |
| beforeunload | 文档关闭之前 |
load 事件与 DOMContentLoaded 事件的区别：
load事件: 页面中所有的一切加载完毕，包括文档中的元素加载完毕以及外部文件下载完毕（如图片等）
DOMContentLoaded事件： 只要元素加载完毕。
4.4 表单事件
| 事件名 | 功能介绍 |
|---|---|
| submit | 表单提交的时候触发, 需要监听到 form 元素上 |
| reset | 表单重置的时候触发, 需要监听到 form 元素上 |
| blur | 失去焦点事件，需要监听到表单控件元素上 |
| focus | 获取焦点事件，需要监听到表单控件元素上 |
| select | 文本选中事件，需要监听到文本输入框或文本域元素 |
| input | 输入框或文本域内容一改变就触发 |
| change | 输入框文本域：内容改变且失去焦点； 单选复选下拉选项：一改变就触发 |
4.5 图片事件
| 事件名 | 功能介绍 |
|---|---|
| load | 图片加载完毕 |
| error | 图片加载失败 |
| abort | 图片加载中断 |
4.6 过渡事件
| 事件名 | 功能介绍 |
|---|---|
| transitionstart | 过渡开始事件，在过渡延迟之后触发 |
| transitionend | 过渡结束事件 |
| transitionrun | 过渡开始事件，在过渡延迟之前触发 |
4.7 动画事件
| 事件名 | 功能介绍 |
|---|---|
| animationstart | 动画开始事件 |
| animationend | 动画最终结束事件 |
| animationiteration | 该事件动画每重复执行一次就触发一次 |
4.8 其他事件
| 事件名 | 功能介绍 |
|---|---|
| scroll | 内容发生滚动，需要监听给给有滚动条的元素或者 window |
| resize | 视口大小发生变化，需要监听给 window |
5 Event对象
在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。
5.1 Event 对象的获取
浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0 级或 DOM2 级），都会传入 event 对象。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
alert(event.type); //"click"
}, false);
5.2 鼠标事件对象 MouseEvent
clientX / clientY 鼠标在视口上的位置
offsetX / offsetY 鼠标在元素上的位置
pageX / pageY 鼠标在页面上（根元素上）的位置
screenX / screenY 鼠标在屏幕上的位置
button 鼠标按键键值 （0表示左键，1表示滑轮， 2表示右键）
5.3 键盘事件对象 KeyboardEvent
keyCode 键盘按键对应的ascii值
which 同keyCode
key 键盘按键的值 （返回是字符串） dom3
5.4 所有的事件对象共有的属性
type 返回事件类型（事件名）
timestamp 触发事件时的时间戳（从页面打开的那一刻开始计算）
target 获取目标元素 可以用于事件委托
stopPropagation() 阻止冒泡
preventDefault() 阻止默认行为（一些元素发生某些事件之后又默认行为）
6 事件委托
事件委托，就是把一个元素响应事件的函数委托到另一个元素。
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
我们可以使用 event 对象中的 target 属性来判断目标元素。
//给一个一直都存在的元素绑定事件
box.onclick = function(event){
//判断 如果点击的 .item元素
if (event.target.className.indexOf('item') >= 0) {
event.target.classList.toggle('active');
}
};
事件委托的优势：
1）大量的元素监听事件，可以减少内存消耗。
2）可以动态绑定事件，给动态添加的元素也绑定事件。