事件的高级用法

一、事件基础

1.事件函数

obj.on-事件名=fn
定义事件的时候，事件函数不会自动执行，当事件触发的时候，会执行

2.事件对象

1）事件对象：当浏览器执行事件的时候，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在事件函数中进行传递
Event
常见属性：
clientX
clinetY 鼠标相对客户端的位置
pageX
pageY 鼠标相对于页面的位置
type 事件类型
target 事件作用的节点对象
2）事件的兼容性：
在低版本的IE和火狐上，事件传递机制不一样，需要通过window.event来获取事件
window.event||e

二、事件绑定和取消

1. 事件绑定

添加事件的做法，若出现为同一个节点绑定了同名的事件，会出现覆盖效果。
addEventListener(事件名,事件函数,isBubble)
isBubble :默认为false 事件是冒泡机制 true 事件为捕获机制
注意：事件名没有on前缀
removeEventListener(事件名,事件函数,isBubble)

注意：一定要保证移除事件时和添加事件时是同一个事件函数
事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener,
在低版本IE中可以使用：
attachEvent(事件名,事件函数) 绑定事件
detachEvent 取消事件

注意：事件名 包含on前缀

两种事件绑定的区别：
1.addEventListener：
事件名没有on前缀
可以选择冒泡或者捕获机制
this 指事件调用者
同名事件的执行顺序：先添加先执行
2.attachEvent
事件名需要添加on前缀
不能选择冒泡或捕获的机制
this 指window对象
同名事件的执行顺序：后添加先执行
事件绑定兼容性写法的封装：

三、事件流

事件流：事件被触发之后会在DOM树的节点之间传递
冒泡：事件由最具体的元素(事件的触发者),层层向外传递（传递给父节点），直到window 对象停止
捕获：事件由最外层元素(window),层层向内传递，直到最具体的元素

事件流机制有时候会对页面效果造成一些影响，所以需要拦截事件的冒泡：
兼容性写法：
window.event?window.cancelBubble=true:e.stopPropagation()

四、拦截浏览器的默认行为

拦截浏览器自带的一些事件行为，例如：a超链接的跳转等…
对象.事件名 return false
对象.addEventListener() e.preventDefault()
对象.attachEvent() e.returnValue=false; retrun false;

五、常见事件

右键事件：oncontextmenu
键盘事件：onkeydown onkeyup onkeypress
键盘事件的属性：
key 在IE中不支持 键名称
keyCode 键码
滚轮事件：
Onmousewheel 标准浏览器和IE
对象.addEventListener(“DOMMouseScroll”,事件函数,false) 火狐

滚轮事件对：
wheelDelta 标准浏览器和IE 120 -120 下 120 上
detail 获取 3

六、事件的委托

事件委托：事件添加元素父节点(原理：事件的冒泡机制)
将事件添加到父元素上，当事件发生时，父元素会找到对应触发事件的子元素去处理，后期添加的子元素，依然有这个事件