©2010-2026 宁波自信网络信息技术有限公司 版权所有
客服电话：0574-28810668 投诉电话：18658249818
浙ICP备2021020529号-1 | 浙B2-20240490
关注我们 ：
1、 这篇文章主要为大家详细介绍了易被忽视的js事件问题，包括跨平台事件、冒泡中target和currentTarget的区别，感兴趣的朋友可以参考一下 一、跨平台事件 什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。 什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。 下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点： DOM属性和方法 &
2、nbsp; IE属性和方法 charcode keycode preventDefault returnValue=false relatedTarget fromobj|toobj stopPropation cancelBuble=true target
3、nbsp; srcobj 我们用一个小demo看一下，能够很好的解决事件跨平台的兼容问题： <html> <head> <title>eventUtil</title> <script eventType="text/javascript"> var eventUtil = { //监听事件 &
4、nbsp; addListener: function(obj, eventType, fn) { if (obj.addEventListener) { obj.addEventListener(eventType, fn, false); } else if (obj.attachEvent) { &nb
5、sp; obj.attachEvent('on' + eventType, fn); } else { obj['on' + eventType] = fn; } }, //返回event对象 getEvent: function(event) {
6、nbsp; return event || window.event; //return event ? event : window.event; }, //返回目标事件对象 getTarget: function(event) { return event.target || eve
7、nt.srcobj; }， preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event
8、returnValue = false; } }, removeListener: function(obj, eventType, fn) { if (obj.removeEventListener) { obj.removeEventListener(eve
9、ntType, fn, false); } else if (obj.deattachEvent) { obj.detachEvent(eventType, fn); } else { obj['on' + eventType] = null; } &nb
10、sp; }, stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble
11、 true; } } }; </script> </head> <body> <input eventType="button" value="click me" id="btn" /> <p>event</p> <a>Hello word!</a> &nbs
12、p; <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); &n
13、bsp; alert(target); eventUtil.stopPropagation(event); } function getBodyListen(event) { alert("click body"); } function getLinkListen(event) { alert("prevent defa
14、ult event"); var event = eventUtil.getEvent(event); eventUtil.preventDefault(event); } window.onload=function() { var btn = document.getobjById("btn"); var link =
15、 document.getobjsByTagName("a")[0]; eventUtil.addListener(btn, "click", addBtnListen); eventUtil.addListener(document.body, "click", getBodyListen); eventUtil.addListener(link, "click",getLinkListen); }
16、 </script> </body> </html> 上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。 首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。 eventUtil.formatEvent=function(event) { if(isIE&&isWin)---检测浏览器的问题 { event.charCode=(event.type=="keypress
17、")?event.keycode:0; event.eventphase=2;--表示冒泡阶段，IE仅支持冒泡阶段 } return event; } 二、关于冒泡中的target和currentTarget target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。
18、 <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
19、currentTarget.tagName : DIV <br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV </div> //看下第二个变列： <div id="outer" style="background:#099"> <div>我是目标div</div> ----点击这部分，输出：e.targe
20、t.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 :
21、DIV </div> function getObj(id) { return document.getElementById(id); } function addEvent(obj, event, fn) { if(window.attachEvent) { obj.attachEvent("on" + event, fn); }
22、 else if(window.addEventListener) { obj.addEventListener(event, fn, false); } } function test(e) { alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
23、 } var outer = getObj("outer"); var inner = getObj("inner"); //addEvent(inner, "click", test); addEvent(outer, "click", test); 三、IE和DOM区别
24、nbsp; DOM IE 获取目标 event.target
25、nbsp; event.srcElement 获取字符代码 event.charCode event.keyCode 阻止默认行为 event.prevetDefault() &n
26、bsp; event.returnvalue=false 冒泡 event.stopPropagation() event.cancelBubble=true 关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为： document.body.oncontextmenu=function(event) { if(isIE)
27、 { var oEvent=window.event; oEvent.returnValue=false; //也可以直接是return false；阻止默认行为 } else { oEvent.preventDefault(); } } 四、鼠标事件 <p>use your mouse to click and double click the
28、red square</p> <div style="width:100px;height:100px;background:red" onmouseover="handleEvent(event)" onmouseout="handleEvent(event)" onmousedown="handleEvent(event)" onmouseup="handleEvent(event)"
29、onclick="handleEvent(event)" ondblclick="handleEvent(event)" id="div1" > </div> <p><textarea id="txt1" rows="5" cols="45"></textarea></p> <!--检测键盘事件--> <p><input type="text" id="te
30、xtbox" onkeydown="handle(event)" onkeypress="handle(event)" onkeyup="handle(event)" ></p> <p><textarea id="txt2" rows="10" cols="45"></textarea></p> js文件如下： functi
31、on handleEvent(event) { var oText=document.getElementById('txt1'); oText.value+= "\n"+event.type; oText.value+= "\n target is "+(event.srcElement||event.target).id; oText.value+="\n at ("+event.clientX+","+event.clientY+")in the client"; oText.val
32、ue+="\n at ("+event.screenX+","+event.screenY+")in the client"; oText.value+="\n button down is"+event.button; var arrKeys=[]; oText.value+="\n relatedTarget is"+event.relatedTarget.tagName; //event.relatedTarget.tagName可以判断鼠标的来源和出处 } function handle(eve
33、nt) { var oText2=document.getElementById('txt2'); oText2.value+="\n"+event.type; var arrKeys=[]; if(event.shiftKey){arrKeys.push("Shift");} if(event.ctrlKey){arrKeys.push("Ctrl");} if(event.altKey){arrKeys.push("Alt");} oText2.value+="\n keydown is "+arrKeys; } 以上就是本文的全部内容，希望对大家的学习有所帮助。
©2010-2026 宁波自信网络信息技术有限公司 版权所有
客服电话：0574-28810668 投诉电话：18658249818
浙ICP备2021020529号-1 | 浙B2-20240490
关注我们 ：
