事件高级

1、注册事件（绑定事件）(特殊：attachEvent(type,callback))

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

传统注册方式：利用on开头的事件onclick(特点：注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数)

<button onclick="alert('hi~')"></button>btn.onclick = function() {}

方法监听注册方式：W3C标准 推荐方式(addEventListener()是一个方法，特点：同一个元素同一个事件可以注册多个监听器，按注册顺序执行)（IE9以前不支持此方法，可使用attachEvent()代替）

eventTarget.addEventListener(type,listener[,useCapture])将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数

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

2、删除事件（解绑事件）(特殊：detachEvent(type,callback))

2、1解绑事件的方式

1、传统注册方式

eventTarget.onclick = null

2、方法监听注册方式

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

3、DOM事件流

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

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

• JS代码只能执行捕获或者冒泡其中一个阶段
• onclick 和 attachEvent只能得到冒泡阶段

如果addEventListener 第三个参数是true，那么则处于捕获阶段  document->html->body->div
如果addEventListener 第三个参数是false或者省略，那么则处于冒泡阶段  div->body->html->document

• 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
• 有些事件是没有冒泡的，比如onblur、onfocus、onmoseenter、onmouseleave
• 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事情

4、事件对象

 事件对象是我们事件一系列相关数据的集合，跟事件相关的，eg:鼠标点击里面就包含了鼠标的相关信息，鼠标坐标；如果是键盘事件里面就包含的键盘事件的信息，比如判断用户按下了哪个键

事件对象可以自己命名，可以用event/evt/e，也有兼容性问题 IE678 通过 window.event
常见事件对象的属性和方法：

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

this跟e.target的区别：

• e.target点击了哪个元素，就返回哪个元素
• this 是哪个元素绑定了这个点击事件，就返回哪个元素 与currnetTarget相似，ie678不认识

5、事件委托（代理、委派）

事件委托也称为事件代理，在jQuery里面称为事件委派。

事件委托的原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

6、常用的鼠标事件

6.1 常用的鼠标事件

1、禁止鼠标右键菜单（contextmenu）：主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
2、禁止鼠标选中文字（selectstart）

6.2 鼠标事件对象

event 对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和键盘事件对象 KeyboardEvent。

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

7、常用的键盘事件

7.1常用的键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发 但是它不识别功能键，比如ctrl、shift箭头、上下左右箭头等

注：
1、如果使用addEventListener，不需要加on；
2、onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头、shift、ctrl等；
3、三个事件的执行顺序是：keydown ->keypress ->keyup

7.2常用的键盘事件对象

键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
注：
1、keyup和keydown事件不区分字母大小写，a和A得到的都是65
2、keypress 事件区分字母大小写，a返回的是97 ，A返回的是65
在我们实际开发中，我们更多的使用keydown和keyup,它能识别所有的键（包括功能键）