trigger custom event without jQuery

2019-01-24 03:07发布

站内问答 / JavaScript
1106 3 6

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

3条回答
看我几分像从前
2楼-- · 2019-01-24 03:49

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'}}));
查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
3楼-- · 2019-01-24 03:49

The quick & easy way:

$('#element').trigger("mycustomevent");

or for global event:

$(document).trigger("mycustomevent");

catching it:

$('#element').on("mycustomevent", function(e){
    // do something
});
查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
4楼-- · 2019-01-24 03:51

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)