使用原生js给一个按钮绑定两个onclick事件

原创于 2025-04-14 08:00:30 发布 · 338 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

收录于

在原生JavaScript中，给一个按钮绑定两个onclick事件可以通过addEventListener方法来实现。addEventListener方法允许你为同一个元素添加多个同类型的事件处理器，而不会相互覆盖。下面是一个示例，展示了如何给一个按钮绑定两个onclick事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button with Two Onclick Events</title>
</head>
<body>

<button id="myButton">Click Me</button>

<script>
    // 获取按钮元素
    var button = document.getElementById('myButton');

    // 绑定第一个onclick事件
    button.addEventListener('click', function() {
        alert('First onclick event triggered!');
    });

    // 绑定第二个onclick事件
    button.addEventListener('click', function() {
        alert('Second onclick event triggered!');
    });
</script>

</body>
</html>