不使用 jQuery 触发自定义事件答案

【问题标题】：trigger custom event without jQuery不使用 jQuery 触发自定义事件
【发布时间】：2015-07-06 01:18:23
【问题描述】：

我正在使用 jQuery triggerHandler() 触发一些 DOM 事件

<!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>

如果没有 jQuery，我怎样才能触发呢？

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

【问题讨论】：

在幕后 jQuery 将使用 document.addEventListener('hey', function() { ... });嘿，点击，鼠标按下等。这是你的意思吗？
阅读 jQuery 源代码会告诉你它是如何完成的，因为 jQuery 是 JavaScript。
据我记得，jquery 结合了 .dispatchEvent 和 .fireEvent 用于 triggerHandler。您可以轻松编写一个函数来尝试其中一个。 dispatch 事件适用于大多数浏览器。

标签： javascript jquery dom-events jquery-triggerhandler

【解决方案1】：

如果您想要精确复制 jQuery 的行为，您可能最好挖掘 jQuery source code。

如果您只是想做普通的事件调度和监听，请参阅CustomEvent 了解如何使用自定义数据调度事件和addEventListener 了解如何收听。

您的示例可能类似于

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

【讨论】：

CustomEvent 构造函数在 IE 中不支持。
@Johnston 但是好像有一个polyfill for it。

【解决方案2】：

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

【讨论】：