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



我正在使用jQuery触发一些DOM事件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>

如何在没有 jQuery 的情况下触发它?

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

如果你想精确复制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'}}));

您可以使用自定义事件并在所需的元素上调度它们。

相关内容

  • 没有找到相关文章

最新更新