句柄式监听document.getElementById("btn").addEventListener("click",function(){})

小白咚

于 2020-06-23 22:04:00 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_44438307/article/details/133022975

本文介绍了如何使用JavaScript的addEventListener方法，通过句柄方式监听document.getElementById('btn')元素的点击事件，深入理解事件处理在前端开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="div">hello</p>
    <button onclick="demo()">按钮1</button>
    <button id="btn">按钮2</button>
    <button id="btn_many">添加多个句柄事件</button>
    <script>
        // 以前的监听
        function demo(){
            document.getElementById("div").innerHTML = "改变"
        }
        // 句柄式监听
        document.getElementById("btn").addEventListener("click",
            function(){
                alert("句柄监听事件");
            }
        );  
        // 声明多个句柄
        var x = document.getElementById("btn_many");
        x.addEventListener("click",hello);
        x.addEventListener("click",world);
        // 移出句柄
        x.removeEventListener("click",hello);
        function hello(){
            alert("hello")
        }
        function world(){
            alert("world")
        }
    </script>
</body>
</html>