js事件兼容处理

Posted 2020-10-14 CSS is awesome

 

 

var eventUtil = {
    bindEvent: function(el, type, target, callback, popgation) {
        /**
         * @author zhangtian
         * @date 2017/11/16
         * @desc 标准浏览器与ie事件兼容处理
         * @augments el:事件源 type事件类型 callback回调函数 popgation是否冒泡
         * @todo ie8下调用stopPropagation 无效，知道原因的园工请留言告知或者发邮件给我，谢谢！！！
         */
        var caption = caption || true; //默认为冒泡

        //如果不使用事件代理，target置空
        if((typeof target) == "function") {
            callback = target;
            target = null;
        }

        if(el.addEventListener) {
            el.addEventListener(type, function(e) {
                if(target) {
                    console.log("事件代理");
                    if(e.target == target) {
                        callback.call(target, e); //改变this指向，如果不用call，this指向window
                    }
                } else {
                    console.log("普通事件");
                    callback.call(el, e); //改变this指向，如果不用call，this指向window
                }
            }, popgation);
        } else if(el.attachEvent) {
            el.attachEvent("on" + type, function() {
                var e = window.event;
                if(target) {
                    console.log("事件代理");
                    if(e.target == target) {
                        callback.call(target, e); //改变this指向，如果不用call，this指向window
                    }
                } else {
                    console.log("普通事件");
                    callback.call(el, e); //改变this指向，如果不用call，this指向window
                }
            });
        }
    },
    stopPropagation: function(e) {
        var event = e || window.event;
        if(event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble;
        }
    },
    preventDefault: function(e) {
        var event = e || window.event;
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
};