Недавно, поскольку я должен модифицировать веб -сайт каждый день, чтобы сделать специальные эффекты для веб -сайта, я смотрел много контактных инцидентов JS. Я знаю только, как использовать небольшую часть этого. Иногда это также довольно хаотично, когда я использую его. Теперь я разобрался. Я поделюсь им с сетевой платформой Wulin для вашей ссылки!
1. Что такое событие JavaScript?
События - это бьющееся сердце приложений JavaScript и клей, который все смещает все вместе. Когда у нас есть определенные типы взаимодействия с веб -страницами в браузере, происходят события.
События могут нажать на определенное контент, проходить через определенный элемент или нажать определенные ключи на клавиатуре, а события также могут быть чем -то, что происходит в веб -браузере, например, на определенную веб -страницу, или пользователь прокручивает окно или изменение размера окна. Если это прямо, события - это конкретные моменты взаимодействия, которые встречаются в документе или браузере!
Используя JavaScript, вы можете прослушать конкретные события и указать, что в ответ на них происходят определенные события.
2. Событие потока
Поток событий описывает порядок событий, принятых на странице. На ранних стадиях разработки браузера два основных производителя браузера, IE и Netscape, сражались друг с другом, и произошла ситуация мошенничества, то есть их интерпретация потока событий показала два совершенно противоположных определения. Это то, с чем мы знакомы: т.е. пузыри событий, захват событий Netscape. Давайте сначала сфотографируем и посмотрим на структуру:
1. Пузыри события
Пузырьки событий означает, что событие сначала получено наиболее специфическим элементом (узел с самым глубоким уровнем гнездования в документе), а затем распространяет вверх шаг шаг к наименее конкретному узлу (документ). Возьмите приведенную выше диаграмму, чтобы проиллюстрировать, что при щелчке текстовой части она сначала получена элементом в тексте, а затем распространяется в окно шаг за шагом, то есть выполняется процесс 6-7-8-9-10.
2. Захват события
Захват событий означает, что событие впервые получено менее специфическим узлом, и самый специфический узел, наконец, получает событие. Аналогичным образом, в приведенной выше модели при щелчке текстовой части сначала получается окном, а затем распространяется на пошаговый элемент текста, то есть выполняется процесс 1-2-3-4-5.
Как он работает в коде? Учитывается позже!
3. Три способа обработки события JavaScript
Когда происходит событие, мы должны иметь дело с этим. Есть три основных способа обработки обработчиков событий JavaScript:
1. HTML -обработчик событий
То есть мы напрямую добавляем обработчики событий в HTML -код, например, следующий код:
<input id = "btn" значение = "кнопка" type = "onclick =" showmsg (); "> <script> function showmsg () {alert (" html добавить обработку событий "); } </script>Из приведенного выше кода мы видим, что обработка событий напрямую вложена в элементы. Существует проблема с этим: связь между HTML -кодом и JS слишком сильна. Если вы хотите изменить ShowMsg в JS в один день, вам не только необходимо изменить его в JS, но и необходимо изменить его в HTML. Мы можем принять одну или две модификации, но когда ваш код достигнет уровня 10 000 строк, он будет стоить людям и деньгам, чтобы изменить его. Поэтому мы не рекомендуем этот метод.
2. Обработчик событий DOM0 уровня
То есть добавить обработку событий в указанный объект, см. Следующий код:
<input id = "btn" value = "кнопка" type = "кнопка"> <script> var btn = document.getElementbyId ("btn"); btn.onclick = function () {alert ("Обработка событий на уровне DOM-уровня"); } btn.onclick = null; // Если вы хотите удалить событие BTN Click, установите его на null </script>Из приведенного выше кода мы видим, что связь между событиями уровня DOM0, кодом HTML и кодом JS была значительно снижена по сравнению с обработчиками событий HTML. Тем не менее, умные программисты все еще не удовлетворены и надеются найти более простой способ справиться с этим. Давайте посмотрим на третий метод.
3. Обработчик событий DOM2 уровня
DOM2 также добавляет обработчиков событий к определенным объектам, но в основном включает в себя два метода, которые используются для обработки операций по определению и удалению обработчиков событий: addEventListener () и removeEventListener (). Все они получают три параметра: имя события, которое нужно обрабатывать, функция как обработчик событий и логическое значение (независимо от того, обрабатывается ли событие на стадии захвата), см. Следующий код:
<input id = "btn" value = "кнопка" type = "кнопка"> <script> var btn = document.getElementbyId ("btn"); btn.addeventlistener («click», showmsg, false); // Здесь мы установили последнее значение false, то есть оно не обрабатывается на стадии захвата. Вообще говоря, обработка пузырьков более совместима в каждой функции браузера Showmsg () {alert («Домашний обработчик событий на уровне DOM»); } btn.removeeventListener ("click", showmsg, false); // Если вы хотите удалить это событие, вам нужно только передать тот же параметр </script>Здесь мы видим, что при добавлении и удалении событий последний метод является более прямым и простым. Тем не менее, Ma Haixiang напоминает всем, что при обработке события Delete прошедшие параметры должны соответствовать предыдущим параметрам, в противном случае удаление будет недействительным!
4. Процесс и разница между пузырями событий и захватом событий
Сказав это, позвольте мне дать вам код, чтобы объяснить процесс пузырьков событий и захвата событий, и в то же время позвольте вам увидеть разницу между ними:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-"> <title> документ </title> <style> #p {width: px; рост: px; граница: px solid black;} #c {width: px; рост: px; граница: px sold red;} </style> </code> </head> </head> </head> </wead> </wead> </wead> </wead> </wead> </wead> </wead> </hab; www.mahaixiang.cn <div id = "c"> мне нравится www.mahaixiang.cn </div> </div> <script> var p = document.getelementbyid ('p'); var c = document.getElementbyId ('c'); C.AddeventListener ('click', function () {alert ('wealling ’)}}, true); C.AddeventListener ('click', function () {alert ('ububles ’)}, false); P.AddeventListener ('click', function () {alert ('Bell Node Bubbles')}, false); </script> </body> </html>При запуске приведенного выше кода и нажав на дочерний элемент, мы обнаружим, что порядок выполнения: пузырь пузырька узла узла узел узел узел узел узел узел узлов узла. Из этого примера мы можем понять, что, кроме того, событие уровня DOM2 предусматривает, что события включают три этапа:
1. Стадия захвата событий;
2. На целевой стадии;
3. Стадия пузыря события.
Во -первых, это захват, затем на целевой стадии (то есть в место, где выпущено событие), и, наконец, оно пузырится. Что ненаучно, так это то, что не существует программы обработки событий на уровне DOM1. Пожалуйста, обратите внимание и перестаньте шутить!
5. Дополнение
1. Обработчик IE Event также имеет два метода: AttedEvent () добавляет события, а DetachEvent () удаляет события. Эти два метода получают одинаковые два параметра: имя обработчика событий и функция обработки транзакций. Почему здесь нет логической ценности? Поскольку IE8 и более ранние версии поддерживают только пузырьки событий, последний параметр эквивалентен ложному по умолчанию! (Браузеры, которые поддерживают обработчики событий IE, включают IE, Opera).
2. Объекты событий - это объекты, используемые для записи соответствующей информации, когда возникают некоторые события, но объекты события будут генерироваться только тогда, когда произойдут события, и могут быть доступны только внутренне функцией обработчика событий. После того, как все функции обработчика событий выполняются, объект события уничтожен!
Выше приведено способ обработки событий JavaScript (три типа), представленные вам редактором. Я надеюсь, что это будет полезно для вас!