[JS] how to implement event delegation for non-HTML elements?

for example: 

parent.addEventListener
// parent
EventTarget.all([xhr1, xhr2]).addEventListener
//

maybe it"s better to explain it this way. What I want is the event version of Promise.all , or all event versions of Observable.merge , or a method or hack that achieves the same function. What should I do, please?

Thank you for your answer.

Javascript html5
Mar.22,2021

event delegation is based on the "event bubbling mechanism". Only the DOM tree has this mechanism and nothing else, so there is no way to delegate.

but there is also a solution to the curve, which is to copy the original object and insert your stuff into it. However, it is not recommended that you do so. Basically, modifying native objects will not come to a good end (it will cause compatibility problems for the use of other libraries).

of course, you can extend a class to do these things yourself, so you can do whatever you want. 

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)

I don't know if that's what you mean. If so, you can write it whatever you want.

event delegate, also known as event broker, mainly deals with multiple duplicate data problems. The event delegate generally chooses to bind the event to its parent element, and then determines it through event.target, and finally gives you the binding class you want or something like

.

Previous: Why does element squeeze still occur when browsers are styled with display:flex;overflow-y:auto in compatibility mode?

Next: Tab handoff of element.ui

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu