Эта статья дает вам необходимые знания о JavaScript. В основном она представляет собой простое описание событий. События — это некоторые конкретные интерактивные моменты, которые происходят в документах или окнах браузера. Надеюсь, это будет полезно для всех. .
[Рекомендации по теме: видеоурок по JavaScript, веб-интерфейс]
События — это определенные моменты взаимодействия, которые происходят в документе или окне браузера. Взаимодействие между JavaScript и HTML достигается посредством событий. Для веб-приложений существуют следующие репрезентативные события: события щелчка, события перемещения и удаления мыши, события нажатия клавиатуры/всплывающего окна и т. д. События — это определенные моменты взаимодействия, которые происходят в документе или окне браузера. Вы можете использовать прослушиватели (или обработчики событий) для подписки на события, чтобы соответствующий код выполнялся при возникновении события.
Ниже приводится краткое введение в следующие часто используемые события: события загрузки документа, объекты событий, всплывание событий, делегирование событий, привязка событий, распространение событий и события клавиатуры.
Событие загрузки документа (onload). Событие загрузки запускается после загрузки всей страницы. Используйте, как показано:
С точки зрения производительности лучше написать это внизу страницы! Код js написан внизу страницы, чтобы гарантировать, что страница загрузится при выполнении кода. window.onload может появиться на странице только один раз, и последующий код перезапишет предыдущий код.
Объект события: после того, как событие произойдет, объект события будет сгенерирован и передан функции прослушивания в качестве параметра. Конкретная производительность заключается в том, что мы передаем параметр события в функцию обратного вызова, и значение этого параметра автоматически передается JS. Этот объект события будет содержать всю соответствующую информацию об этом событии, включая то, какое это событие (мышь/клавиатура), инициатор события, цель события и т. д.
Когда запускается событие в объекте DOM, создается объект события Event, который содержит всю информацию, связанную с событием. Включает элементы, вызвавшие событие, тип события и другую информацию, связанную с конкретным событием. Стандартные браузеры DOM передадут объект события в обработчик событий. Каким бы ни был обработчик событий, ему передается объект события. Объект Event содержит свойства и методы, относящиеся к конкретному событию, которое его создало. Типы инициируемых событий различны, а доступные свойства и методы также различны. Вот краткое введение в события мыши/клавиатуры, как показано на рисунке:
Объект события в IE отличается от доступа к объекту события в DOM. Существует несколько различных способов доступа к объекту события в IE, в зависимости от того, как вы указываете обработчик событий. В IE объект события существует как атрибут объекта окна. Вы можете использовать window.event для получения объекта события. При использовании AttachEvent() объект события также будет передан в обработчике или может быть использован в. предыдущий способ. Вот пример для иллюстрации: когда мышь находится на поле, тег p ниже отображает текущие координаты мыши.
Рендеринг:
Схема кода:
Всплытие событий (пузырь). Так называемое всплеск событий относится к восходящему распространению событий. Когда запускается событие в элементе-потомке, то же самое событие в его элементе-предке также будет запущено. Всплески полезны в большинстве ситуаций при разработке. Если вы не хотите, чтобы всплывание происходило, вы можете отменить его с помощью объекта события event.cancelBubble=true.
Рендеринг:
Схема кода:
Делегирование событий: относится к привязке событий к общим элементам-предкам элементов, так что при срабатывании события в элементе-потомке оно переносится к элементу-предку, и событие обрабатывается через функцию ответа предка. элемент. Делегирование событий использует всплытие. Делегирование может уменьшить количество привязок событий и повысить производительность программы. Цель атрибута объекта события: возвращает элемент, вызвавший это событие (целевой узел события).
Случай:
Рендеринг:
Схема кода:
Привязка событий. Мы можем привязать обработчики событий к элементу двумя распространенными способами: привязка путем указания атрибутов событий элементов HTML; привязка путем указания атрибутов объектов DOM. Существует еще один специальный способ, называемый установкой прослушивателя событий, объекта элемента: addEventListener(). Первые два метода могут привязывать обработчики событий, но у них обоих есть тот недостаток, что они могут привязывать только одну программу и не могут привязывать несколько программ для одного события. addEventListener(), с помощью этого метода вы также можете привязать функцию ответа к элементу. Используйте addEventListener() для одновременной привязки нескольких функций ответа к одному и тому же событию элемента. Таким образом, при возникновении события функция ответа будет выполняться в порядке привязки функции. Этот метод не поддерживает браузеры IE8 и ниже, вместо этого вам необходимо использовать AttachEvent. AttachEvent(), в IE8 вы можете использовать AttachEvent() для привязки событий. Этот метод также может одновременно привязывать к событию несколько функций обработки. Разница в том, что он привязывается первым и выполняется первым. Порядок выполнения противоположен методу addEventListener().
Распространение событий. Распространение событий можно разделить на три этапа: этап захвата — на этапе захвата события фиксируются от самого внешнего элемента-предка до целевого элемента, но по умолчанию событие не будет инициировано в это время — целевой этап; событие захватывается. Целевой элемент начинает инициировать события на целевом элементе после завершения захвата — этап всплытия — событие передается от целевого элемента к его элементам-предкам, по очереди запуская события на элементах-предках.
События клавиатуры: onkeydown: событие нажатия клавиатуры. Если вы продолжаете нажимать клавишу, не отпуская ее, событие всегда будет срабатывать. Когда событие onkeydown срабатывает постоянно, интервал между первым и вторым раза будет немного длиннее, а остальные будут очень быстрыми. Это необходимо для предотвращения неправильного использования. onkeyup: событие, когда клавиатура отпускается. События клавиатуры обычно привязаны к некоторым объектам, которые могут получать фокус или документы...
Выше приведено краткое описание событий JavaScript. Для получения дополнительной информации обратите внимание на другие соответствующие статьи в сети исходного кода!