js中最容易被忽视的事件问题大总结
什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。
什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。
下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：
DOM属性和方法
IE属性和方法
charcode
keycode
preventDefault
returnValue=false
relatedTarget
fromobj|toobj
stopPropation
cancelBuble=true
target
srcobj
<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;
}
以上这篇js中最容易被忽视的事件问题大总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。