转载 

javascript处理事件的一些兼容写法

分类:    630人阅读    IT小君  2017-05-23 10:58

绑定事件

addEventListener:W3C标准写法IE不兼容

attachEvent:兼容IE

注意:1:事件名不同:IE下要加“on“,W3C不加

        2:加载事件的执行顺序不同,W3C按绑定事件的顺序来执行,而IE6,7是后绑定的时间先发生

        3:this的指向,W3C中,绑定函数中的this指向DOM对象,而IE6,7指向WINDOWS对象



var addEvent = function( obj, type, fn ) {
    if (obj.addEventListener)
        obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
        obj["e"+type+fn] = fn;
        obj.attachEvent( "on"+type, function() {
            obj["e"+type+fn]();
        } );
    }
};

另一个实现

var addEvent = (function () { 
    if (document.addEventListener) { 
        return function (el, type, fn) { 
            el.addEventListener(type, fn, false); 
        }; 
    } else { 
        return function (el, type, fn) { 
            el.attachEvent('on' + type, function () { 
                return fn.call(el, window.event); 
            }); 
        } 
    } 
})();

移除事件

var removeEvent = function(obj, type, fn) {
    if (obj.removeEventListener)
        obj.removeEventListener( type, fn, false );
    else if (obj.detachEvent) {
        obj.detachEvent( "on"+type, obj["e"+type+fn] );
        obj["e"+type+fn] = null;
    }
}

加载事件与脚本

var loadEvent = function(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

阻止事件

var cancelEvent = function(event) {
    event = event||window.event
    if (event.preventDefault) {
        event.preventDefault(  );
        event.stopPropagation(  );
    } else {
        event.returnValue = false;
        event.cancelBubble = true;
    }
}

取得事件源对象

相当于Prototype.js框架的Event.element(e)

var getTarget = function(event){
    event = event || window.event;
    var obj = event.srcElement ? event.srcElement : event.target;
    return obj
}


点击广告,支持我们为你提供更好的服务

html5 canvas彩色碎片组合球形旋转动画特效

js+css3抽奖转盘旋转点餐代码

css鼠标跟随文字模糊特效

css+js实现的颜色渐变数字时钟动画特效

现代时尚家具公司网站模板

响应式时尚单品在线商城网站模板

html5 svg夜空中星星流星动画场景特效

有机水果蔬菜HTML5网站模板

HTML5 Canvas竖直流动线条背景动画特效

html5图标下拉搜索框自动匹配代码

jQuery右端悬浮带返回顶部特效

网页设计开发公司网站模板

HTML5数字产品服务公司网站模板

中小型创意设计服务公司网站模板

canvas炫酷鼠标移动文字粒子特效

HTML5现代家居装潢公司网站模板

html5 canvas进度条圆环图表统计动画特效

响应式太阳能能源公司网站模板

响应式咖啡饮品宣传网站模板

小众时尚单品在线电子商务网站模板

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务