DOM 事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、 键盘 按键的状态、鼠标的位置、鼠标按钮的状态。(W3C)
事件对象会在事件被触发时获得，对象包含了当前事件的一些信息，如点击事件可以 获取 到点击的位置， 键盘 输入事件可以 获取 到按下的键。
1. 获取 事件对象
在给 DOM 节点绑定事件时，需要传递 一个 事件处理器，其本质上是个 函数 ，在事件触发时被 调用 。
在事件处理器被 调用 时， 默 认就会传递 一个 参数，这个参数就是事件对象。
< input type = " text " class = " input-here " > < div class = " log " > </ div > < script > var inputEle = document . querySelector ( '.input-here' ) ; var logEle = document . querySelector ( '.log' ) ; inputEle . onkeydown = function ( event ) { var ele = document . createElement ( 'p' ) ; ele . innerText = '按下了' + event . keyCode ; logEle . appendChild ( ele ) ; } inputEle . addEventListener ( 'keyup' , function ( event ) { var ele = document . createElement ( 'p' ) ; ele . innerText = '弹起了' + event . keyCode ; logEle . appendChild ( ele ) ; } ) ; </ script >
输入 一个 字符的动作包含 按下键 和 松开键 ，对应的事件就是 onkeydown 和 onkeyup ，如果使用二级 DOM 事件，则可以不加 on 前缀。
例子中的事件处理器接收了 一个 参数，这个参数就是事件对象，参数名是可以随意的，一般情况下开发者会选择 e 或者 event 作为参数名。
onkeydown 和 onkeyup 是 键盘 相关的事件，所以可以 获取 到按下的键是哪个，对应的就是事件对象下的 keyCode 属性 。
keyCode 属性 是按下键的 ASCII 码，如数字 1 对应的就是 49， 数字2对应的是 50。具体可以参阅 ASCII 映射表。
2. 常用的事件对象下的 属性 和 方法
以下 内容 会涉及到事件流相关的 内容 ，可以参阅 DOM 事件流章节。
在符合 DOM2 标准的浏览器中，事件对象都具有以下 属性 和 方法 。
2.1 属性
2.1.1 target
target表示当前事件最终捕获到的目标。
< div class = " a " > 我是第 一个 节点 a < div class = " b " > 我是第二个节点 b < div class = " c " > 我是第三个节点 c < div class = " d " > 我是第四个节点 d < div class = " e " > 我是第五个节点 e < div class = " f " > 我是最里面的 一个 元素 f </ div > </ div > </ div > </ div > </ div > </ div > < div class = " result " style =" margin-top : px ; " > </ div > < script > var resultEle = document . querySelector ( '.result' ) ; document . querySelector ( '.a' ) . addEventListener ( 'click' , function ( e ) { resultEle . innerText = '捕获到的元素类名是' + e . target . className ; } ) ; </ script >
可以看到事件绑定在类名为 a 的节点上，点击其子节点的时候，子节点就是最终捕获到的元素。
2.1.2 currentTarget
通过 currentTarget 可以 获取 到目前触发事件的元素。
< div class = " a " > 我是第 一个 节点 a < div class = " b " > 我是第二个节点 b < div class = " c " > 我是第三个节点 c < div class = " d " > 我是第四个节点 d < div class = " e " > 我是第五个节点 e < div class = " f " > 我是最里面的 一个 元素 f </ div > </ div > </ div > </ div > </ div > </ div > < div class = " result " style =" margin-top : px ; " > </ div > < script > var resultEle = document . querySelector ( '.result' ) ; document . querySelector ( '.a' ) . addEventListener ( 'click' , function ( e ) { resultEle . innerText = [ '当前触发事件的元素的类名是：' , e . currentTarget . className , '。当前捕获到的元素类名是：' , e . target . className , ] . join ( '' ) ; } ) ; </ script >
不论点击的是哪个子节点，currentTarget 都是表示当前触发事件的节点。
2.2 方法
2.2.1 stopPropagation
调用 此 方法 就会阻止事件的冒泡，使用到的场景大多为某个父元素和元素本身绑定了相同事件时。
< style > .list { width : px ; margin : auto ; } .list .item { width : ; border : px dashed #4caf50 ; border-b ott om : ; border-radius : px ; padding : px ; } .list .item :last-child { border-b ott om : px dashed #4caf50 ; } .list .item button { border-radius : px ; font-size : px ; color : #666 ; outline : none ; } .list .item button :active { background : #eee ; } </ style > < div class = " list " > < div class = " item " > < p > 一句简单的介绍。 </ p > < button > 点击我 删除 这条 </ button > </ div > < div class = " item " > < p > 两句简单的介绍。两句简单的介绍。 </ p > < button > 点击我 删除 这条 </ button > </ div > </ div > < script > var items = document . querySelectorAll ( '.list .item' ) ; var btns = document . querySelectorAll ( '.list .item button' ) ; items . forEach ( function ( item ) { item . addEventListener ( 'click' , function ( ) { alert ( '马上进入到详情' ) ; } ) ; } ) ; btns . forEach ( function ( btn ) { btn . addEventListener ( 'click' , function ( ) { var parent = btn . parentNode ; parent . parentNode . removeChild ( parent ) ; } ) ; } ) ; </ script >
上述例子，在点击按钮的时候，虽然完成了 删除 操作，但还是会弹出 一个 框，触发到了父级的事件，这是冒泡特性导致的，所以需要阻止向上冒泡，
< style > .list { width : px ; margin : auto ; } .list .item { width : ; border : px dashed #4caf50 ; border-b ott om : ; border-radius : px ; padding : px ; } .list .item :last-child { border-b ott om : px dashed #4caf50 ; } .list .item button { border-radius : px ; font-size : px ; color : #666 ; outline : none ; } .list .item button :active { background : #eee ; } </ style > < div class = " list " > < div class = " item " > < p > 一句简单的介绍。 </ p > < button > 点击我 删除 这条 </ button > </ div > < div class = " item " > < p > 两句简单的介绍。两句简单的介绍。 </ p > < button > 点击我 删除 这条 </ button > </ div > </ div > < script > var items = document . querySelectorAll ( '.list .item' ) ; var btns = document . querySelectorAll ( '.list .item button' ) ; items . forEach ( function ( item ) { item . addEventListener ( 'click' , function ( ) { alert ( '马上进入到详情' ) ; } ) ; } ) ; btns . forEach ( function ( btn ) { btn . addEventListener ( 'click' , function ( e ) { // 阻止冒泡 e . stopPropagation ( ) ; var parent = btn . parentNode ; parent . parentNode . removeChild ( parent ) ; } ) ; } ) ; </ script >
2.2.2 preventDefault
此 方法 可以取消事件的 默 认行为，比如超 链接 的点击，会发生 跳转 ， 跳转 动作就是 默 认行为。
给超 链接 绑定点击事件， 调用 事件对象下的 preventDefault 属性 ， 默 认行为就会取消，即不会发生 跳转 。
< a href = " https://imooc.com " > 冲鸭！！前往网！！ </ a > < script > var aTag = document . querySelector ( 'a' ) ; aTag . onclick = function ( e ) { e . preventDefault ( ) ; alert ( ' 跳转 被终止！' ) ; } ; </ script >
3. 兼容性问题
早期IE下的事件模型与 DOM 标准提供的有些不同。
如事件对象，在 IE8 之前并不是通过传递给事件处理器 获取 的，而是要通过 window.event 获取 。
< div id = " ele " > 点我 </ div > < script > var ele = document . getElementById ( 'ele' ) ; ele . onclick = function ( e ) { alert ( e ) ; // undefined alert ( window . event ) ; } </ script >
以下 代码 在 IE8 中，第 一个 alert 将会返回 undefined，第二个才会是事件对象。
部分事件 属性 也不同，如标准中的 target 属性 ，在早期 IE 下需要用 srcElement 替代。
建议对兼容性相关 内容 做个了解即可，框架通常会处理好兼容性问题。
4. 小结
事件对象包含了事件相关的信息，有事件对象，才能对各个事件做更深层次的交互优化。
DOM 事件流 ? ?DOM 事件绑定声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did92426