在DOM事件深入浅出(一)中，我主要讲解了不同DOM层级的事件处理器，介绍了事件冒泡和捕获的触发原理和方法。本文将继续介绍DOM事件中的知识点，主要介绍DOM事件中Event对象的属性和方法。那么DOM事件中的Event对象是什么？事件对象是指与特定事件相关并包含有关该事件的详细信息的对象。我们可以通过传递给事件处理器的参数获取事件触发后产生的一系列方法和属性。Event对象Event对象实际上是事件处理程序的参数。在调用事件时，我们只需要将其传入事件函数中即可获取。代码如下：functiongetEvent(event){event=event||window.event;}上面的事件函数传入一个名为Event的参数作为事件对象，同时进行浏览器兼容性处理。在IE8及之前的版本中，通过设置属性注册事件处理器时，调用时不传递事件对象，需要通过全局对象window.event获取。所以在上面的代码中，我们使用||做出判断。如果事件对象存在，则使用event，如果不存在，则使用window.event。Event对象包含了几个方法和属性，我们可以通过这些方法和属性获取事件的详细信息并进行相关处理。Event对象方法Event对象主要有以下两个方法，分别用于处理事件传播（冒泡、捕获）和事件取消。1.stopPropagationstopPropagation方法主要用来阻止事件的进一步传播，比如阻止事件继续向上冒泡到上层。functiongetEvent(event){event.stopPropagation();}child.addEventListener('click',getEvent,false);如果需要兼容IE8及以下浏览器，需要使用cancelBubble而不是stopPropagation，因为低版本的IE不支持stopPropagation方法。functiongetEvent(event){event=event||window.event;if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble=true;}}cancelBubble是IE事件对象的一个??属性，设置这个属性设置为true以防止事件进一步传播。2.perventDefaultperventDefault方法用于取消事件的默认操作。比如链接的跳转行为，表单的自动提交行为，都可以通过perventDefault方法来取消。代码如下：禁止跳转vargo=document.getElementById('go');functiongoFn(event){event.preventDefault();console.log('我没有跳！');}go.addEventListener('click',goFn,false);通过preventDefault，我们成功的阻止了一个链接的跳转行为。但是，IE9之前的浏览器需要将returnValue属性设置为false才能实现。如下：functiongoFn(event){event=event||window.event;if(event.preventDefault){event.preventDefault();}else{event.returnValue=false;}console.log('我没有跳！');}除了Event对象的上述两个主要方法外，目前的DOM事件规范草案还定义了Event对象的另一个方法，名为stopImmediatePropagation。3、与stopPropagation相比，stopImmediatePropagation还可以阻止事件的传播。不同的是，它还可以阻止绑定到此元素的相同类型的事件。如：vargo=document.getElementById('go');functiongoFn(event){event.preventDefault();event.stopImmediatePropagation();//防止事件冒泡，防止同类型事件console.log('我做了不跳！');}functiongoFn2(event){console.log('我是同类型事件！');}go.addEventListener('click',goFn,false);go.addEventListener('click',去Fn2，假）；我们继续在a链接上添加点击事件，如果我们在goFn方法中添加stopImmediatePropagation方法，那么goFn2方法将不会执行，点击事件也不会向上层冒泡。需要注意的是，目前部分浏览器不支持stopImmediatePropagation，但是像jQuery这样的库封装了跨平台的stopImmediatePropagation方法。相对于Event对象的方法，Event对象的属性相对较多，文中无法一一说明。因此，主要介绍实际项目中常用的Event对象的属性。1.type属性我们可以通过type获取事件发生的类型，比如获取点击事件中的'click'字符串。vargo=document.getElementById('go');functiongoFn(event){console.log(event.type);//输出'click'}go.addEventListener('click',goFn,false);2.target属性target属性主要用于获取事件的目标对象。比如我们点击a标签得到的是a标签的html对象。vargo=document.getElementById('go');functiongoFn(event){vartarget=event.target;console.log(target===go)//返回true}go.addEventListener('click',goFn,false);在IE8及更早版本中，我们需要使用srcElement而不是target。兼容方案如下：functiongoFn(event){varevent=event||window.event,target=event.target||event.srcElement;console.log(target===go)//returntrue}3.鼠标事件属性在鼠标触发事件时，主要的事件属性包括鼠标的位置和按钮的状态，对于例子：clientX和clientY指定鼠标在窗口坐标中的位置，其中button指定按下的是哪个鼠标键。functionmoveFn(event){console.log(event.screenX)//根据屏幕获取鼠标的X轴坐标console.log(event.screenY)//根据屏幕获取鼠标的Y轴坐标screenconsole.log(event.clientX)//根据浏览器窗口获取鼠标的X轴坐标console.log(event.clientY)//根据浏览器窗口console获取鼠标的Y轴坐标.log(event.pageX)//根据文档获取鼠标的X轴坐标console.log(event.pageY)//根据文档获取鼠标的Y轴坐标}functionclickFn(event){console.log(event.button)//获取鼠标按下的键。在非IE浏览器中，0为鼠标左键，1为鼠标中键，2为鼠标右键console.log(event.which)//获取指定事件上按下了哪个键盘键或鼠标}document.addEventListener('mouseover',moveFn,false);document.addEventListener('click',clickFn,false);4.键盘事件属性当使用键盘触发事件时，主要的事件属性包括键盘的keyCode和是否按下特殊键，如：keyCode指定按下的键的键码值，ctrlKey指定是否按下按下ctrl键。functionkeyFn(event){console.log(event.keyCode);//获取按下的键的键码值console.log(event.ctrlKey);//获取ctrl键是否按下console.log(event.shiftKey);//获取shift键是否按下console.log(event.altKey);//获取alt键是否按下console.log(event.metaKey);//获取meta键是否按下}document.addEventListener('keyup',keyFn,false);类似的事件属性还有窗体事件属性、窗口事件属性等，这里不再赘述。有兴趣的同学可以参考相关资料。小结本文主要讲解了DOM事件中Event对象的常用属性和方法，同时也介绍了其在IE中的兼容性问题及解决方法。不过关于DOM事件的知识点远不止这些，希望仅此一点可以帮助到刚接触DOM的开发者。备注：文中引用自《Javascript权威指南》一书和MOOC教程《DOM事件揭秘》。本文为Raub原创文章，首发于微信?：前端呼啦圈（Love-FED）转载请注明出处——微信公众号：前端呼啦圈（Love-FED）)
