JS-事件的监听

一.事件的监听

// 作用:
// 如果是普通的事件绑定,相同事件类型,只能绑定一个事件处理函数
// 如果同一个类型,绑定多个事件处理函数,后绑定的事件会覆盖之前绑定的事件
// 语法:
// 标签对象.addEventListener(事件类型 , 事件处理函数)
// 第三个参数: true / false(默认值)

// 事件的获取方式
// 冒泡 : 从子级开始,向父级执行
// 捕获 : 从父级开始,向子级执行 -（监听）

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

// 今后给标签,绑定事件,推荐都使用 事件监听方式

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)

二.事件监听的兼容方式

<div id="div">123</div>
<script>
    // 兼容方式

    // 普通浏览器
    // 标签对象.addEventListener('事件类型' , 事件处理函数)
    // 事件类型必须是字符串形式,直接写事件类型名称,不能有on

    // 低版本IE浏览器
    // 标签对象.attachEvent('on事件类型' , 事件处理函数)
    // IE不能用querySelector，所以用getElementById
    // 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)
        }
    }

三.事件监听的删除

<div>123</div>
<script>
    var oDiv = document.querySelector('div');
    var fun4 = function(){
        console.log('abc');
    }

    oDiv.addEventListener('click' , fun1);
    oDiv.addEventListener('click' , function(){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);
    }