JSFiddle - React, Tailwind, and code Playground
HTML
下面这个文字只能被点击一次, 因为点击事件的回调执行后移除了事件
<p style="color:red">
click me!
</p>
JavaScript
// 封装一个addListener操作
const dom = {
addListener (target, eventType, handler) {
if (target.addEventListener) {
target.addEventListener(eventType, handler, false)
return {
remove: target.removeEventListener.bind(target, eventType, handler, false)
}
} else if (target.attachEvent) {
target.attachEvent(`on${eventType}`, handler, false)
return {
remove: target.detachEvent.bind(target, `on${eventType}`, handler, false)
}
}
}
}
// 绑定事件
const listener = dom.addListener(document.querySelector('p'), 'click', ()=>{
document.querySelector('p').innerHTML = new Date()
// 解绑事件
listener.remove()
})