trigger custom event without jQuery

Question

I'm triggering some DOM Events with jQuery triggerHandler()

<!DOCTYPE html>
<html>
<head>
  <title>stackoverflow</title>
  <script src="http://ajax.googleapis.com:80/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
  <script>
    $(document).ready(function() {
      $(document).on('hey', function(customEvent, originalEvent, data) {
        console.log(customEvent.type + ' ' + data.user); // hey stackoverflow

      });

      // how to this in vanilla js
      $(document).triggerHandler('hey', [{}, {
        'user': 'stackoverflow'
      }])
    });
  </script>
</body>

</html>

How can I trigger this without jQuery?

Important: I need to know the event type and the custom data

Under the covers jQuery will be using document.addEventListener('hey', function() { ... }); where hey is click, mousedown etc. Is that what you mean? — garryp
– garryp, Commented Apr 27, 2015 at 14:19
Reading the jQuery source would show you how it's done, since jQuery is JavaScript. — Sterling Archer
– Sterling Archer, Commented Apr 27, 2015 at 14:22
As far as i remember, jquery combines .dispatchEvent and .fireEvent for triggerHandler. You can easily write a function to try one or the other. dispatch event will work on most browsers. — David
– David, Commented Apr 27, 2015 at 14:35

Siguza · Accepted Answer · 2017-11-23 14:51:27Z

16

If you want an exact replication of jQuery's behaviour, you're probably best off digging through the jQuery source code.

If you just want to do normal event dispatching and listening, see CustomEvent for how to dispatch an event with custom data and addEventListener for how to listen to it.

Your example would probably look something like

document.addEventListener('hey', function(customEvent)
{
    console.log(customEvent.type + ' ' + customEvent.detail.user); // hey stackoverflow
});
document.dispatchEvent(new CustomEvent('hey', {'detail': {'user': 'stackoverflow'}}));

edited Nov 23, 2017 at 14:51

answered Apr 27, 2015 at 14:24

Siguza

24.7k6 gold badges58 silver badges105 bronze badges

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

2 Comments

Johnston Over a year ago

CustomEvent constructor has no support in IE.

Siguza Over a year ago

@Johnston But it looks like there's a polyfill for it.

Michał Szepielak · Accepted Answer · 2015-04-27 14:23:56Z

1

You can use Custom Events and dispatch them on element you want.

answered Apr 27, 2015 at 14:23

Michał Szepielak

2841 silver badge4 bronze badges

Collectives™ on Stack Overflow

trigger custom event without jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related