вызвать пользовательское событие без JQuery

javascript jquery dom-events jquery-triggerhandler

5100 просмотра

3 ответа

Я запускаю некоторые DOM-события с помощью 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?

Важно : мне нужно знать тип события и пользовательские данные

Автор: Christian Haller Источник Размещён: 12.11.2019 09:44

Ответы (3)


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'}}));
Автор: Siguza Размещён: 27.04.2015 02:24

1 плюс

Вы можете использовать пользовательские события и отправлять их по желаемому элементу.

Автор: Michał Szepielak Размещён: 27.04.2015 02:23

-1 плюса

Быстрый и простой способ:

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

или для глобального события:

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

ловить это:

$('#element').on("mycustomevent", function(e){
    // do something
});
Автор: Hike Nalbandyan Размещён: 09.01.2019 04:24
Вопросы из категории :
32x32