js的点击事件

最新推荐文章于 2024-08-22 23:39:09 发布

赵啸林

最新推荐文章于 2024-08-22 23:39:09 发布

阅读量315

点赞数

分类专栏： JS 文章标签：前端

本文链接：https://blog.csdn.net/weixin_49295874/article/details/117324746

版权

JS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button id="btn" onclick="threeFn()">按钮</button>
    </div>
</body>

</html>
<script type="text/javascript">
    let btn = document.getElementById("btn");

    window.onload = function () {
        // 第一种 通过点击事件
        btn.onclick = function () {
            alert("这是第一种点击方式");
        }

        // 第二种 监听点击事件
        btn.addEventListener('click', function () {
            alert("这是第二中点击方式");
        })

        // 第三种 通过方法响应点击事件
        function threeFn() {
            alert("这是第三种点击方式");
        }

        // 第一种改进 通过点击事件
        myClick("btn", function () {
            alert("点击成功")
        })
    }

    function myClick(idStr, fun) {
        let btn = document.getElementById(idStr)
        btn.onclick = fun
    }
</script>