js：按钮绑定多个事件的三种方法（js，DOM，jQuery）

真实lie

已于 2022-04-27 13:03:53 修改

阅读量7.4k

点赞数 3

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

于 2022-04-27 13:02:46 首次发布

本文链接：https://blog.csdn.net/qq_52824207/article/details/124448387

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript通过`onclick`、DOM的`addEventListener`和jQuery的`click`方法为HTML按钮绑定多个事件。通过实例展示了在不同框架下实现事件处理的技巧。

摘要由CSDN通过智能技术生成

1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件。

2.DOM可以通过事件监听函数addEventListener绑定事件。

3.Jquery可以通过click方法来绑定事件。

完整代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>按钮绑定多个事件</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body style="text-align: center;">
        <h1>按钮绑定多个事件</h1>
        <button id="btn1" onclick="hello();hello();">按钮1</button>
        <button id="btn2">按钮2</button>
        <button id="btn3">按钮3</button>
        <p id="demo-text"></p>
    </body>
    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script>
        function hello(){
            document.getElementById("demo-text").innerHTML += "hello js!<br/>";//注意换行,使用<br>标签而不是\n
        }

        let btn2 = document.getElementById("btn2");//创建btn2对象指向按钮2（对象的“=”不是赋值而是指向，前后是同一个对象）
        btn2.addEventListener("click",hello);//事件监听函数，第一参数是事件，第二个参数是触发事件调用的函数
        btn2.addEventListener("click",() => {
            document.getElementById("demo-text").innerHTML += "hello DOM!<br/>";
        });//第二个参数可以使用箭头函数直接创建一个新的匿名函数

        let btn3 = $("#btn3");
        btn3.click(function(){
            $("#demo-text").append("<p>hello jQuery!</p><br/>");//append是在当前元素后创建新的元素（新的元素作为当前元素的子元素）
        })
        btn3.click(() => {
            $("#demo-text").after("hellp jQuery!");//after是在当前元素后创建新的文本（新的文本在当前元素中）
        })
    </script>
</html>