首页 > 其他 > 详细

元素绑带事件

时间:2018-05-03 18:51:01      阅读:202      评论:0      收藏:0      [点我收藏+]

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

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

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

 

元素绑带事件

原文:https://www.cnblogs.com/EricZLin/p/8986781.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!