事件——高级
注册事件
给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听方式。
传统注册方式
- 利用on开头的事件如
onclick - 特点：注册时间的唯一性（同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数）
方法监听注册方式
- W3C推荐
EventTarget.addEventListener(type, listener[, useCapture])- 特点：同一个元素同一个事件可以注册多个监听器
EventTarget.addEventListener(type, listener, useCapture)；
//type：事件类型字符串，比如click、mouseover。注意: 不要使用 "on" 前缀，例如是click不是onclick。
//listener：事件触发时执行的函数。
//useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。默认值false。
删除事件
传统方式
eventTarget.onclick = null;
方法监听方式
eventTarget.removeEventListener(type,listener[,useCapture]);
//eg:
var divs = document.querySelectorAll('div');
divs[0].addEventListener('click',fn);
function fn {
alert('xxx');
divs[0].removeEventListener('click',fn);
}
DOM事件流
当一个HTML元素产生一个事件时，事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。
DOM事件流分为三个阶段：
1.捕获阶段（事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。）
2.当前目标阶段
3.冒泡阶段（事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。）
- js代码中只能执行捕获或者冒泡中的一个阶段
onclick和attachEvent只能得到冒泡阶段EventTarget.addEventListener(type, listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（默认值）表示在事件冒泡阶段调用事件处理程序。
事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。**简单理解：**事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
eventTarget.onclick = function(event) {
};
eventTarget.addEventListener('click',function(event){
})
//这个event就是事件对象，也可以写成e或者evt
//event是形参，不需要传递实参
//当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）
事件对象的常见属性和方法
Event.target //返回触发事件的对象
和this的区别：e.target返回的是触发事件的对象（比如绑定了ul，点击li返回的是li），this返回的是绑定事件的对象（比如绑定了ul，点击li返回的是ul）（和event.currentTarget一样）。
e.type //返回事件的类型
e.preventDefault(); //阻止默认事件（默认行为） 标准 比如不让链接跳转
//另一种方法，注册方式里边写
return false;
e.stopPropagation(); //阻止冒泡 标准
阻止事件冒泡
标准写法：利用事件对象里面的 stopPropagation() 方法
事件委托
原理
事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点。
常用的鼠标事件
contextmenu //禁止鼠标右键菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
selectstart //禁止鼠标选中
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
鼠标事件对象（MouseEvent）
e.clientX //返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY //返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX //返回鼠标相对于文档页面的X坐标
e.pageY //返回鼠标相对于文档页面的Y坐标
e.screenX //返回鼠标相对于电脑屏幕的X坐标
e.screenY //返回鼠标相对于电脑屏幕的Y坐标
键盘事件对象（KeyboardEvent）
keyup //某个键盘按键被松开时触发
keydown //某个键盘按键被按下时触发
keypress //某个键盘按键被按下时触发，但是不识别功能键，如 ctrl shift ↑ ↓ ← → 等
- 三个事件的执行顺序：keydown -> keypress -> keyup
- 在文本框里的特点：keydown和keypress两个事件触发的时候，文字还没有落入文本框中。keyup事件触发的时候，文字已经落入文本框里。
code //返回键盘按下的值