易被忽视的js事件问题总结

一、跨平台事件
什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。
什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。
下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：
DOM属性和方法 IE属性和方法
charcode              keycode
preventDefault     returnValue=false
relatedTarget        fromobj|toobj
stopPropation      cancelBuble=true
target                    srcobj
我们用一个小demo看一下，能够很好的解决事件跨平台的兼容问题：

<html><head><title>eventUtil</title><script eventType="text/javascript">var eventUtil = {//监听事件addListener: function（obj, eventType, fn） {if （obj.addEventListener） {obj.addEventListener（eventType, fn, false）;} else if （obj.attachEvent） {obj.attachEvent（"on" + eventType, fn）;} else {obj["on" + eventType] = fn;}},//返回event对象getEvent: function（event） {return event || window.event;//return event ? event : window.event;},//返回目标事件对象getTarget: function（event） {return event.target || event.srcobj;}，preventDefault: function（event） {if （event.preventDefault） {event.preventDefault（）;} else {event.returnValue = false;}}, removeListener: function（obj, eventType, fn） {if （obj.removeEventListener） {obj.removeEventListener（eventType, fn, false）;} else if （obj.deattachEvent） {obj.detachEvent（eventType, fn）;} else {obj["on" + eventType] = null;}},stopPropagation: function（event） {if （event.stopPropagation） {event.stopPropagation（）;} else {event.cancelBubble = true;}}};</script></head><body><input eventType="button" value="click me" id="btn" /><p>event</p><a>Hello word！</a><script eventType="text/javascript">function addBtnListen（event）{var event = eventUtil.getEvent（event）;var target = eventUtil.getTarget（event）;alert（"my name is kock"）;alert（event.eventType）;alert（target）;eventUtil.stopPropagation（event）;}function getBodyListen（event）{alert（"click body"）;}function getLinkListen（event）{ alert（"prevent default event"）; var event = eventUtil.getEvent（event）; eventUtil.preventDefault（event）;}window.onload=function（）{var btn = document.getobjById（"btn"）;var link = document.getobjsByTagName（"a"）[0];eventUtil.addListener（btn, "click", addBtnListen）;eventUtil.addListener（document.body, "click", getBodyListen）;eventUtil.addListener（link, "click",getLinkListen）;} </script></body></html>

上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。
首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。

eventUtil.formatEvent=function（event）{if（isIE&&isWin）---检测浏览器的问题{ event.charCode=（event.type=="keypress"）?event.keycode:0; event.eventphase=2;--表示冒泡阶段，IE仅支持冒泡阶段}return event;}

二、关于冒泡中的target和currentTarget
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。

<div id="outer" style="background:#099"> <p>我是目标div</p>----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV<p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV<br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV</div>//看下第二个变列：<div id="outer" style="background:#099"> <div>我是目标div</div>----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV<p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV<br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV</div>

function getObj（id）{ return document.getElementById（id）; } function addEvent（obj, event, fn）{ if（window.attachEvent）{obj.attachEvent（"on" + event, fn）; }else if（window.addEventListener）{ obj.addEventListener（event, fn, false）; } } function test（e）{ alert（"e.target.tagName : " + e.target.tagName + "
 e.currentTarget.tagName : " + e.currentTarget.tagName）;}var outer = getObj（"outer"）;var inner = getObj（"inner"）;//addEvent（inner, "click", test）;addEvent（outer, "click", test）;

三、IE和DOM区别
                         DOM                                IE
获取目标       event.target                     event.srcElement
获取字符代码 event.charCode              event.keyCode
阻止默认行为 event.prevetDefault（）      event.returnvalue=false
冒泡               event.stopPropagation（） event.cancelBubble=true

关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为：

document.body.oncontextmenu=function（event）{if（isIE）{ var oEvent=window.event; oEvent.returnValue=false; //也可以直接是return false；阻止默认行为}else{oEvent.preventDefault（）;}}

四、鼠标事件

<p>use your mouse to click and double click the red square</p><div style="width:100px;height:100px;background:red"onmouseover="handleEvent（event）"onmouseout="handleEvent（event）"onmousedown="handleEvent（event）" onmouseup="handleEvent（event）"onclick="handleEvent（event）" ondblclick="handleEvent（event）" id="div1" > </div><p><textarea id="txt1" rows="5" cols="45"></textarea></p><！--检测键盘事件--><p><input type="text" id="textbox" onkeydown="handle（event）"onkeypress="handle（event）"onkeyup="handle（event）" ></p><p><textarea id="txt2" rows="10" cols="45"></textarea></p>

js文件如下：

function handleEvent（event）{var oText=document.getElementById（"txt1"）;oText.value+= "
"+event.type;oText.value+= "
 target is "+（event.srcElement||event.target）.id;oText.value+="
 at （"+event.clientX+","+event.clientY+"）in the client";oText.value+="
 at （"+event.screenX+","+event.screenY+"）in the client";oText.value+="
 button down is"+event.button;var arrKeys=[];oText.value+="
 relatedTarget is"+event.relatedTarget.tagName;//event.relatedTarget.tagName可以判断鼠标的来源和出处}function handle（event）{var oText2=document.getElementById（"txt2"）;oText2.value+="
"+event.type;var arrKeys=[]; if（event.shiftKey）{arrKeys.push（"Shift"）;} if（event.ctrlKey）{arrKeys.push（"Ctrl"）;} if（event.altKey）{arrKeys.push（"Alt"）;}oText2.value+="
 keydown is "+arrKeys;}

以上就是本文的全部内容，希望对大家的学习有所帮助。