likes
comments
collection
share

如何用原生 JavaScript 给一个按钮绑定两个 onclick 事件？

作者站长头像
站长
· 阅读数 32

常见事件类型

onclick ondbclick onmouseover onmouseout onfocus onblur onmousemove onmousedown onmouseup onmouseenter onmouseleave

注册事件有两种语法

1.点语法：

  • 语法：事件源.事件类型=事件处理函数 box.onclick=fuction (){}
  • 特点：不能 注册多个同名事件

注册点击事件

<body>
    <button class="btn">按钮</button>
    <script>
        let btn = document.querySelector('.btn')
        btn.onclick = function () {
            alert('我是点语法注册的事件-1')//点击有弹出框
        }
    </script>
</body>

移除点击事件 事件源.onclick=null

<body>
    <button class="btn">按钮</button>
    <script>
        let btn = document.querySelector('.btn')
        btn.onclick = function () {
            alert('我是点语法注册的事件-1')//没有弹出框
        }
        btn.onclick=null
    </script>
</body>

移除事件：变量赋值的原理，先销毁旧值，然后存入新值

无法注册同名点击事件

<body>
    <button class="btn">按钮</button>
    <script>
        let btn = document.querySelector('.btn')
        btn.onclick = function () {
            alert('我是点语法注册的事件-1')//第一个不会弹出
        }
        btn.onclick = function () {
            alert('我是点语法注册的事件-2')//只会弹出第二个
        }
    </script>
</body>

注意，点语法是不能注册多个同名事件的

2.addEventListener()

  • 语法：事件源.addEventListener('事件类型'，事件处理函数)
  • 特点：可以 注册多个同名事件

注册点击事件（可以注册同名点击事件）

<body>
    <button class="btn1">按钮</button>
    <script>
        let btn1 = document.querySelector('.btn1')
        btn1.addEventListener('click', function () {
            alert('我是addEventListener语法注册的事件-1')//先弹出第一个
        });

        btn1.addEventListener('click', function () {
            alert('我是addEventListener语法注册的事件-2')//接着弹出第二个
        });
    </script>
</body>

移除点击事件事件源.removeEventListener('事件类型',事件处理函数)

<body>
    <button class="btn2">按钮</button>
    <script>
        let btn2 = document.querySelector('.btn2')
        let fn = function () {
            alert('我是addEventListener语法注册的具名事件')//不会弹出框
        }
        btn2.addEventListener('click', fn)
        btn2.removeEventListener('click',fn)
    </script>
</body>

注意：只能移除具名事件，无法移除匿名事件