js和jQuery的事件处理程序

最新推荐文章于 2022-09-17 21:07:50 发布

Ivy_ZW

最新推荐文章于 2022-09-17 21:07:50 发布

阅读量372

点赞数 1

分类专栏： jquery javascript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/Ivy_ZW/article/details/79991365

版权

javascript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

前边写过一篇js中的事件处理程序的文章，今天来讲一下如果同一个事件，绑定了多个事件处理程序会怎么样

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <button id="btn1" onclick="fn1();">原生js绑定了两个点击事件</button>
        <button id="btn2" onclick="fn1();">jQuery绑定了两个点击事件</button>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script type="text/javascript">
            var btn1 = document.getElementById("btn1");
            function fn1(){
                alert("HTML事件处理程序");
            }
            btn1.onclick = function(){
                alert("DOM0级的第一个事件处理程序");
            };
            btn1.onclick = function(){
                alert("DOM0级的第二个事件处理程序");
            };
            btn1.addEventListener("click",function(){
                alert("btn1的第一个DOM2级事件处理程序");
            },false);
            btn1.addEventListener("click",function(){
                alert("btn1的第二个DOM2级事件处理程序");
            },false);
            $("#btn2").click(function(){
                alert("btn2第一个事件处理");
            });
            $("#btn2").click(function(){
                alert("btn2第二个事件处理");
            });
            $("#btn2").bind("click",function(){
                alert("bind绑定的第一个事件处理程序");
            });
            $("#btn2").bind("click",function(){
                alert("bind绑定的第二个事件处理程序");
            });
        </script>
    </body>
    </html>