首页 Javascript 正文
188

Javascrip之Event事件在IE与标准DOM之间的差异

  • yiqingpeng
  • 2015-04-26
  • 0
  •  
1、事件流的区别

IE采用冒泡型事件,Netscape采用捕获型事件,而Dom采用先捕获后冒泡型事件
例如:
<body>
<div>
<button>按钮</button>
</div>
</body>
冒泡型事件:button->div->body
捕获型事件:body->div->button
DOM事件:body->div->button->button->div->body(事件会在button上捕获两次?)


2、事件侦听函数的区别 

IE:
[Object].attachEvent("事件类型,例如onclick, 注意不是click", fnHandler);//绑定函数
[Object].detachEvent("事件类型", fnHandler);//解除绑定,突然想到,如果绑定的是匿名函数该如何解绑?
DOM:
[Object].addEventListener("事件类型,如click", fnHandler, bCapture);//绑定函数
[Object].removeEventListener("事件类型", fnHandler, bCapture);//移除绑定
bCapture参数用于设置事件绑定的阶段,true为捕获阶段,false为冒泡阶段


3、事件对象的引用

IE: window.event
DOM: event对象必须作为唯一的参数传递给事件处理函数,且必须是第一个参数。
在JQ中如果没有显示的传递事件参数,可以用arguments[0]得到,IE及其它浏览器都兼容,如下:
$('#button').bind('click',function(){
   alert(arguments[0].type);
});


4、获取目标(target)

IE: oEvent.srcElement;
DOM: oEvent.target;


5、阻止事件默认行为

IE: oEvent.returnValue = false;
DOM: oEvent.preventDefault();
例如屏蔽网页右键菜单
document.body.oncontextmenu = function(oEvent){
   if(document.all){
       oEvent = window.event;//IE
       oEvent.returnValue = false;
   }else{
       oEvent.preventDefault();
   }
}


6、停止事件复制(冒泡)

IE: oEvent.cancelBubble = true;
DOM: oEvent.stopPropagation();

正在加载评论...