addEventListener 事件监听器 冒泡事件）

Posted 2020-10-09 Me*淡定

addEventListener 事件监听器 (冒泡事件）

 

1、后面绑定的事件照样会执行

2、不会被覆盖

3、调用者是事件源but.addEventListener

4、参数1，事件名（不带on 点击，移开）("click",fn1)

5、参数2执行函数("click",fn1)

6、参数3事件名(捕获或者冒泡)

7、火狐谷歌IE9+ 支持addEventListener

 var but=document.getElementsByTagName("button")[0];
    //addEventListener 事件监听器
    //原事件被执行的时候，后面的事件也照样被执行 
    // 第一次执行的事件不会被第二次执行事件沉淀掉
    but.addEventListener("click",fn1);
    but.addEventListener("click",fn2);
    function fn1(){
        console.log("鹅鹅鹅，曲项向天歌")
    }
    function fn2(){
        console.log("白毛浮绿水，红掌拨清波")
    }

 

8、IE678支持attachevent

but.attachEvent("onclick",fn2)

事件监听器兼容性写法

 var but=document.getElementsByTagName("button")[0];
    function fn1(){
        console.log("鹅鹅鹅，曲项向天歌")
    }
    function fn2(){
        console.log("白毛浮绿水，红掌拨清波")
    }
    //没有赋值返回空，也就是false 有值返回true
    //console.log(but.addEventListener);
    //兼容写法
    EventListen={
        EventListener:function (stl,fn,ele) {
            if(stl.addEventListener){
                stl.addEventListener(ele,fn)
            }else if(stl.attachEvent){
                stl.attachEvent("on"+ele,fn)
            }else{
                stl["on"+ele]=fn
            }
        }
    }
    //调用
    EventListen.EventListener(but,fn1,"click");
    EventListen.EventListener(but,fn2,"click")