不使用jQuery触发自定义事件 [英] trigger custom event without jQuery

查看:137
本文介绍了不使用jQuery触发自定义事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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>

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

How can I trigger this without jQuery?

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

Important: I need to know the event type and the custom data

推荐答案

如果你想要一个完全复制jQuery的行为,你可能最好挖掘 jQuery源代码

If you want an exact replication of jQuery's behaviour, you're probably best off digging through the jQuery source code.

如果您只想进行正常的事件调度和收听,请参阅 CustomEvent ,了解如何使用自定义数据调度事件和 addEventListener

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.

您的示例可能类似于

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

这篇关于不使用jQuery触发自定义事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆