Как делаются пользовательские события JS?

Question

[be_a_man]

Допустим кастомный селект

const cselect = new Cselect()

// Как делаются свои обработчики?
cselect.on('change', e => { ... })
cselect.on('opened', e => { ... })

Смотрел исходники Swiper, ожидал там увидеть new CustomEvent(), там по-другому сделано, не понятно мне как.

Если какие-либо простые примеры?

Comments

[Сергей Соколов]

в Swiper вот посмотрите swiper/src/components/core/events-emitter.js

Answer 1

[Виталий Инчин ☢]

К примеру, можно так. Создаем класс для регистрации событий и наследуемся от него.

class Event
{
     events = {}

     on(event, callback){
         if(!(event in this.events)){
             this.events[event] = [];
         }
         this.events[event].push(callback);
     }


     emit(event, ...args){
        if(event in this.events){
             this.events[event].forEach(callback => callback(...args));
        }
     }

}

Дальше, предположим, у нас главный класс наследуется от Event.

class Cselect extends Event
{

    justDoSomething(){
        this.emit('tick', 1, 2, 3);
    }
      
}

И теперь мы можем использовать

var select = new Cselect;
select.on('tick', (a, b, c) => {
    console.log(a, b, c);
});
select.justDoSomething();

Comments

[be_a_man]

Спасибо!