我熟悉jQuery事件处理程序中的命名空间。我可以在特定命名空间中添加事件处理程序:
$('#id').on('click.namespace', _handlerFunction);
然后我可以删除该命名空间中的所有事件处理程序:
$('#id').off('.namespace');
这里的优点是我只能删除此命名空间中的事件,而不是任何应该被保留的用户添加/附加事件。
有没有人有关于如何不使用jQuery,但实现类似结果的提示?
我熟悉jQuery事件处理程序中的命名空间。我可以在特定命名空间中添加事件处理程序:
$('#id').on('click.namespace', _handlerFunction);
然后我可以删除该命名空间中的所有事件处理程序:
$('#id').off('.namespace');
这里的优点是我只能删除此命名空间中的事件,而不是任何应该被保留的用户添加/附加事件。
有没有人有关于如何不使用jQuery,但实现类似结果的提示?
对于仍在寻找的人,我最终创建了一个帮助器单例,它会为我跟踪函数引用。
class EventHandlerClass {
constructor() {
this.functionMap = {};
}
addEventListener(event, func) {
this.functionMap[event] = func;
document.addEventListener(event.split('.')[0], this.functionMap[event]);
}
removeEventListener(event) {
document.removeEventListener(event.split('.')[0], this.functionMap[event]);
delete this.functionMap[event];
}
}
export const EventHandler = new EventHandlerClass();
然后只需导入EventHandler并像这样使用:
EventHandler.addEventListener('keydown.doop', () => console.log("Doop"));
EventHandler.addEventListener('keydown.wap', () => console.log("Wap"));
EventHandler.removeEventListener('keydown.doop');
// keydown.wap is still bound
on
和 off
方法,并能够使用事件命名空间:
var events = {
on(event, cb, opts){
if( !this.namespaces ) // save the namespaces on the DOM element itself
this.namespaces = {};
this.namespaces[event] = cb;
var options = opts || false;
this.addEventListener(event.split('.')[0], cb, options);
return this;
},
off(event) {
this.removeEventListener(event.split('.')[0], this.namespaces[event]);
delete this.namespaces[event];
return this;
}
}
// Extend the DOM with these above custom methods
window.on = Element.prototype.on = events.on;
window.off = Element.prototype.off = events.off;
window
.on('mousedown.foo', ()=> console.log("namespaced event will be removed after 3s"))
.on('mousedown.bar', ()=> console.log("event will NOT be removed"))
.on('mousedown.baz', ()=> console.log("event will fire once"), {once: true});
// after 3 seconds remove the event with `foo` namespace
setTimeout(function(){
window.off('mousedown.foo')
}, 3000)
Click anywhere
我认为您正在寻找 addEventListener 和 removeEventListener。 您还可以定义自定义事件并使用 dispatchEvent 进行触发。
但是,要删除事件侦听器,您将需要保留对事件函数的引用,以便仅删除您想要删除的功能,而不是清除整个事件。
window
上对 mouseup
事件进行命名空间划分,然后只删除其中一个(假设还有其他未命名空间的事件)? - vsync注意:第二种方法需要为每个组EventTarget(HTMLElement)分派事件。其他方法允许单个EventTarget用于事件订阅和分派。