17

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なしでこれをトリガーするにはどうすればよいですか?

重要: イベント タイプとカスタム データを知る必要があります

4

2 に答える 2

15

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'}}));
于 2015-04-27T14:24:28.827 に答える
1

カスタム イベントを使用して、必要な要素にディスパッチできます。

于 2015-04-27T14:23:56.483 に答える