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。



 

posted @ 2017-05-04 15:17  蜗牛不小  阅读(603)  评论(0编辑  收藏  举报