javascript高级程序设计学习（六）-----事件

最新推荐文章于 2024-10-05 01:22:45 发布

SwordMars

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量358

点赞数

分类专栏： js学习笔记文章标签： javascript function ie object date div

本文链接：https://blog.csdn.net/SwordMars/article/details/6843802

版权

js学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.事件添加删除

DOM中使用addEventListener(sType, function, bFlag)来添加事件处理函数，而IE中用attachEvent( sEvent, function)来处理.

对应的事件删除函数为removeEventListener(sType, function , bFlag) , detachEvent( sEvent, function);

因此可以把兼容DOM和IE的事件处理函数写成

var EventUtil=new Object;
EventUtil.addEventHandler=function(oTarget,sType,fnHandler)
 {
	 if(window.addEventListener)
	   oTarget.addEventListener(sType,fnHandler,false);
	 else
	   oTarget.attachEvent("on"+sType,fnHandler);
 }
 
 EventUtil.removeEventHandler=function(oTarget,sType,fnHandler)
 {
	 if(window.removeEventListener)
	   oTarget.removeEventListener(sType,fnHandler,false);
	 else
	   oTarget.detachEvent("on"+sType,fnHandler);
 }

2. 获取event对象

DOM中在事件处理的函数中会添加e作为参数。如：

<div id="test">your soul is mine</div>
<script>
  document.getElementById("test").οnclick=function()
  { 
	  alert(arguments.length+", "+arguments[0]);  //输出 1, object MouseEvent   IE8以下输出0, undefined
  }
</script>

而IE中可以用window.event获取。所以为兼容DOM与IE 可以用var e=e||window.event获取 event对象.

3. 获取目标

DOM: oTarget=event.target,

IE: oTarget=evnet.srcElement;

DOM与IE8以下在javascript事件处理上还有很多细微的差别，可以用如下方法把event变成 DOM兼容。

 EventUtil.formatEvent=function(oEvent)
 {
	 oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;
	 oEvent.eventPhase=2;
	 oEvent.isChar=(oEvent.charCode>0);
	 oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
	 oEvent.pageY=oEvent.clientY+document.body.scrollTop;
	 oEvent.preventDefault=function(){ this.returnValue=false;};
	 
	 if(oEvent.type=="mouseout") oEvent.relatedTarget=oEvent.toElement;
	 else if(oEvent.type=="mouseover") oEvent.relatedTarget=oEvent.fromElement;
	 
	 oEvent.stopPropagation=function(){this.cancelBubble=true;}
	 oEvent.target=oEvent.srcElement;
	 oEvent.time=(new Date()).getTime();  
	 return oEvent; 
 }

参考图书<< javascript高级程序设计>>