javaScript跨浏览器事宜处置惩罚顺序

2024年1月8日 165次阅读 来源: 云贤力

最近在浏览javascript高等顺序设计，事宜这一块照样有许多东西要学的，就把一些思索和总结记录下。
在事宜处置惩罚，事宜对象，阻挠事宜的流传等要领或对象存在着浏览器兼容性问题，开辟过程当中最好编写成一个通用的事宜处置惩罚东西。

(function(){
    var EU = {};
    //...
    //在这里增加一些通用的事宜处置惩罚要领
    //...
    window.EventUtil = EU;
})();

事宜处置惩罚顺序

事宜的绑定主要为IE8以下浏览器做兼容处置惩罚：

IE8以下只支撑事宜冒泡
IE事宜处置惩罚运用attachEvent detachEvent

绑定事宜

EU.addHandler = function(element,type,handler){
    //DOM2级事宜处置惩罚，IE9也支撑
    if(element.addEventListener){
        element.addEventListener(type,handler,false);
    }
    else if(element.attachEvent){
        //type加'on'
        //IE9也能够如许绑定
        element.attachEvent('on' + type,handler);
    }
    //DOM0级事宜处置惩罚步，事宜流也是冒泡
    else{
        element['on' + type] = handler;
    }
};

作废绑定事宜

和绑定事宜的处置惩罚基础一致，有一个注重点：

传入的handler必需与绑定事宜时传入的雷同（指向同一个函数）

EU.removeHandler = function(element,type,handler){
    if(element.removeEventListener){
        element.removeEventListener(type,handler);
    }
    else if(element.attachEvent){
       element.detachEvent('on' + type,handler);
    }
    else{
        //属性置空就能够
        element['on' + type] = null;
    }
};

事宜对象

注重点：

IE下event是全局对象，经由过程window.event获得

EU.getEvent = function(event){
    return event || window.event;
}

事宜的目的

注重点:

IE下经由过程attachEvent绑定事宜，内部this并不是触发事宜的DOM,而是window;
经由过程目的对象来猎取DOM节点，IE下是srcElement属性，等同于其他浏览器的target属性

EU.addTarget = function(event){
    return event.target || event.srcElement;
}

阻挠默许事宜

EU.preventDefault = function(event){
    if(event.preventDefault){
        event.preventDefault();
    }
    //IE下处置惩罚
    else{
        event.returnValue = false; //默许为true
    }
}

关于事宜默许行动

阻挠事宜流传

EU.stopPropagation = function(event){
    if(event.stopPropagation){
        event.stopPropagation();
    }
    //IE下处置惩罚
    else{
        event.cancelBubble = true;//默许为false，注重辨别于returnValue
    }
}

注重点：

阻挠的是DOM层级间的事宜流传

比方：关于一个DOM元素，同时绑定捕捉事宜与冒泡事宜，假如在捕捉阶段运用stopPropagation,不会阻断冒泡事宜的实行；(事宜捕捉早于事宜冒泡)

Demo地点：http://jsfiddle.net/0sfck15b/

假如对子元素和父元素以冒泡情势都绑定’click’事宜，在子元素的事宜处置惩罚中运用stopPropagation阻挠事宜流传,父元素绑定的click事宜不会实行。
Demo地点：http://jsfiddle.net/av6yebsw/

上面的划掉的处所明白有误，更正下。上面的demo中事宜的实行都发作了目的阶段,事宜对象event的eventPhase属性用来示意事宜处置惩罚发作在事宜流哪一个阶段。
对应关联 1：捕捉阶段,2: 处于目的,3: 冒泡阶段
另有一点:

目的阶段并不一定先发作捕捉阶段所绑定的事宜,先绑定先实行

demo演示： http://jsfiddle.net/h52xwkrh/
但稳定的是对同一个DOM不管在捕捉阶段照样在冒泡阶段运用ev.preventDefault()，都不会阻挠另一个事宜实行

迎接议论交换！假如文章对你有协助，点下面的引荐勉励下呗(๑>؂<๑）

    原文作者：云贤力
    原文地址: https://segmentfault.com/a/1190000003492867
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞