快速上手 JavaScript 点击事件click的几种使用方法 (javascript红皮书二刷 - Ch13.2 事件处理程序)
文章目录
- onclick 属性
- 使用 js 给 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 独有的, 你可以把它放到任意元素里~
使用 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 既能进行代码解耦, 也能正确移除事件处理器。