attachEvent(detachEvent) 和 addEventListener(removeEventListener)

 1,介绍添加多个两种方法

考虑到不同的人写同一个页面,有事后我们要为同一个元素添加多个事件,这些事件可能是相同的,因此我们有必要为一个元素同时添加多个元素

attachEvent  和 addEventListener 可以同时添加多个事件,

attachEvent 谷歌,火狐Ie9版本以上大的浏览器都不支持     ie8以下的版本不支持

addEventListener 谷歌,火狐Ie9版本以上大的浏览器都支持  ie8以下版本不支持   (需要调兼容)\

对象.attachEvent (参数1,参数2),  参数1为事件类型 比如onclick (需要带on的事件) 参数2 为事件处理函数

 document.getElementById('btn').attachEvent('onclick',function(){
        alert('添加第一个事件');
    });
   document.getElementById('btn').attachEvent('onclick',function(){
        alert('添加第二个事件')
    });

对象.addEventListener(参数1,参数2,参数3),参数1为不带on的事件名字,  参数2位事件处理函数,参数三 一般为false

document.getElementById('btn').addEventListener('click',function(){
         alert('添加第一个事件')
     });
document.getElementById('btn').addEventListener('click',function(){
         alert('添加第二个事件')
     });

2,因为这两种方式支持的浏览器不同因此需要调兼容

  //为任意元素绑定任意事件
    function addEventListener(ele ,type,fn){//ele为元素,type为事件? fn为事件处理函数
        // 判断浏览器是不是支持
        if(ele.addEventListener){
            ele.addEventListener(type,fn,false);

        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,fn);
        }
    }

    addEventListener(document.getElementById('btn'),'click',function(){
        alert('创建了一个点击事件');
    });
    addEventListener(document.getElementById('btn'),'click',function(){
        alert('创建了一个点击事件');
    });
    addEventListener(document.getElementById('btn'),'click',function(){
        alert('创建了一个点击事件');
    });

3,解绑事件句柄

removeEventListener和detachEvent 分别对应解绑上面两种方式创建的事件句柄

 <input type="button" value="按钮" id="btn">
    <input type="button" value="解绑" id="btn1">
    <script src="public.js"></script>

    <script>
        //写一个通过获取Id获取元素的函数
        function my$(id){
            var obj = document.getElementsById(id);
            return obj; 
        }


        // my$('btn').addEventListener('click',function(){
        //     alert('添加第一个事件')
        // });

        //第一种解绑事件的方式
        // my$('btn1').onclick = function(){
        //     my$('btn').onclick = '';//解绑事件
        // }

        //第二种添加监听事件  removeEventListener
        function f1(){
            alert('添加了事件1');
        }
        function f2(){
            alert('添加了事件2');
        }
        // my$('btn').addEventListener('click',f1,false);
        // my$('btn').addEventListener('click',f2,false);
        //
        // //点击解绑按钮  解绑第一个事件
        // my$('btn1').onclick = function(){
        //     my$('btn').removeEventListener('click',f1,false);
        // }


        //第三种 detachEvent
        my$('btn').attachEvent('onclick',f1);
        my$('btn').attachEvent('onclick',f2);
        //点击解绑按钮  解绑第一个事件
        my$('btn1').onclick = function(){
            my$('btn').detachEvent("onclick",f1);
        };



    </script>

注意上面:移除句柄事件,只能移除命名创建的函数,不能移除匿名创建的函数, 以为我们无法找到匿名函数在内存中的位置,就无法移除事件处理函数.

4,封装解绑事件函数

<input type="button" value="按钮" id="btn">
<input type="button" value="解绑" id="btn1">

<script>
     //写一个通过获取Id获取元素的函数
        function my$(id){
            var obj = document.getElementsById(id);
            return obj; 
        }

    //任意元素.任意的事件,处理函数
    function addEventListener(ele,type,fn){
        if(ele.addEventListener){
             ele.addEventListener(type,fn,false);
        }else if(ele.attachEvent){
            ele.attachEvent('on'+type,fn);
        }else {
            ele['on'+type] = fn;  //同过Key 来获取value
        }
    }


    //封装解绑任意事件的函数
    function removeEvent(ele,type,fn){
        if(ele.removeEventListener){
            ele.removeEventListener(type,fn);
        }else if(ele.detachEvent){
            ele.detachEvent('on'+type,fn);
        }else{
            ele['on'+type] = '';
        }
    }


    //首先为按钮创建几个事件
    function f1(){
        alert("第一个点击事件");
    }
    function f2(){
        alert("第二个点击事件");
    }

    addEventListener(my$('btn'),'click',f1);
    addEventListener(my$('btn'),'click',f2);
 //点击按钮解绑事件
    my$('btn1').onclick = function(){
        removeEvent(my$('btn'),'click',f1);//解绑第一个事件
    }


</script>