[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

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 2

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