http://www.jb51.net/article/23168.htm
说是IE与DOM的比较，其实还是浏览器之间的比较，众多的浏览器中，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()还好用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
div{ margin:0px auto;}
#txt1{ font-size:14px; padding:2px 5px;}
p{margin:0px auto; width:400px;}
</style>
<title>Javascript事件测试</title>
</head>
<body>
<div style="width:100px; height:60px; background-color:#333333; color:#FFFFFF; padding:5px;" onmouseover="handleEvent(event)"
onmouseout="handleEvent(event)"
onmousedown="handleEvent(event)"
onmouseup="handleEvent(event)"
onclick="handleEvent(event)"
ondblclick="handleEvent(event)" id="div1">Mouse Here</div>
<p><textarea id="txt1" rows="15" cols="50"></textarea><a href="javascript:clear()">Clear</a></p>
<script type="text/javascript">
function handleEvent(oEvent){
var oTextbox=document.getElementById("txt1");
oTextbox.value+=">>>>"+oEvent.type+"\n";
//oTextbox.value+="\n>>>>target is "+(oEvent.target||oEvent.srcElement).id;
//oTextbox.value+="\n>>>>at ("+oEvent.clientX+","+oEvent.clientY+") in the client";
//oTextbox.value+="\n>>>>at ("+oEvent.screenX+","+oEvent.screenY+") on the screen";
//oTextbox.value+="\n>>>>button down is"+oEvent.button;
var arryKeys=[];
if(oEvent.shiftKey){
arryKeys.push("Shift");
}
if(oEvent.ctrlKey){
arryKeys.push("Ctrl");
}
if(oEvent.altKey){
arryKeys.push("Alt");
}
if(arryKeys.length>0){oTextbox.value+=">>>>keys down are "+arryKeys+"\n";}
oTextbox.scrollTop=oTextbox.scrollHeight-oTextbox.offsetHeight;
}
function clear(){document.getElementById("txt1").value="";}
</script>
</body>
</html>
浙公网安备 33010602011771号