处理事件的兼容写法

时间 2019-11-11

标签处理事件兼容写法繁體版

原文原文链接

事件绑定兼容写法：javascript

　　1.普通写法html

<!doctype html>
<title>javascript事件兼容写法</title>
<meta charset="utf-8"/>
<script type="text/javascript">
    var addEvent = function(element,type,callback){
        if(element.addEventListener){
            element.addEventListener(type,callback,false);
        }else if(element.attachEvent){
            element.attachEvent('on' + type,callback)
        }
        
    } 
    
    window.onload = function(){
        addEvent(document.getElementById('parent'),'click',function(event){
            var event = event || window.event;
            var target = event.target || event.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                alert(target.id);
            }
        });
    }
</script>
<ul id="parent">
    <li id="test1">aaaa</li>
    <li id="test2">aaaa</li>
    <li id="test3">aaaa</li>
    <li id="test4">aaaa</li>
    <li id="test5">aaaa</li>
    <li id="test6">aaaa</li>
</ul>

　　2.还能够用闭包的形式来实现java

<!doctype html>
<title>javascript事件兼容写法</title>
<meta charset="utf-8"/>
<script type="text/javascript">
    var addEvent = (function(){
        if(document.addEventListener){
            return function(element, type,callback){
                element.addEventListener(type,callback,false);
            }
        }else{
            return function(element, type,callback){
                element.attachEvent('on' + type,callback);
            }
        }
    })();
    window.onload = function(){
        addEvent(document.getElementById('parent'),'click',function(event){
            var event = event || window.event;
            var target = event.target || event.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                alert(target.id);
            }
        });
    }
</script>
<ul id="parent">
    <li id="test1">aaaa</li>
    <li id="test2">aaaa</li>
    <li id="test3">aaaa</li>
    <li id="test4">aaaa</li>
    <li id="test5">aaaa</li>
    <li id="test6">aaaa</li>
</ul>

事件移除兼容写法：node

　　removeEvent()是用来移除addEventLIstener()的，detachEvent()是用来移除ie8如下attachEvent()事件的。闭包

　　注：要使用removeEvent(detachEvent)移除事件时，addEventLIstener(attachEvent )的执行函数必须使用外部函数，不然没法移除事件函数

<!doctype html>
<title>javascript事件兼容写法</title>
<meta charset="utf-8"/>
<script type="text/javascript">
    var addEvent = (function(){
        if(document.addEventListener){
            return function(element, type,callback){
                element.addEventListener(type,callback,false);
            }
        }else{
            return function(element, type,callback){
                element.attachEvent('on' + type,callback);
            }
        }
    })();
    var removeEvent = function(element, type, callback){
        if(element.removeEventListener){
            element.removeEventListener(type,callback,false);
        }else if(element.detachEvent){
            element.detachEvent('on' + type,callback);
        }
    }
    window.onload = function(){
　　　　　//由于涉及到移除事件，因此事件的执行函数须要使用外部函数
        var myCallback = function(event){
            var event = event || window.event;
            var target = event.target || event.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                alert(target.id);
            }
        }
        addEvent(document.getElementById('parent'),'click',myCallback);
        removeEvent(document.getElementById('parent'),'click',myCallback);
    }
</script>
<ul id="parent">
    <li id="test1">aaaa</li>
    <li id="test2">aaaa</li>
    <li id="test3">aaaa</li>
    <li id="test4">aaaa</li>
    <li id="test5">aaaa</li>
    <li id="test6">aaaa</li>
</ul>

获取事件源兼容写法：spa

var getEvent = function(event){
    event = event || window.event;
    return event.target || event.srcElement;
}

阻止冒泡事件：code

var stopPropagation = function(event){
     if(event.stopPropagation){
         event.stopPropagation();
     }else{
        event.cancelBubble = true;
     }
 }

阻止默认事件：htm

var preventDefault = function(){
     if(event.preventDefault){
         event.preventDefault();
     }else{
         event.returnValue = false;
     }
 }

通用的事件监听函数：　　blog

var Event = {
        addEvent: function(element,type,callback){
            if(element.addEventListener){
                element.addEventListener(type,callback,false);
            }else if(element.attachEvent){
                element.attachEvent('on' + type,callback);
            }
        },
        removeEvent: function(element,type,callback){
            if(element.removeEventListener){
                element.removeEventListener(type,callback,false);
            }else{
                element.detachEvent('on' + type, callback);
            }
        },
        getEvent: function(event){
            return event || window.event;
        },
        getTarget: function(event){
            return event.target || event.srcElement;
        },
        stopPropagation: function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        },
        preventDefault: function(event){
            if(event.prevenDefault){
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        }
    }