JavaScript 事件监听用法及其兼容

事件的监听

如果是普通的事件绑定，相同事件类型，只能绑定一个事件处理函数；
如果同一个类型，绑定多个事件处理函数，后绑定的事件会覆盖之前绑定的事件。
如果想同时绑定多个事件处理函数，可以用事件监听解决。

语法规则

标签对象.addEventListener(事件类型 , 事件处理函数，参数3)

事件的获取方式：
		冒泡 : 从子级开始,向父级执行
		捕获 : 从父级开始,向子级执行
第三个参数: true / false(默认值)

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

实例

css样式：

.div1{
    width: 300px;
    height: 300px;
    background: skyblue;
}

.div2{
    width: 200px;
    height: 200px;
    background: orange;
}

.div3{
    width: 100px;
    height: 100px;
    background: blue;
}

HTML：

<div class="div1">
    <div class="div2">
        <div class="div3"></div>
    </div>
</div>

<script>
    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)
    // };
    
    // 事件监听方式
    
    // oDiv1.addEventListener('click' , function(){
    //     console.log(123);
    // });
    
    // oDiv1.addEventListener('click' , function(){
    //     console.log(456);
    // });
    
    // oDiv1.addEventListener('click' , function(){
    //     console.log(789);
    // });
    
    // 使用事件监听的方式,给父子级关系的标签,绑定事件
    oDiv1.addEventListener('click' , function(){
        console.log(1111)
    } , true);
    
    oDiv2.addEventListener('click' , function(){
        console.log(2222)
    } , true);
    
    oDiv3.addEventListener('click' , function(){
        console.log(3333)
    } , true);
</script>

事件监听的兼容方式

语法

普通浏览器：

标签对象.addEventListener(‘事件类型’ , 事件处理函数)

事件类型必须是字符串形式，直接写事件类型名称，不能有on

低版本IE浏览器：

标签对象.attachEvent(‘on事件类型’ , 事件处理函数)

实例

<div id="div">123</div>

<script>
var oDiv = document.getElementById('div');

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


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

事件监听的兼容较麻烦，一般我们用封装函数的形式做兼容处理：

实例

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

// 使用函数的方式,来做兼容处理
myAddEvent(oDiv , 'click' , function(){console.log(123) } );
// 参数1,要绑定的事件对象
// 参数2,要绑定的事件类型
// 参数3,要绑定的事件处理函数

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

事件监听的删除

语法规则

标签对象.removeEventListener(‘事件类型’ , 事件处理函数名称 / 变量名称)

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

实例

<div>123</div>

<script>
    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' , fun4);
    // 不能删除
    oDiv.removeEventListener('click' , function(){console.log('别想删我')});
    
    function fun1(){
        console.log(123);
    }

    function fun2(){
        console.log(456);
    }
    
    
    function fun3(){
        console.log(789);
    }
</script>