JavaScript----addEventListener与onclick

最新推荐文章于 2024-04-08 12:38:14 发布

maidu_xbd

最新推荐文章于 2024-04-08 12:38:14 发布

阅读量267

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/maidu_xbd/article/details/101164514

版权

JavaScript 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

onclick: onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的。

执行以下代码，点击按钮弹出“onclick3”

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>

<body>
    <div>
        <button type="button">点我</button>
    </div>
    <script>
    window.onload = function() {
        var btn = document.getElementsByTagName("button")[0];
        // onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的。
        btn.onclick = function() {
            alert("onclick1");
        }
        btn.onclick = function() {
            alert("onclick2");
        }
        btn.onclick = function() {
            alert("onclick3");
        }

    }
    </script>
</body>

</html>

addEventListener: 可以先后运行, 不会被覆盖, 它允许给一个事件注册多个监听器，按顺序执行。

执行以下代码，点击按钮，依次弹出“addEventListener1”、“addEventListener2”、“addEventListener3”

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>

<body>
    <div>
        <button type="button">点我</button>
    </div>
    <script>
    window.onload = function() {
        var btn = document.getElementsByTagName("button")[0];
      // addEventListener可以先后运行, 不会被覆盖, 它允许给一个事件注册多个监听器，按顺序执行
        btn.addEventListener("click", function() {
            alert("addEventListener1")
        })
        btn.addEventListener("click", function() {
            alert("addEventListener2")
        })
        btn.addEventListener("click", function() {
            alert("addEventListener3")
        })
    }
    </script>
</body>

</html>

使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

maidu_xbd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript----addEventListener与onclick

onclick: onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的。执行以下代码，点击按钮弹出“onclick3”<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" conten...
复制链接

扫一扫