那里! 我在像JQUERY
一样创建one
函数时遇到了问题。
这是操作: https://jsfiddle.net/77yzLt6v/
一次性执行事件
.HTML:
<div id="justOnce">click me!</div>
function one(dom, event, callback) {
dom.addEventListener(event, function(e) { // add event
this.removeEventListener(event, callback); // remove it
});
}
one(document.getElementById("justOnce"), "click", function() {
alert("this alert only show once time");
});
我的代码有什么问题?
提前感谢...
代码绑定一个事件处理程序,该处理程序将callback
作为事件处理程序删除。
唯一的问题是...您从未将callback
绑定为事件处理程序。
你想要更多这样的东西:
function one(dom, event, callback) {
function handler(e) {
callback.call(this, e);
this.removeEventListener(event, handler);
}
dom.addEventListener(event, handler);
}
即
- 您需要致电
callback
- 您需要删除实际绑定的事件处理程序
新标准支持此功能,但尚未在任何浏览器中工作(caniuse.com)
window.addEventListener('resize', console.log, {once: true})
多填充:
;(function(){
let p = document.createElement('p')
let count = 0
let event = new CustomEvent('x')
p.addEventListener('x', () => {i++})
p.dispatchEvent(event)
p.dispatchEvent(event)
if (i != 2) return
for (let obj of [Window, Element]) {
let orig = obj.prototype.addEventListener
function addEventListener(type, callback, opts) {
let args = Array.from(arguments)
if(opts && opts.once) {
function handler(e) {
callback.call(this, e)
this.removeEventListener(type, handler)
}
args[1] = handler
}
orig.apply(this, args)
}
obj.prototype.addEventListener = addEventListener
}
}())