Существует три способа обработки событий JavaScript: 1. Обработчик событий HTML, добавьте обработчик событий непосредственно в код HTML, синтаксис: «<element event=event function...>» 2. Обработчик событий уровня DOM0, для события; указанный объект Чтобы добавить обработку событий, используется следующий синтаксис: «element object.event=function(){...}» 3. Обработчики событий уровня DOM2 также добавляются к конкретным объектам и в основном используются для обработки операций указания и; удаление обработчиков событий.
Операционная среда этого руководства: система Windows 10, версия JavaScript 1.8.5, компьютер Dell G3.
3 способа использования обработчиков событий Javascript
Когда происходит событие, мы должны его обработать. Существует три основных метода обработчиков событий Javascript:
1. Обработчик событий HTML
То есть мы добавляем обработчики событий непосредственно в HTML-код, например следующий код:
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("Добавленная обработка событий HTML");Из приведенного выше кода мы видим, что обработка событий непосредственно вложена в элемент. Здесь есть проблема: связь между HTML-кодом и js слишком сильная. Если однажды вы захотите изменить showmsg в js, то не только. нужно ли вам модифицировать его в js, вам также необходимо изменить его в html. Мы можем принять одну или две модификации, но когда ваш код достигнет уровня 10 000 строк, модификация потребует много времени и денег. , мы не рекомендуем этот метод.
2. Обработчик событий DOM уровня 0.
То есть, чтобы добавить обработку событий для указанного объекта, посмотрите следующий фрагмент кода:
<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); btn.onclick=function(){ alert("Обработка добавленных событий на уровне DOM" ); } btn.onclick=null;//Если вы хотите удалить событие щелчка btn, просто установите для него значение null</script>Из приведенного выше кода мы видим, что по сравнению с обработчиками событий HTML, событиями DOM уровня 0, связь между HTML-кодом и js-кодом значительно уменьшена. Однако умные программисты все еще не удовлетворены этим и надеются найти более простой способ справиться с этим. Давайте рассмотрим третий способ справиться с этим.
3. Обработчик событий уровня DOM2.
DOM2 также добавляет обработчики событий к конкретным объектам, но в основном включает в себя два метода обработки операций указания и удаления обработчиков событий: addEventListener() и RemoveEventListener(). Все они получают три параметра: имя события, которое необходимо обработать, функцию в качестве обработчика события и логическое значение (будет ли обрабатываться событие на этапе захвата). Посмотрите на следующий фрагмент кода:
<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//Здесь мы Для последнего значения установлено значение false, то есть оно не будет обрабатываться на этапе захвата. Вообще говоря, обработка всплывания имеет лучшую совместимость в различных браузерах function showmsg(){ alert("Обработчик добавленного события уровня DOM" }; btn.removeEventListener ("click",showmsg,false);//Если вы хотите удалить это событие, просто передайте те же параметры</script>Здесь мы видим, что при добавлении и удалении обработки событий последний метод является более прямым и простым. Однако Ма Хайсян напоминает всем, что при обработке события удаления передаваемые параметры должны соответствовать предыдущим параметрам, иначе удаление будет недействительным!
Расширьте свои знания:
Поток событий описывает порядок, в котором события принимаются на странице. На заре разработки браузеров два основных производителя браузеров, IE и Netscape, конфликтовали друг с другом, что приводило к разочаровывающей ситуации. поток событий был совершенно противоположным определению. Это то, с чем мы знакомы: всплывание событий IE, захват событий Netscape. Давайте сначала сфотографируемся и кратко рассмотрим конструкцию:
1. Всплеск событий
Всплытие событий означает, что событие первоначально принимается наиболее конкретным элементом (узлом с самым глубоким уровнем вложенности в документе), а затем распространяется вверх к наименее конкретному узлу (документу). Возьмите приведенное выше изображение, чтобы проиллюстрировать, что при нажатии на текстовую часть она сначала принимается элементом в тексте, а затем шаг за шагом распространяется на окно, то есть процесс 6-7-8-9-10. выполняется.
2. Захват событий
Захват событий означает, что событие сначала получает менее конкретный узел, а наиболее конкретный узел получает событие последним. Аналогично, в приведенной выше модели, когда щелкают текстовую часть, она сначала принимается окном, а затем шаг за шагом распространяется на текстовый элемент, то есть выполняется процесс 1-2-3-4-5.