trigger custom event without jQuery

7k Views Asked by Christian Haller At 29 April 2025 at 04:00

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

Original Q&A

There are 2 best solutions below

Siguza On 27 April 2015 at 14:24 BEST ANSWER

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'}}));

Michał Szepielak On 27 April 2015 at 14:23

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

trigger custom event without jQuery

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in DOM-EVENTS

Related Questions in JQUERY-TRIGGERHANDLER

Trending Questions

Popular # Hahtags

Popular Questions