快速上手 JavaScript 点击事件click的几种使用方法 (javascript红皮书二刷 - Ch13.2 事件处理程序)

最新推荐文章于 2025-03-14 17:38:01 发布

原创最新推荐文章于 2025-03-14 17:38:01 发布 · 3.8k 阅读

CC 4.0 BY-SA版权

文章标签：

18 篇文章

订阅专栏

本文介绍了JavaScript中处理元素点击事件的不同方式，包括使用onclick属性直接绑定函数及通过addEventListener方法添加多个事件监听器。探讨了不同场景下的适用性和最佳实践。

onclick 属性

当你编写 HTML + JavaScript 使用 button 按钮时往往会看见 onclick 属性, 代码如下：

<button onclick="handleClick()"></button>
<button onclick="this.value = 100"></button>

这意味着当你点击上面的 button 时, 他就会执行 handleClick() 这一串代码, 当然, 下面的按钮也会执行 this.value = 100, 为了解耦代码, 当然是使用上面的方法更好。

<div onclick="handleClick()"></div>

注意到, 这个 onclick 属性并不是 button 独有的, 你可以把它放到任意元素里~

这样是DOM0级的写法, 同时注意到, 在这个函数中 this 将会自动指向当前触发对象, 因为 onclick 此时绑定在了 elem 这个元素上。(上面 👆 也是一样的)

var elem = getElementById("btn")
elem.onclick = function(){
	console.log(this.id) // btn
}

如果希望在一个元素上设置多个事件, 你可能就需要使用 addEventListener 来设置元素上的事件监听器。

var elem = getElementById("btn")
elem.addEventListener("click", function(){
	console.log(this.id) // btn
}, false)

上面的写法使用匿名函数, 会导致 removeEventListener 无法移除事件监听器, 推荐的写法是这样的：

var elem = getElementById("btn")
elem.addEventListener("click", handleBtnClick, false)
elem.removeEventListner("click", handleBtnClick, false)

使用 handleBtnClick 既能进行代码解耦, 也能正确移除事件处理器。 👍