ie和dom事件流的区别

最新推荐文章于 2019-03-13 19:35:37 发布

dianque0207

最新推荐文章于 2019-03-13 19:35:37 发布

阅读量198

点赞数

原文链接：http://www.cnblogs.com/hongsonz/p/6807294.html

版权

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.οnclick=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.οncοntextmenu=function(oEvent){

　　if(document.all){

　     oEvent=window.event;
        oEvent.returnValue=false;

    }else{

        oEvent.preventDefault();

    }
}

6.停止事件复制（冒泡）

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

示例：

　　复制代码代码如下:

button.οnclick=function(oEvent){

    if(document.all){

        oEvent=window.event;
        oEvent.cancelBubble=true;

    }else{

        oEvent.stopPropagation();

    }
}

7、

　　this问题: IE6-8中当方法执行的时候，方法中的this不是当前的元素box，而是window。

转载于:https://www.cnblogs.com/hongsonz/p/6807294.html