发表更新3 分钟读完 (大约429个字)

JavaScript添加点击事件

方法一 使用 onclick 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>

<body>
    <button id="mybutton">点我</button>
</body>
<script>
    var newButton = document.getElementById("mybutton");
    // 绑定 oncclick 事件

    newButton.onclick = function () {
        alert("onclick");
    }
</script>

</html>

运行结果如下

运行结果

方法二 使用 click 方法

click 方法，模拟鼠标点击

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>

<body>
    <button id="mybutton">点我</button>
</body>
<script>
    var newButton = document.getElementById("mybutton");
    newButton.onclick = function () {
        alert("onclick");
    }
    // 直接打开页面就会执行 click 方法，同时会触发上面的 onclick 事件
    // 注意下面的语句不是绑定事件 而是 模拟点击鼠标的动作

    newButton.click(alert("click"))
</script>

</html>

模拟点击鼠标

同时会触发绑定的 onclick 事件

方法三 使用 addEventListener 来绑定事件 （推荐使用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>

<body>
    <button id="mybutton">点我</button>
</body>
<script>
    var newButton = document.getElementById("mybutton");
    // 推荐使用这种方法
    newButton.addEventListener("click",function () {
        alert("addEventListener");
        
    }, false);
</script>

</html>

运行结果：

使用addEventListener()

为什么使用这种方法，以下来自 MDN

addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：

  • 它允许给一个事件注册多个监听器。 特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。
    • 它提供了一种更精细的手段控制listener 的触发阶段。（即可以选择捕获或者冒泡）。
    • 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。

JavaScript添加点击事件

http://yoursite.com/2018/12/22/JavaScript添加点击事件/

作者

Bruce Liu

发布于

2018-12-22

更新于

2022-11-12

许可协议

You need to set install_url to use ShareThis. Please set it in _config.yml.

喜欢这篇文章？打赏一下作者吧

You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

评论

You forgot to set the shortname for Disqus. Please set it in _config.yml.
关注我

链接

最新文章

归档

标签

Linux1
docker2

订阅更新

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×