處理事件的兼容寫法

時間 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;
            }
        }
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。