Trigger CustomEvent in Vanilla JS

Question

I'm trying to create custom event in vanilla javascript, but don't really understand how to trigger it. As far as I know there is jQuery method trigger('customEvent'), but how is it made in Vanilla JS? Can't find any info regarding that.

Creating CustomEvent:

var addColor = function (elem) {

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

Attaching addEventListener to the element

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

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

So what is your actual problem? BTW, you are dispatching the event before adding the event listener. — user9539019
– user9539019, Commented May 17, 2018 at 12:28

nanobar · Accepted Answer · 2018-05-17 12:33:32Z

3

Your code works fine, you just decided to listen to the event after calling it. Also if you want to pass custom data then pass it through detail. You didn't pass anything but were expecting the event parameter to be your element.

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>

answered May 17, 2018 at 12:33

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David C. Over a year ago

so to trigger it I have to simply call elem.dispatchEvent(event); ?

nanobar Over a year ago

@DavidC.Yes, you only need the second argument if you want to pass some custom data through

Collectives™ on Stack Overflow

Trigger CustomEvent in Vanilla JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related