Событие открытие страницы javascript

1. События

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

Существует много видов событий, рассмотрим некоторые из них.

• click — происходит, когда кликнули на элемент левой кнопкой мыши
• submit — посетитель отправил форму
• focus — посетитель фокусируется на элементе, например нажимает на input
• keydown — посетитель нажимает клавишу

1.1. Порядок срабатывания событий

Одно действие может вызывать несколько событий. Например клик вызывает сначала mousedown , а затем mouseup и click . В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке mousedown → mouseup → click .

Каждое событие обрабатывается независимо. Например при клике, события mouseup и click возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка mouseup, затем запускается click .

2. Слушатели событий

Для того, чтобы элемент реагировал на действия пользователя, на него необходимо повесить слушателя (обработчик) события. То есть функцию, которая сработает, как только событие произошло. Именно благодаря слушателям событий, скрипт может реагировать на действия пользователя.

Методы elem.addEventListener() и elem.removeEventListener() — это современный способ назначить или удалить обработчик, при этом можно использовать сколько угодно обработчиков на одном типе события.

2.1. Метод elem.addEventListener()

Добавляет слушателя события на элемент.

element.addEventListener(event, handler[, phase]) 

• event — имя события, строка, например click
• handler — ссылка на функцию, которую надо поставить обработчиком
• phase — необязательный аргумент, фаза, на которой обработчик должен сработать. Указывается крайне редко.

2.1.1. addEventListener и this

Если мы передаем функцию, которая использует this , по умолчанию this внутри нее будет ссылаться на сам DOM-узел на котором висит слушатель. Не забывайте привязывать контекст используя метод bind .

const user =  name: 'Mango', showName()  console.log(this); // this будет ссылаться на button если использовать showName как callback console.log(`My name is: $this.name>`); // тут undefined так как поля name у button нет >, >; /* * Представим что у нас есть кнопка с классом js-btn * Выберем ее и повесим на нее слушатель клика */ const btn = document.querySelector('.js-btn'); user.showName(); //работает btn.addEventListener('click', user.showName); // не работает btn.addEventListener('click', user.showName.bind(user)); // работает 

2.2. Метод elem.removeEventListener()

Удаляет слушателя. Аргументы те же, что у addEventListener .

element.removeEventListener(event, handler[, phase]) 

Для удаления нужно передать ссылку именно на ту функцию-обработчик, которая была назначена в addEventListener . Поэтому для callback используют отдельную функцию и передают ее по имени.

3. Объект события

Чтобы обработать событие, недостаточно знать о том, что это клик или нажатие клавиши. Могут понадобиться детали: текущее значение текстового поля, элемент, на котором произошло событие, встроенные методы и другое. Объект события содержит ценную информацию о деталях события и автоматически передается первым аргументом в обработчик события.

Некоторые свойства объекта события:

• event.type — тип события
• event.target — элемент, на котором произошло событие
• event.currentTarget — элемент, на котором сработал обработчик

4. Действия браузера по умолчанию

Некоторые события автоматически вызывают действие браузера, встроенное по умолчанию как реакция на определенный тип события: переход по ссылке, отправка формы и т. п. Как правило их можно, и зачастую нужно, отменить.

• Клик по ссылке инициирует переход на новый URL, указанный в href ссылки.
• Отправка формы — перезагрузку страницы.

Для отмены действия браузера по умолчанию на объекте события есть стандартный метод.

4.1. Событие submit

Возникает при отправке формы. Его применяют для валидации (проверки) формы перед отправкой. Чтобы отправить форму у посетителя есть два способа:

Какой бы способ ни выбрал посетитель – будет сгенерировано событие submit . В обработчике этого события можно проверить данные и выполнить действия по результатам проверки.

5. События клавиатуры

Есть три основных события клавиатуры: keydown , keypress и keyup . При нажатии клавиши сначала происходит keydown , после чего keypress и только потом keyup , когда клавишу отжали.

События keydown и keyup срабатывают при нажатии любой клавиши, включая служебные. А вот keypress срабатывает, только если нажата символьная клавиша, т. е. нажатие приводит к появлению символа. Управляющие клавиши, такие как Ctrl , Shift , Alt и другие, не генерируют событие keypress .

5.1. KeyboardEvent.key и KeyboardEvent.code

Свойство KeyboardEvent.key доступно для чтения и возвращает значение клавиши, нажатой пользователем, принимая во внимание состояние клавиш модификаторов, таких как shiftKey , а так же текущий язык и модель клавиатуры.

Свойство KeyboardEvent.code представляет собой физическую клавишу на клавиатуре (в отличие от символа, сгенерированного нажатием клавиши). Другими словами, это свойство возвращает значение, которое не изменяется с помощью раскладки клавиатуры или состояния клавиш-модификаторов.

Поставьте фокус в окно примера, кликнув в него мышкой, отслеживание событий клавиатуры стоит на элементе window . Вводите символы на клавиатуре и результат будет отображаться в списке.

6. События элементов форм

6.1. Фокусировка

Элемент получает фокус при нажатии на нем мышкой, клавиши Tab или выбрав на планшете. Момент получения фокуса и потери очень важен, при получении фокуса мы можем подгрузить данные для автозаполнения, начать отслеживать изменения. При потере фокуса — проверить введенные данные.

При фокусировке на элемент происходит событие focus , а когда фокус исчезает, например посетитель кликает в другом месте экрана, происходит событие blur .

По умолчанию многие элементы не могут получить фокус. Например, если кликнуть по div , то фокусировка на нем не произойдет. Кстати, фокус может быть только на одном элементе в единицу времени и текущий элемент, на котором фокус, доступен как document.activeElement .

Активировать или отменить фокус можно программно, вызвав в коде одноименные методы elem.focus() и elem.blur() у элемента.

6.2. Событие change

Происходит по окончании изменения элемента формы, когда изменение зафиксировано. Для input:text или textarea событие произойдёт не при каждом вводе, а при потере фокуса, что не всегда удобно.

Например пока вы набираете что-то в текстовом поле — события нет. Но как только фокус пропал, произойдет событие change . Для остальных же элементов, например select , input:checkbox и input:radio , оно срабатывает сразу при выборе значения.

6.3. Событие input

Срабатывает только на текстовых элементах, input:text и textarea , при изменении значения элемента. Не ждет потери фокуса, в отличие от change .

В современных браузерах input — самое главное событие для работы с текстовым элементом формы. Именно его, а не keydown или keypress , следует использовать.

7. Загрузка документа

При открытии веб-страницы, процесс загрузки HTML-документа условно состоит из трёх стадий. На каждую можно повесить обработчик, чтобы совершить действия.

• DOMContentLoaded — браузер полностью загрузил HTML и построил DOM-дерево.
• load — браузер загрузил все ресурсы.
• beforeunload и unload — уход со страницы.

7.1. DOMContentLoaded

Происходит на document когда все DOM-элементы разметки уже созданы, можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно, ещё не догрузились какие-то картинки или стили.

document.addEventListener('DOMContentLoaded', callback) 

Если в документе есть теги script , то браузер обязан их выполнить до того, как построит DOM. Поэтому событие DOMContentLoaded ждёт загрузки и выполнения таких скриптов. Исключением являются скрипты с атрибутами async и defer , которые подгружаются асинхронно. Внешние файлы стилей никак не влияют на событие DOMContentLoaded .

7.2. load

Событие срабатывает на window , когда загружается вся страница, включая ресурсы на ней — стили, картинки и т.д. Его используют редко, поскольку обычно нет нужды ждать загрузки всех ресурсов.

7.3. unload

Когда человек уходит со страницы или закрывает окно, на window срабатывает событие unload . В нём можно сделать что-то, не требующее ожидания, например закрыть вспомогательные popup-окна, но отменить сам переход нельзя. Событие почти не используется — мало что можно сделать зная, что вкладка браузера сейчас закроется.

7.4. beforeunload

Событие срабатывает на window . Это стандарт для того, чтобы проверить, сохранил ли посетитель данные, действительно ли он хочет покинуть страницу.

Если посетитель инициировал переход на другую страницу или нажал закрыть окно, то обработчик beforeunload может приостановить процесс и спросить подтверждение. Для этого ему нужно вернуть строку, которую браузеры покажут посетителю, спрашивая – нужно ли переходить.

results matching » «

No results matching » «

Источник

Window: load event

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

This event is not cancelable and does not bubble.

Note: All events named load will not propagate to Window , even with bubbles initialized to true . To catch load events on the window , that load event must be dispatched directly to the window .

Note: The load event that is dispatched when the main document has loaded is dispatched on the window , but has two mutated properties: target is document , and path is undefined . These two properties are mutated due to legacy conformance.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("load", (event) => >); onload = (event) => >; 

Event type

Examples

Log a message when the page is fully loaded:

.addEventListener("load", (event) =>  console.log("page is fully loaded"); >); 

The same, but using the onload event handler property:

.onload = (event) =>  console.log("page is fully loaded"); >; 

Live example

HTML

div class="controls"> button id="reload" type="button">Reloadbutton> div> div class="event-log"> label for="eventLog">Event log:label> textarea readonly class="event-log-contents" rows="8" cols="30" id="eventLog">textarea> div> 

body  display: grid; grid-template-areas: "control log"; > .controls  grid-area: control; display: flex; align-items: center; justify-content: center; > .event-log  grid-area: log; > .event-log-contents  resize: none; > label, button  display: block; > #reload  height: 2rem; > 

JavaScript

const log = document.querySelector(".event-log-contents"); const reload = document.querySelector("#reload"); reload.addEventListener("click", () =>  log.textContent = ""; setTimeout(() =>  window.location.reload(true); >, 200); >); window.addEventListener("load", (event) =>  log.textContent += "load\n"; >); document.addEventListener("readystatechange", (event) =>  log.textContent += `readystate: $document.readyState>\n`; >); document.addEventListener("DOMContentLoaded", (event) =>  log.textContent += `DOMContentLoaded\n`; >); 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 8, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник