事件——高级

注册事件

传统注册方式

利用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事件流

DOM事件流分为三个阶段：

1.捕获阶段（事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。）

2.当前目标阶段

3.冒泡阶段（事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。）

js代码中只能执行捕获或者冒泡中的一个阶段
onclick和attachEvent只能得到冒泡阶段
EventTarget.addEventListener(type, listener[, useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（默认值）表示在事件冒泡阶段调用事件处理程序。

事件对象

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			//返回键盘按下的值