元素绑带事件

Posted 澎湃_L

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了元素绑带事件相关的知识，希望对你有一定的参考价值。

一、一个元素绑定多个事件，前面的被后面的覆盖

    <input type="button" value="点击" id="btn">
    <script>
        document.getElementById("btn").onclick=function(){
            console.log("哈哈1");
        };
        document.getElementById("btn").onclick=function(){
            console.log("哈哈2");
        };
        document.getElementById("btn").onclick=function(){
            console.log("哈哈3");
        };
        //最后的点击效果是控制台输出"哈哈3"
    </script>

二、为同一个元素绑定多个事件的方法

  • addEventListener( "不带on事件类型", 事件处理函数 , false)---------谷歌和火狐支持,IE8不支持

    <input type="button" value="点击" id="btn">
    <script>
        //第一种方法:addEventListener(a,b,c)-----abc三个参数
        //参数a:事件的类型-----事件的名字,没有on
        //参数b:事件处理函数-----命名函数和匿名函数都可以
        //参数c:布尔类型,目前写false
        document.getElementById("btn").addEventListener("click",function(){
            console.log("哈哈1");
        },false);
        document.getElementById("btn").addEventListener("click",function(){
            console.log("哈哈2");
        },false);
        document.getElementById("btn").addEventListener("click",function(){
            console.log("哈哈3");
        },false);
        //最后控制台输出结果:哈哈1   哈哈2  哈哈3------谷歌火狐中，IE8不支持
    </script>

  • attachEvent( "有on的时间类型", 时间处理函数 )-------------------------谷歌和火狐不支持,IE8支持

    <input type="button" value="点击" id="btn">
    <script>
        //第二种方法:attachEvent(a,b) 两个参数
        //参数a:事件类型------事件名字有on
        //参数b:事件处理函数-----命名函数或者匿名函数
        document.getElementById("btn").attachEvent("onclick",function(){
            console.log("哈哈1");
        });
        document.getElementById("btn").attachEvent("onclick",function(){
            console.log("哈哈2");
        });
        document.getElementById("btn").attachEvent("onclick",function(){
            console.log("哈哈3");
        });
        //最后控制台输出结果:哈哈1   哈哈2  哈哈3-----IE8中,火狐谷歌不支持
    </script>

三、元素绑定事件的兼容性代码（为任意元素绑定任意的事件）

 

以上是关于元素绑带事件的主要内容，如果未能解决你的问题，请参考以下文章

事件事件流

向元素添加点击事件？

VSCode自定义代码片段5——HTML元素结构

VSCode自定义代码片段5——HTML元素结构

VSCode自定义代码片段5——HTML元素结构

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段