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);
    }

四.事件监听到demo

<div>123</div>

<script>
    // var fun2 = function(){
    //     console.log(789);
    // }

    // var oDiv = document.querySelector('div');
    // oDiv.addEventListener('click' , function(){
    //     console.log(123);
    // })

    // 必须是绑定的函数名称,或者存储函数的变量名称(此时不能带参数，会直接调用函数)
    // oDiv.addEventListener('click' , fun1);

    // oDiv.addEventListener('click' , fun2);

    // function fun1(){
    //     console.log(456);
    // }

    // 移除事件处理函数,也是移除的函数名称/变量名称
    // oDiv.removeEventListener('click' , fun1);

    // 如果函数执行时,有参数,就不能直接赋值函数名称
    // 因为函数执行时是需要赋值实参的



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

    // 没有赋值参数,JavaScript程序,会自动把形参当做是事件对象,存储事件对象数据
    // 只给第一个形参存储,之后的形参没有内容,不执行 会报错
    // oDiv.addEventListener('click' )   

    // 正确的绑定方式

    // 需要删除
    // 定义一个函数,在这个函数中,调用带有参数函数
    // 给标签绑定的是这个函数,删除的也是这个函数，而这个函数是单独定义的，此时要绑定函数
    // 不可以直接定义在函数中，因为存储的地址是不同的
    oDiv.addEventListener( 'click' , f ); 

    oDiv.removeEventListener( 'click' , f ); 

    // 如果不需要删除,就像昨天写的,可以直接定义在函数中
    
    oDiv.addEventListener( 'click' , function(){
        fun1('张三' , '李四');
    } ); 


    function f(){
        fun1('张三' , '李四')
    }


    function fun1(str1,str2){
        console.log(str1,str2)
    }


</script>