JavaScript中事件的监听

事件的监听
作用：
如果是普通的事件绑定相同事件类型，只能绑定一个事件处理函数
如果同一个类型绑定多个事件处理函数，后绑定的事件会覆盖之前绑定的事件

语法:
标签对象.addEventListener(事件类型 , 事件处理函数)
第三个参数: true / false(默认值)

事件的获取方式
冒泡 : 从子级开始，向父级执行
捕获 : 从父级开始，向子级执行

浏览器默认都是冒泡的执行方式
可以通过 addEventListener 第三个参数来设定获取方式
默认值 false 是 冒泡方式 true是捕获方式
一般实际项目中不定义第三个参数，就使用默认方式
低版本IE只支持冒泡，不支持捕获。不会报错，只会按照冒泡的顺序执行
今后给标签绑定事件，推荐都使用事件监听方式

 <div class="div1">
        <div class="div2">
            <div class="div3"></div>
        </div>
</div>
 var oDiv1 = document.querySelectorAll('div')[0];
 var oDiv2 = document.querySelectorAll('div')[1];
 var oDiv3 = document.querySelectorAll('div')[2];

//普通事件绑定方式，只会执行最后一个绑定的事件处理函数
oDiv1.onclick = function(){
console.log(123)
}

oDiv1.onclick = function(){
console.log(456)
}

oDiv1.onclick = function(){
console.log(789)
}
//点击div只会输出789

 // 事件监听方式
oDiv1.addEventListener('click' , function(){
console.log(123);
})

oDiv1.addEventListener('click' , function(){
console.log(456);
})

oDiv1.addEventListener('click' , function(){
console.log(789);
})
//123、456、789都会执行输出

// 使用事件监听的方式给父子级关系的标签绑定事件
        oDiv1.addEventListener('click' , function(){
            console.log(1111)
        } , true) //点击输出1111

        oDiv2.addEventListener('click' , function(){
            console.log(2222)
        } , true) //点击输出1111和2222

        oDiv3.addEventListener('click' , function(){
            console.log(3333)
        } , true) //点击输出1111和2222和3333

兼容方式：
▲普通浏览器
标签对象.addEventListener(‘事件类型’ , 事件处理函数)
事件类型必须是字符串形式,直接写事件类型名称,不能有on
▲低版本IE浏览器
标签对象.attachEvent(‘on事件类型’ , 事件处理函数)

var oDiv = document.getElementById('div');

        // 一般的监听方式
oDiv.addEventListener('click' , function(){
console.log(123);
})

        // 低版本IE浏览器
oDiv.attachEvent('onclick' , function(){
console.log(456);
})   

使用函数的方式来做兼容处理
参数1要绑定的事件对象
参数2要绑定的事件类型
参数3要绑定的事件处理函数
如果是特殊的事件类型需要绑定，可以再单独写判断

var oDiv = document.getElementById('div');
myAddEvent(oDiv , 'click' , function(){console.log(123) } );

function myAddEvent(ele,type,fun){
            if(ele.addEventListener){
                ele.addEventListener(type,fun)
            }else{
                ele.attachEvent( 'on'+type , fun)
            }
        }

事件监听的删除：

 var oDiv = document.querySelector('div');
        var fun4 = function(){
            console.log('abc');
        }

        oDiv.addEventListener('click' , fun1);
        oDiv.addEventListener('click' , fun2);
        oDiv.addEventListener('click' , fun3);
        oDiv.addEventListener('click' , fun4);
        oDiv.addEventListener('click' , function(){console.log('别想删我')});

        // 可以删除
        oDiv.removeEventListener('click' , fun1);
        oDiv.removeEventListener('click' , fun2);
        oDiv.removeEventListener('click' , fun3);
        oDiv.removeEventListener('click' , fun4);
        // 不能删除
        oDiv.removeEventListener('click' , function(){console.log('别想删我')});

        // 绑定时必须是函数名称，或者存储函数的变量名称，才能删除
        // 绑定时，如果直接定义函数，是不能删除的
        // 原因: 两个函数程序相同，但是地址不同

        function fun1(){
            console.log(123);
        }

        function fun2(){
            console.log(456);
        }

        function fun3(){
            console.log(789);
        }