JavaScript 事件监听用法及其兼容

Bertha 。 2023-07-21 06:20 25阅读 0赞

# 事件的监听 #

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

### 语法规则 ###

**标签对象.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>