Події та їх обробка у JavaScript

//

Обработчики событий

//

//!!!
addEventListener("popstate", (event) => {});
onpopstate = (event) => {};

Об'єкт події event

Объект event типа Event //developer.mozilla.org/ru/docs/Web/API/Event

  • .type строковое свойство только для чтения, содержащее тип события (имя, например: "click", "onchange" и др.)
  • isTrusted - свойство объекта Event, доступное только на чтение. Принимает значение true, если событие было инициировано действиями пользователя, и false, если событие было создано или изменено скриптом, либо с помощью dispatchEvent
  • .currentTarget ссылка на элемент, в котором назначен вызванный обработчик события и в котором обрабатывается событие
    • используется, когда один и тот же обработчик события присваивается нескольким элементам
    • может отличаться от event.target, идентифицирующего элемент, на котором событие возникло
  • .target ссылка на элемент, который инициировал событие, при этом вызванный обработчик события может принадлежать другому элементу (см. currentTarget)

Приклади

//

Установка объектом статического метода обработчиком события для динамически созданного элемента с получением объекта создателя в обработчике:

Window

Изменение якоря /hashchange

Событие hashchange возникает, когда изменяется «якорь» URL (часть URL, которая начинается с символа #).

Перед выгрузкой /onbeforeunload

//developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
Событие onbeforeunload вызывается перед выгрузкой и прекращением обработки документа и его окна из памяти браузера. Это происходит при выполнение браузером перехода другую страницу по ссылке на странице или из истории.

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

Запись истории /popstate

Событие popstate вызывается, когда изменяется активная запись истории. Если изменение записи истории было вызвано методом history.pushState() или history.replaceState(), то состояние события popstate будет содержать state копии входящего в историю объекта

Пример перехвата события нажатия в браузере Back и предотвращение перехода:

Джерела

Leave a Reply