js事件兼容处理

js封装事件处理函数,兼容ie,支持事件代理

var eventUtil = {
    bindEvent: function(el, type, target, callback, popgation) {
        /**
         * @author zhangtian
         * @date 2017/11/16
         * @desc 标准浏览器与ie事件兼容处理
         * @augments el:事件源 type事件类型 target事件代理元素 callback回调函数 popgation是否冒泡
         */
        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.srcElement == 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 = true;
        }
    },
    preventDefault: function(e) {
        var event = e || window.event;
        if(event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
};

 

posted @ 2017-11-16 11:40  zt123123  阅读(246)  评论(0编辑  收藏  举报