js 事件监听 兼容浏览器

js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener

               删除事件监听 ie 用 detachEven                                 removeEventListener

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        /*问题：我们可不可以对同一对象的同一事件绑定多个处理程序？
        dom.onclick = function fn1() {}
        dom.onclick = function fn2() {}

        答：可以，采用事件监听的方式*/
        // ie版
   /*     window.onload= function () {
            document.getElementById("img1").attachEvent('onclick',function(){
                alert(111);
            });
            document.getElementById("img1").attachEvent('onclick',function(){
                alert(222);
            });
        }*/
        // w3c版
  /*      window.onload= function () {
            document.getElementById("img1").addEventListener('click',function(){
                alert(111);
            });
            document.getElementById("img1").addEventListener('click',function(){
                alert(222);
            });
        }*/

        function $(id){
            return document.getElementById(id);
        }
        function fn1(){
            alert(111);
        }
        function fn2(){
            alert(222);
        }
        //事件兼听 兼容浏览器版
        function addEvent(obj,type,callback){
            if(obj.addEventListener){
                obj.addEventListener(type,callback);   //w3c
            }else{
                obj.attachEvent('on'+type,callback);  // ie   onclick 多了一个on
            }
        }
        //删除事件监听 兼容浏览器版
        function removeEvent(obj,type,callback){
            if(obj.removeEventListener){      //obj.removeEventListener 这里没有（） 【重点】
                obj.removeEventListener(type,callback);   //w3c
            }else{
                obj.detachEvent('on'+type,callback);  // ie   onclick 多了一个on
            }
        }

        window.onload= function () {
            addEvent($("img1"),'click',fn1);
            addEvent($("img1"),'click',fn2);
            $("button1").onclick=function(){
                removeEvent($("img1"),'click',fn1);
            }
        }



    </script>
</head>
<body>
<img src="image/1.jpg" id="img1"/>
<input type="button" id="button1">
</body>
</html>

 

posted @ 2016-01-28 11:25  gyz418  阅读(198)  评论(0)    收藏  举报