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

1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件。2.DOM可以通过事件监听函数addEventListener绑定事件。3.Jquery可以通过click方法来绑定事件。完整代码：<!DOCTYPE html><html lang="en"><head><title>按钮绑定多个事件</title><

真实lie

7513人浏览 · 2022-04-27 13:02:46

真实lie · 2022-04-27 13:02:46 发布

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>