addEventListener 事件监听器 冒泡事件)

Posted Me*淡定

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了addEventListener 事件监听器 冒泡事件)相关的知识,希望对你有一定的参考价值。

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")

 

 

以上是关于addEventListener 事件监听器 冒泡事件)的主要内容,如果未能解决你的问题,请参考以下文章

事件冒泡和事件捕获

js中addEventListener第三个参数涉及到的事件捕获与冒泡

第十一章-js事件

passive 的事件监听器

JavaScript的事件监听捕获和冒泡

事件监听器