«

addeventlistener的兼容性写法

emer 发布于 2018-5-7 10:49   2244 次阅读      

   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);
            }
        });


    }





    闭包：

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