• 处理事件的兼容写法


    事件绑定兼容写法:

      1.普通写法

    <!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.还可以用闭包的形式来实现

    <!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>

    事件移除兼容写法:

      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>

    获取事件源兼容写法:

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

    阻止冒泡事件:

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

    阻止默认事件:

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

     通用的事件监听函数:  

    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;
                }
            }
        }
  • 相关阅读:
    [POI2014]FarmCraft
    [POI2014]Solar Panels
    Luogu P2824 [HEOI2016/TJOI2016]排序
    CF903G Yet Another Maxflow Problem
    CF901C Bipartite Segments
    CF749E Inversions After Shuffle
    ARC068C Snuke Line
    BZOJ3747 [POI2015]Kinoman
    SA-IS
    简单字符串
  • 原文地址:https://www.cnblogs.com/yangkangkang/p/5646416.html
走看看 - 开发者的网上家园