Javascript Event事件中IE与标准DOM的比较


1.事件流的区别

IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件
示例:

复制代码 代码如下:

<body>
<div>
<button>点击这里</button>
</div>
</body>


冒泡型事件模型: button->div->body (IE事件流)

捕获型事件模型: body->div->button (Netscape事件流)

DOM事件模型: body->div->button->button->div->body (先捕获后冒泡)

2.事件侦听函数的区别

IE使用:
[Object].attachEvent("name_of_event_handler", fnHandler); //绑定函数
[Object].detachEvent("name_of_event_handler", fnHandler); //移除绑定

DOM使用:
[Object].addEventListener("name_of_event", fnHandler, bCapture); //绑定函数
[Object].removeEventListener("name_of_event", fnHandler, bCapture); //移除绑定

bCapture参数用于设置事件绑定的阶段,true为捕获阶段,false为冒泡阶段。

示例代码:
复制代码 代码如下:

function addEventHandler(object,eventType,fnHandler){
if(object.addEventListener){ //DOM
object.addEventListener(eventType, fnHandler, false);
}else if(object.attachEvent){ //IE
object.attachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=fnHandler;
}
}
function removeEventHandler(object,eventType,fnHandler){
if(object.removeEventListener){ //DOM
object.removeEventListener(eventType, fnHandler, false);
}else if(object.detachEvent){ //IE
object.detachEvent("on"+eventType, fnHandler);
}else{ //others
object["on"+eventType]=null;
}
}
addEventHandler(oDiv,"click",function(){alert("clicked")});


3.事件对象定位(获取)

IE:事件对象是window对象的一个属性event,event只能在事件发生时访问,事件处理函数执行完毕,事件对象被销毁。

示例:
复制代码 代码如下:

document.onclick=function(){
alert(window.event.type);
}

DOM:event对象必须作为唯一的参数传递给事件处理函数,且必须为第一个参数。

示例:
复制代码 代码如下:

document.onclick=function(){
alert(arguments[0].type);
}


4.获取目标(target)
IE:var oTarget=oEvent.srcElement;
DOM:var oTarget=oEvent.target;

5.阻止事件默认行为

IE:oEvent.returnValue=false;
DOM:oEvent.preventDefault();

示例:
复制代码 代码如下:

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


6.停止事件复制(冒泡)
IE:oEvent.cancelBubble=true;
DOM:oEvent.stopPropagation();

示例:

复制代码 代码如下:

button.onclick=function(oEvent){
if(document.all){
oEvent=window.event;
oEvent.cancelBubble=true;
}else{
oEvent.stopPropagation();
}
}

附一个代码测试窗口:(感觉有些时候这种方式比alert()还好用)

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]



相关阅读:
IE hack条件写法
第二章 CSS的应用方式
PHP4实际应用经验篇(2)
关于Blog顶部的滚动导航条代码
javascript提取内容到作为文章简介的代码
如何实现站点的RSS输出
经典的PHPer为什么被认为是草根?
css Hspace 和vspace的图片控制实例
drupal教程:添加drupal模块和主题
ASP3.0高级编程(二十二)
javascript import css实例代码
ASP.NET封装的SQL数据库访问类
在ASP中操作HTTP报头方法分析
用面向对象的方式封装javascript代码
快速导航

Copyright © 2016 phpStudy |