易被忽视的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>
<scripteventType="text/javascript">
vareventUtil={
//监听事件
addListener:function(obj,eventType,fn){
if(obj.addEventListener){
obj.addEventListener(eventType,fn,false);
}elseif(obj.attachEvent){
obj.attachEvent('on'+eventType,fn);
}else{
obj['on'+eventType]=fn;
}
},
//返回event对象
getEvent:function(event){
returnevent||window.event;
//returnevent?event:window.event;
},
//返回目标事件对象
getTarget:function(event){
returnevent.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);
}elseif(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>
<inputeventType="button"value="clickme"id="btn"/>
<p>event</p>
<a>Helloword!</a>
<scripteventType="text/javascript">
functionaddBtnListen(event)
{
varevent=eventUtil.getEvent(event);
vartarget=eventUtil.getTarget(event);
alert("mynameiskock");
alert(event.eventType);
alert(target);
eventUtil.stopPropagation(event);
}
functiongetBodyListen(event)
{
alert("clickbody");
}
functiongetLinkListen(event)
{
alert("preventdefaultevent");
varevent=eventUtil.getEvent(event);
eventUtil.preventDefault(event);
}
window.onload=function()
{
varbtn=document.getobjById("btn");
varlink=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仅支持冒泡阶段
}
returnevent;
}
二、关于冒泡中的target和currentTarget
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。
<divid="outer"style="background:#099"> <p>我是目标div</p>----点击这部分，输出：e.target.tagName:P||e.currentTarget.tagName:DIV <pid="inner"style="background:#9C0">我是目标p</p>----点击这部分，输出：e.target.tagName:P||e.currentTarget.tagName:DIV <br>----点击这部分，输出：e.target.tagName:DIV||e.currentTarget.tagName:DIV </div> //看下第二个变列： <divid="outer"style="background:#099"> <div>我是目标div</div>----点击这部分，输出：e.target.tagName:DIV||e.currentTarget.tagName:DIV <pid="inner"style="background:#9C0">我是目标p</p>----点击这部分，输出：e.target.tagName:P||e.currentTarget.tagName:DIV <br>----点击这部分，输出：e.target.tagName:DIV||e.currentTarget.tagName:DIV </div>
functiongetObj(id)
{
returndocument.getElementById(id);
}
functionaddEvent(obj,event,fn)
{
if(window.attachEvent)
{
obj.attachEvent("on"+event,fn);
}
elseif(window.addEventListener)
{
obj.addEventListener(event,fn,false);
}
}
functiontest(e)
{
alert("e.target.tagName:"+e.target.tagName+"\ne.currentTarget.tagName:"+e.currentTarget.tagName);
}
varouter=getObj("outer");
varinner=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)
{
varoEvent=window.event;
oEvent.returnValue=false;//也可以直接是returnfalse；阻止默认行为
}
else
{
oEvent.preventDefault();
}
}
四、鼠标事件
<p>useyourmousetoclickanddoubleclicktheredsquare</p> <divstyle="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><textareaid="txt1"rows="5"cols="45"></textarea></p> <!--检测键盘事件--> <p><inputtype="text"id="textbox" onkeydown="handle(event)" onkeypress="handle(event)" onkeyup="handle(event)" ></p> <p><textareaid="txt2"rows="10"cols="45"></textarea></p>
js文件如下：
functionhandleEvent(event)
{
varoText=document.getElementById('txt1');
oText.value+="\n"+event.type;
oText.value+="\ntargetis"+(event.srcElement||event.target).id;
oText.value+="\nat("+event.clientX+","+event.clientY+")intheclient";
oText.value+="\nat("+event.screenX+","+event.screenY+")intheclient";
oText.value+="\nbuttondownis"+event.button;
vararrKeys=[];
oText.value+="\nrelatedTargetis"+event.relatedTarget.tagName;
//event.relatedTarget.tagName可以判断鼠标的来源和出处
}
functionhandle(event)
{
varoText2=document.getElementById('txt2');
oText2.value+="\n"+event.type;
vararrKeys=[];
if(event.shiftKey){arrKeys.push("Shift");}
if(event.ctrlKey){arrKeys.push("Ctrl");}
if(event.altKey){arrKeys.push("Alt");}
oText2.value+="\nkeydownis"+arrKeys;
}
以上就是本文的全部内容，希望对大家的学习有所帮助。