传统注册方式
On开头的事件 但是事件具有唯一性
事件监听方式
addEvenListener 事件监听方式 //同一个元素 同一个事件 可以添加多个侦听器 考虑兼容性
用法 事件不带on 而且是字符串形式
监听对象.addEvenListener( '事件 ',function()/绑定函数名，true or false )
true 事件处于捕获阶段(石头落水，从头往子节点查找) false 默认为false,事件处于冒泡阶段(石头落水后产生的气泡，从子节点开始查找)
注册事件兼容性解决方案
删除事件
监听对象.removeEventListener( '事件 ',绑定函数名 )
Dom 事件流
三阶段 捕获阶段 当前目标阶段 冒泡阶段
捕获阶段 Document -html-body-节点
冒泡阶段
节点-body-html-Document 一般使用事件冒泡
有的事件没有冒泡 onblur、onfocus、onmousenter、onmouseleave
事件对象
事件对象 写在侦听函数的小括号 类似于形参
事件对象 只有有了事件以后才存在 它是系统给我们自动创建的，不需要我们传递参数
event 返回 事件相关操作的集合 通常 填 e\evt\event
兼容性处理 e = e || window.event //一般不用
事件对象 常见属性 和 方法
e.target 返回的是 触发事件的对象或元素(点击谁，返回谁)
this 返回的绑定事件的对象或元素
ie 6-8 兼容性
e.type 返回操作事件的类型
e.preventDefault() 阻止默认事件 //考虑兼容性 dom标准写法
return false 阻止默认事件 没兼容性问题 但如果后面有代码不执行 只限于传统的注册方式
e.stopPropagation() 阻止当前事件冒泡 考虑兼容性
e.cancelBubble=true 非标准 ie-8
兼容性写法
事件委托
不是每个子节点都单独设置事件监听器 而是事件监听器上设置在其父节点上 然后利用冒泡原理影响设置每个节点
常用的鼠标事件
1.禁止鼠标右键菜单 contextmenu
2.禁止鼠标选中文字 selectstart
鼠标对象 MouseEvent
clientX 鼠标在可视窗口X的坐标
clientY 鼠标在可视窗口Y的坐标
pageX 鼠标在页面文档的X坐标 //重点
pageY 鼠标在页面文档的Y坐标 //重点
常见的键盘事件
1.按键弹起的时候触发 keyup
2.按键按下的时候触发 keydown //识别功能键 例如 ctrl shift 方向箭头等
2.按键按下的时候触发 keypress //不识别功能键 例如 ctrl shift 方向箭头等
执行顺序 keydown keypress keyup
如果传统注册方式 要加on 监听方式不需要加
键盘对象
e.keycode 返回按下建的ASCII值
keyup keydown 不区分大小写 keypress区分大小写
