你的位置:首页 > Java教程

[Java教程]js中容易被忽视的事件问题总结


一:跨平台事件

  什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同。

  什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有属性。主要处理DOM事件和IE事件的磨合,使其尽可能的相似。

  下面我们来看一下DOM和IE之间的对象属性和方法做个对比(这里只指出两者之间不同的属性和方法),主要有以下五大点:

DOM属性和方法IE属性和方法
charcodekeycode
preventDefaultreturnValue=false
relatedTargetfromobj|toobj
stopPropationcancelBuble=true
targetsrcobj
  

 我们用一个小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)---检测浏览器的问题,如有不清楚,见我上篇文章:http://www.cnblogs.com/jtjds/p/5461152.html
{
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 + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);  }    var outer = getObj("outer");    var inner = getObj("inner");    //addEvent(inner, "click", test);    addEvent(outer, "click", test); 

 三:IE和DOM区别

 DOMIE
获取目标event.targetevent.srcElement
获取字符代码event.charCodeevent.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+= "\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.value+="\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(event){  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;}