Триггер CustomEvent в Vanilla JS

Я пытаюсь создать настраиваемое событие в ванильном javascript, но действительно не понимаю, как его вызвать. Насколько я знаю, есть jQuery, метод trigger('customEvent'), но как он сделан в Vanilla JS? Не могу найти никакой информации по этому поводу.

Создание CustomEvent:

var addColor = function (elem) {

    elem.classList.add('red');
    var event = new CustomEvent('madeRed');
    elem.dispatchEvent(event);
};

Прикрепление addEventListener к элементу

var elem = document.querySelector('div');
addColor(elem);

elem.addEventListener('madeRed', function (elem) {
    elem.classList.add('color-do-changed');
}, false);

Так в чем ваша настоящая проблема? Кстати, вы отправляете событие перед добавлением прослушивателя событий.

user9539019 17.05.2018 14:28

Возможный дубликат Создать пользовательское событие JavaScript

Ricardo Pontual 17.05.2018 14:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
1 455
1

Ответы 1

Ваш код работает нормально, вы просто решили прослушать вызывающее его событие после. Также, если вы хотите передать пользовательские данные, передайте их через деталь. Вы ничего не передали, но ожидали, что параметр события будет вашим элементом.

var elem = document.querySelector('div');

var addColor = function (elem) {
    elem.classList.add('red');
    var event = new CustomEvent('madeRed', {
      detail: {
        elem
      }
    });
    elem.dispatchEvent(event);
};

elem.addEventListener('madeRed', function (event) {
    event.detail.elem.classList.add('color-do-changed');
}, false);


addColor(elem);
.red { color: red }
.color-do-changed { text-decoration: underline }
<div>Make me red</div>

поэтому для его запуска мне нужно просто вызвать elem.dispatchEvent (event); ?

David C. 17.05.2018 16:04

@ DavidC. Да, вам нужен только второй аргумент, если вы хотите передать некоторые пользовательские данные через

Dominic 17.05.2018 16:39

Другие вопросы по теме