不使用jQuery触发自定义事件

时间:2015-04-27 14:16:10

标签: javascript jquery dom-events jquery-triggerhandler

我用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>
&#13;
&#13;
&#13;

如果没有jQuery,我该如何触发?

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

3 个答案:

答案 0 :(得分:15)

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

如果您只是想进行正常的事件调度和收听,请参阅jQuery source code了解如何使用自定义数据发送事件,并CustomEvent了解如何收听事件。

您的示例可能类似于

if(response.startsWith("<!DOCTYPE")) {
    someLoggingMethod(response);`
} else {
    // process the response

答案 1 :(得分:1)

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

答案 2 :(得分:0)

快速简便的方法:

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

或针对全球事件:

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

捕捉它:

$('#element').on("mycustomevent", function(e){
    // do something
});