ie和dom事件流的区别
1、IE采用冒泡型事件,DOM使用先捕获后冒泡型事件,Netscape使用捕获型事件
<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); //谷歌也可以打印出对应的事件对象,火狐无法识别window.event }
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(); } }
7、
this问题: IE6-8中当方法执行的时候,方法中的this不是当前的元素box,而是window。