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, Apr 27 '15 at 14:19
Reading the jQuery source would show you how it's done, since jQuery is JavaScript. — Sterling Archer, Apr 27 '15 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, Apr 27 '15 at 14:35

Siguza · Accepted Answer · 2017-11-23T14:51:27.130

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 '17 at 14:51

answered Apr 27 '15 at 14:24

Siguza

21,155
6
52
89

4

`CustomEvent` constructor has no support in IE. – Johnston Oct 06 '16 at 01:58
3

@Johnston But it looks like there's a [polyfill for it](https://github.com/krambuhl/custom-event-polyfill/blob/master/custom-event-polyfill.js). – Siguza Oct 06 '16 at 07:13

score 1 · Answer 2 · answered Apr 27 '15 at 14:23

1

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

answered Apr 27 '15 at 14:23

Michał Szepielak

284
1
4

trigger custom event without jQuery

2 Answers2

Linked

Related