Создание и запуск событий

220
посл. ред. 18.03.2018

Создание события

События на странице могут запускаться не только браузером или посетителем сайта, но и самим скриптом. Для этого предварительно необходимо создать объект события, который будет передаваться обработчику. Делается это с помощью объекта-конструктора Event.

new Event(имя_события[, свойства])
имя_события
Указывается название события в кавычках.
Можно использовать не только стандартные события, но и придумывать свои собственные (тогда обработчик назначается с помощью метода addEventListener()).
свойства
Необязательный аргумент. Должен быть объектом с двумя свойствами:
  • bubbles - всплывать ли событию (true/false).
  • cancelable - возможность отмены действий браузера по умолчанию (true/false).
Данные свойства будут унаследованы объектом события.
По умолчанию: {bubbles: false, cancelable: false}.

Запуск события

Чтобы сгенерировать событие на элементе, используется метод dispatchEvent().

element.dispatchEvent(объект_события)
объект_события
Ссылка на специально созданный объект события. Данный объект будет передан обработчикам события.

Всплытие при генерации события

Вызов dispatchEvent() приводит к выполнению обработчиков события в соответствующем порядке. Правила обработки события браузером (погружение и всплытие) сохраняются. Но для всплытия события необходимо указать свойство bubbles: true при создании объекта события.

<html>
<head>
  <title>События</title>
</head>
<body onclick="alert('Событие click всплывает.');">
  <p>Параграф</p>
</body>
</html>
 
<script>
  var par = document.body.firstElementChild;
  var event = new Event('click', {bubbles: true});
  par.dispatchEvent(event); /* вызов 'click' на параграфе */
</script>

В примере вызывается событие click на параграфе и оно всплывает.

Действия браузера при генерации события

Метод dispatchEvent() возвращает значение false, если хотя бы один из выполняемых обработчиков вызывает event.preventDefault() (при создании объекта события должно быть указано свойство cancelable: true). В остальных случаях возвращается true.

<html>
<head>
  <title>События</title>
</head>
<body>
  <input type="button" onclick="event.preventDefault();" value="Кнопка">
</body>
</html>
 
<script>
  var button = document.body.firstElementChild;
  var event_1 = new Event('click', {cancelable: true});
  alert(button.dispatchEvent(event_1)); /* false, действие отменено */
  var event_2 = new Event('click', {cancelable: false});
  alert(button.dispatchEvent(event_2)); /* true, действие не отменено */
</script>

Если вызывается стандартное событие (click и т.п.), тогда данная возможность позволяет узнать, было ли отменено действие браузера по умолчанию.

Генерация нестандартных событий

В случае с нестандартными событиями вызов event.preventDefault() позволяет получить дополнительную информацию от обработчика события.

Ниже приведён пример, в котором элементу <input> назначен обработчик нестандартного события check_value для проверки введённого значения:

<html>
<head>
  <title>События</title>
</head>
<body>
  <input type="text" oninput="mess(); this.value='';" placeholder="Введите цифру 5">
</body>
</html>
 
<script>
  var input = document.body.firstElementChild;
  input.addEventListener('check_value', function(event) {
    if (this.value !== '5') {
      event.preventDefault();
    }
  });

  function mess() {
    var check_event = new Event('check_value', {cancelable: true});
    if (input.dispatchEvent(check_event) == true) {
      alert('Поздравляем. Вы ввели цифру 5.');
    } else {
      alert('Введите цифру 5.');
    }
  }
</script>

При вводе любого символа в текстовое поле запускается функция mess(). В ней генерируется событие check_value для проверки значения. В зависимости от результата выполнения обработчика события check_value выводится нужное сообщение.

Область применения

Генерация событий в скрипте используется редко. Это вполне логично, ведь обработчики событий должны реагировать на действия, совершённые пользователем или браузером. А для выполнения команд, не связанных с этими действиями, можно использовать простые функции. Однако, есть случаи, когда генерация событий может пригодиться.

Можно выделить два основных случая для генерации событий в скрипте:

  • Генерация стандартных событий с целью проверки работоспособности кода. Например, когда необходимо проверить реакцию скрипта на многократные действия пользователя. Или когда запуск программы осуществляется сложной комбинацией событий, а тестирование надо провести много раз.
  • Генерация собственных (нестандартных) событий для улучшения прозрачности кода. Например, изменение на странице сайта (раскрытие подменю, добавление товара в корзину и т.п.), выполненное скриптом, может восприниматься и как определённое событие. Запуск события (а не функции) в таком случае более понятен, особенно если такое событие в свою очередь приводит к выполнению определённых действий (затемнение фона при раскрытии подменю, анимация добавления в корзину и т.п.).