在没有 jQuery 的情况下触发自定义事件

Question

我用 jQuery triggerHandler()

触发了一些 DOM 事件

<!DOCTYPE html>
<html>
<head>
  <title>Whosebug</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 Whosebug

      });

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

</html>

没有 jQuery 怎么触发这个？

重要：我需要知道事件类型和自定义数据

Answer 1

您可以使用 Custom Events 并将它们分派到您想要的元素上。

Answer 2

如果您想要精确复制 jQuery 的行为，您最好深入研究 jQuery source code.

如果您只想进行正常的事件派发和监听，请参阅CustomEvent for how to dispatch an event with custom data and addEventListener了解如何监听。

您的示例可能类似于

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

在没有 jQuery 的情况下触发自定义事件

trigger custom event without jQuery

javascript

jquery

dom-events

jquery-triggerhandler