WP Heartbeat API в Vanilla JS (addEventListener для пользовательских событий) - PullRequest
Новая
       11

WP Heartbeat API в Vanilla JS (addEventListener для пользовательских событий)

0 голосов
/ 02 января 2019

Почему следующий код, написанный на jquery, прекрасно работает, но когда я пытаюсь использовать его с vanilla js, он не работает.

Вот код API WP Heartbeat - https://github.com/WordPress/WordPress/blob/master/wp-includes/js/heartbeat.js

jQuery(document).ready( function($) {
  $(document).on('heartbeat-tick', function() {
    console.log('jquery');
  });
});




jQuery(document).ready( function($) {
  document.addEventListener('heartbeat-tick', function() {
    console.log('Heartbeat tick JS');
  });
});


jQuery(document).ready( function($) {
var event = new Event('heartbeat-tick');
window.addEventListener('heartbeat-tick', function() {
    console.log('Heartbeat tick JS');
});
window.dispatchEvent(event);
});

1 Ответ

0 голосов
/ 02 января 2019

Ваше document событие не запускается, потому что вы отправляете событие на window. Позвоните document.dispatchEvent, чтобы отправить его на номер document. 

jQuery(document).ready(function($) {
  var event = new Event('heartbeat-tick');

  $(document).on('heartbeat-tick', function() {
    console.log('jquery');
  });
  
  document.addEventListener('heartbeat-tick', function() {
    console.log('Heartbeat tick JS from document');
  });

  window.addEventListener('heartbeat-tick', function() {
    console.log('Heartbeat tick JS from window');
  });
  
  console.log('window');
  window.dispatchEvent(event);
  console.log('document');
  document.dispatchEvent(event);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...