@be_a_man

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

Допустим кастомный селект
const cselect = new Cselect()

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


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

Если какие-либо простые примеры?
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
К примеру, можно так. Создаем класс для регистрации событий и наследуемся от него.
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();
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Минск
от 2 800 до 3 300 $
04 мар. 2021, в 22:39
2500 руб./за проект
04 мар. 2021, в 22:15
10000 руб./за проект