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

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 独有的, 你可以把它放到任意元素里~

使用 js 给 onclick 属性赋值

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

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

元素上设置多个事件监听器 addEventListener

如果希望在一个元素上设置多个事件, 你可能就需要使用 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 既能进行代码解耦, 也能正确移除事件处理器。