[JS] 怎样实现非HTML元素的事件委托？

Question

打个比方：

const xhr1 = new XMLHttpRequest();
const xhr2 = new XMLHttpRequest();

通行的做法是分别给两个xhr添加事件监听器，但如果事件监听器都相同的话，非常繁琐而且容易出错。

所以我想到了DOM树上的事件委托，似乎也是用来处理这种监听器相同的场景的。但是对于不在DOM树上的非HTML元素，请问应该怎么做？

parent.addEventListener
// parent写啥？
EventTarget.all([xhr1, xhr2]).addEventListener
// 存在类似的函数吗？

可能这么解释更好一点，我想要的是Promise.all的事件版，或者Observable.merge的所有事件版，或者能达成相同功能的方法或hack。请问应该怎么做？

多谢回答。

Answer 1

事件委托的基础是“事件冒泡机制”，只有 DOM 树有这个机制，别的东西没有，所以是没有办法委托的。

但是曲线的方案也有，就是复写原生对象，把你的东西插进去。但是非常不建议你这样做，基本上修改原生对象的都没啥好下场（会给其它库的使用带来兼容问题）。

当然，你可以自己扩展一个类出来做这些事情，那就随便你怎么搞了。

Answer 2

function myEvent() {
    this.tasks = [];
    this.on = (name, cb) => {
        this.tasks.push({ name, cb })
    }

    this.emit = (name) => {
        let ts = this.tasks.filter((t) => t.name == name)
        ts.forEach(({ cb }) => { cb(); })
    }
}

let test = new myEvent();
test.on('hhh', () => { console.log('do something') })

setTimeout(() => {
    test.emit('hhh')
}, 1000)

不知道你是不是这个意思，如果是的话随便自己怎么写的吧。

Answer 3

事件委托又称事件代理， 主要处理的就是多个重复数据问题。 事件委托一般选择给他的父元素绑定事件，然后通过event.target进行判断 最后给你想要的绑定类或者其他之类的