Связанные показания:
JavaScript Event Superaint Support (v) Тип событий мыши в JS
//www.vevb.com/article/86259.htm
JavaScript Event Superaint Support (i) Поток событий
//www.vevb.com/article/86261.htm
JavaScript Event Learning Redugary (IV) Общественные члены событий (свойства и методы)
//www.vevb.com/article/86262.htm
JavaScript Event Superaint Support (II) Обработчик событий JS
//www.vevb.com/article/86264.htm
JavaScript Event Superaint Support (III) JS -объект события
1. События
Событие - это определенное действие, выполняемое самим пользователем или браузером, таким как клик, загрузка и Mouseover, являются именами события.
События - это мост между JavaScript и Dom.
Если вы запустите, я выполню событие и вызову его функцию обработки, чтобы выполнить соответствующий код JavaScript, чтобы дать ответ.
Типичные примеры: событие загрузки запускается после загрузки страницы; Пользователь нажимает элемент и запускает событие Click.
2. Событие потока
1. Осознание гриппа событий
Вопрос: Нажмите на элемент страницы, какой элемент может почувствовать такое событие?
Ответ: Нажав на элемент, вы также нажимаете на элемент элемента или даже на всю страницу.
Пример: существует три концентрических круга, добавьте соответствующую функцию обработки событий в каждый круг, а соответствующий текст появляется. Нажмите на внутренний круг, а также нажмите на внешний круг, чтобы также было запустить событие щелчка внешнего круга.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #outer {position: Absolute; Ширина: 400px; Высота: 400px; Верх: 0; слева: 0; Внизу: 0; Справа: 0; Порность: Авто; фоновый цвет: deppink; } #middle {position: Absolute; Ширина: 300px; Высота: 300px; Верх: 50%; Мяглевая маржа: -150px; маржинальная версия: -150px; Фоно-цвета: DeepskyBlue; } #inner {position: Absolute; Ширина: 100px; высота: 100px; Верх: 50%; Слева: 50%; Мяглевая маржа: -50PX; маржинальная версия: -50px; Фоно-цвета: Darkgreen; Текст-альбом: Центр; высота линии: 100px; Цвет: белый; }#Внешний,#Средний,#Inner {Border-Radius: 100%; } </style> <body> <div id = "uper"> <div id = "middle"> <div id = "inner"> Щелкните меня! </div> </div> </div> <script> var innerCircle = document.getElementById ("inner"); innerCircle.onClick = function () {alert ("innerCircle"); }; var middlecircle = document.getElementById ("middle"); middlecircle.onclick = function () {alert ("middlecircle"); } var outterCircle = document.getElementById ("Overt"); overcircle.onclick = function () {alert ("uptercircle"); } </script> </body> </html>Эффекты следующие:
2. Событие потока
Когда происходит событие, оно будет распространяться в определенном порядке между узлом элемента и корневым узлом. Все узлы, проходящие через путь, получат событие. Этот процесс распространения является потоком событий DOM.
Порядок распространения событий соответствует двум моделям потока событий браузера: поток событий захвата и поток событий пузыря.
Поток событий пузыря: распространение событий от самой конкретной цели события до наименее конкретной цели событий. То есть от листьев дерева до доня до корня.
Захваченный поток событий: распространение событий происходит от наименее конкретной цели событий до самой конкретной цели события. То есть от корней дерева доми до листьев.
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "mydiv"> Щелкните меня! </Div> </body> </html>
В приведенном выше HTML -коде нажмите элемент <div> на странице.
В потоке событий пузырьков нажмите «Заказ о распространении событий» - <viv> -》 <body>》》 <html>》 Document
В захваченном потоке событий нажмите «Заказ о распространении событий» - это документ》 <html>》》 <Body>》》 <Div>
примечание:
1) Все современные браузеры поддерживают пузырьки событий, но существуют небольшие различия в конкретных реализациях:
В IE5.5 и ранее пузырьки событий пропустит элемент <html> (прыгайте прямо от тела к документу).
IE9, Firefox, Chrome и Safari Bubble Events вплоть до оконного объекта.
2) IE9, Firefox, Chrome, Opera и Safari все вспомогательные события. Хотя стандарт DOM требует, чтобы события были распространены из объектов документа, эти браузеры начинают захватывать события из окна объектов.
3) Поскольку старые браузеры не поддерживают его, мало кто использует захват событий. Рекомендуется использовать пузыри событий.
Dom Event Stream
Стандарт DOM использует Capture + пузырьки. Оба потока событий запускают все объекты DOM, начиная с объекта документа и заканчивая объектом документа.
Стандарт DOM предусматривает, что поток событий включает в себя три этапа: этап захвата событий, на целевой стадии и стадию пузырьков событий.
Фаза захвата событий: фактическая цель (<div>) не будет получать события во время фазы захвата. То есть на стадии захвата событие останавливается от документа до <html>, а затем до <body>. На рисунке выше, это 1 ~ 3.
На целевой стадии: событие происходит и обрабатывается на <div>. Но обработка событий будет рассматриваться как часть пузырящей фазы.
Пузырьковая фаза: события распространяются обратно в документ.
примечание:
1): Стандарт DOM предусматривает, что захват фазы событий включает в себя цели событий, но события на объектах событий будут установлены в IE9, Safari, Chrome, Firefox, Opera9.5 и более поздних версиях начнут события на объектах событий во время фазы захвата. В результате есть две возможности для эксплуатации событий на целевом объекте.
2): Не все события проходят через стадию пузыря. Все события проходят через стадию захвата и находятся на целевой стадии, но некоторые события пропускают стадию пузырьков: например, событие фокуса, которое получает входное направление, и событие размытия, которое теряет фокус ввода.
Пример двух шансов на управление событиями в целевом объекте:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #outer {position: Absolute; Ширина: 400px; Высота: 400px; Верх: 0; слева: 0; Внизу: 0; Справа: 0; Порность: Авто; фоновый цвет: deppink; } #middle {position: Absolute; Ширина: 300px; Высота: 300px; Верх: 50%; Мяглевая маржа: -150px; маржинальная версия: -150px; Фоно-цвета: DeepskyBlue; } #inner {position: Absolute; Ширина: 100px; высота: 100px; Верх: 50%; Слева: 50%; Мяглевая маржа: -50PX; маржинальная версия: -50px; Фоно-цвета: Darkgreen; Текст-альбом: Центр; высота линии: 100px; Цвет: белый; }#Внешний,#Средний,#Inner {Border-Radius: 100%; } </style> <body> <div id = "uper"> <div id = "middle"> <div id = "inner"> Щелкните меня! </div> </div> </div> <script> var innerCircle = document.getElementById ("inner"); innerCircle.AddeventListener ("click", function () {alert ("событие клика InnerCircle запускается на стадии захвата");}, true); innerCircle.AddeventListener ("click", function () {alert ("Событие innerCircle's Click запускается на стадии пузыря");}, false); var middlecircle = document.getElementById ("middle"); middlecircle.addeventlistener ("click", function () {alert ("Событие MiddLecircle's Click запускается на стадии захвата");}, true); middlecircle.addeventlistener ("click", function () {alert ("Событие MiddLecircle's Click запускается на стадии пузыря");}, false); var outterCircle = document.getElementById ("Overt"); overcircle.addeventListener ("click", function () {alert ("Событие upterCircle's Click запускается на стадии захвата");}, true); OUTERCIRCLE.AddeventListener ("click", function () {alert ("Событие upterCircle's Click запускается на стадии пузыря");}, false); </script> </body> </html>Эффект работы заключается в том, что 6 коробок будут появляться один за другим. Чтобы объяснить принцип, я интегрировал его в картину:
3. Типичное применение потока событий - прокси события
В традиционной обработке событий обработчик событий должен быть добавлен в каждый элемент. JS Event Proxy - это простая и эффективная техника, с помощью которой вы можете добавить процессор события в родительский элемент, избегая добавления процессора событий в несколько дочерних элементов.
Принцип прокси -сервера событий использует пузырьки событий и целевые элементы, добавьте процессор события к родительскому элементу, дождитесь событий дочернего элемента, и родительский элемент может определить, какой дочерний элемент находится через цель (то есть Srcelement) и, таким образом, выполнять соответствующую обработку. Для получения дополнительного содержания о цели, пожалуйста, обратитесь к следующим примерам для публичных членов (свойств и методов) события (IV) для следующих примеров.
Традиционная обработка событий, добавление обработчика событий в каждый элемент, код заключается в следующем:
<body> <ul id = "color-list"> <li> red </li> <li> Orange </li> <li> желтый </li> <li> green </li> <li> синий </li> <li> indigo </li> <li> Purple </li> </ul> <Scrose> (function () {varlist = document.getElementbyid ("colorist>; Colorslist. }}) (); </script> </body>Метод обработки агента события выглядит следующим образом:
<body> <ul id = "color-list"> <li> red </li> <li> Orange </li> <li> желтый </li> <li> green </li> <li> синий </li> <li> indigo </li> <li> Purple </li> </ul> <Scrose> (function () {varlist = document.getElementbyid ("colorist>; Colorlist.AddeventListener ('Click', ShowColor, false); }}) (); </script> </body>Подводя итог преимущества прокси -сервера событий:
а Сократите несколько процессоров событий до одного, потому что процессор событий должен находиться в памяти, что повышает производительность. Представьте себе, что если есть 100-строка, сравнивая традиционный способ привязки обработчиков событий для каждой ячейки с прокси-сервером событий (то есть добавление обработчика событий к таблице), нетрудно сделать вывод, что прокси-сервер событий избегает некоторых потенциальных рисков и улучшает производительность.
беременный DOM Update не требует повторного процессора событий, поскольку прокси -сервер событий может принять различные методы обработки для разных дочерних элементов. Если добавлены другие детские элементы (A, Span, Div и т. Д.), Вы можете напрямую изменить функцию обработчика событий в агенте события. Нет необходимости переживать процессор, и нет необходимости снова проходить.
Выше приведено резюме обучения JavaScript Event (i), связанные с знаниями о потоковой передаче событий, которые редактор представил вам. Я надеюсь, что это будет полезно для всех!