码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript事件机制兼容【整理】

时间:2016-07-22 18:50:16      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

【添加事件机制】  addEventListener  和  attachEvent 

[W3C]

addEventListener(‘click‘ , function(){alert(‘Hello World‘)} ,false )  //W3C规范添加事件(IE8及以上不兼容);  第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获

[IE]

attachEvent(‘onclick‘,function(){alert(‘Hello World‘)})  //IE添加事件;  第一个参数为事件类型(需要加on) ; 第二个为事件程序 ; 因为IE只支持事件冒泡,所以只有两个参数

 

[跨浏览器兼容]

function insertEvent(obj,Event,fun){

  if(obj.addEvenListener){

    addEventLitener(Event,fun,false)

  }else if(obj.attach){

    attachEvent(‘on‘+Event,fun)

  }  

}

 

 

------------------------------------------------------------------------------------------

【删除事件机制】 removeEventListener  detachEvent

[W3C] removeEventListener

removeEventListener()    //利用addEventListener新增的事件只能通过removeEventListener来删除;

[注意] //以下这种删除事件方式是错误的,因为事件程序必须不能是一个匿名函数

addEventListener(‘click‘ , function(){alert(‘Hello World‘)} ,false )

removeEventListener(‘click‘,function(){alert(‘Hello World‘)},false)  

 [解决]

addEventListener(‘click‘ , box ,false );

removeEventListener(‘click‘,box,false) ;

function box(){

  alert(‘Hello World‘);

}

 

[跨浏览器兼容]

function deleteEvent(obj,Event,fun){

  if(obj.removeEventListener){

    removeEventListener(Event,fun,false);

  }else if(obj.detachEvent){

    detachEvent(‘on‘+Event,fun)

   }

}

 

 

 -------------------------------------------------------------------------------------------------

 【阻止特定事件的默认行为】

[preventDefault  和returnValue]

[W3C] preventDefault

[IE]  reutrnValue

[跨浏览器兼容]

function(event){

  event=event || window.event;

  if(event.preventDefault){

    event.preventDefault()

  }else{

   event.returnValue=false;

  }

}  

 

---------------------------------------------------------------------------------------------------

【获取目标对象】

[target 和 srcElement]

function(event){

  event=event || window.event;

  if(event.target){

    return event.target;

  }else if(event.srcElement){

    return event.srcElement;

  }

 

  }

 

javaScript事件机制兼容【整理】

标签:

原文地址:http://www.cnblogs.com/Mesiky/p/5696012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!