Концепция событий
Событие: относится к некоторым конкретным моментам взаимодействия, которые встречаются в документе или окне браузера. Мы можем запланировать события через слушателей (или обработчиков), чтобы соответствующий код был выполнен, когда произойдет событие.
1. Событие потока
1. Поток событий: описывает порядок, в котором события принимаются на странице
2. Пузырьки события: полученный наиболее специфическим элементом, а затем пропагандировал шаг вверх по шагам к узлу наименее конкретного элемента (документ)
3. Захват событий: наименее специфический узел получает событие сначала, в то время как самый специфический узел должен получить событие последним.
2. Обработка событий
1. HTML Обработка событий: напрямую добавить в структуру HTML
2. Обработка событий DOM0: назначить функцию атрибуту обработчика событий
3. Обработка событий DOM2 уровня:
addEventListener («Имя события», «Функция обработчика событий», логическое значение)
Верно: захват событий
Неверно: Пузыри события
RemoveEventListener ();
4. Т.е. обработчик событий
AttachEvent
Отряд
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "div"> <button id = "btn1"> кнопка </button> </div> <! обработка ");} </script>-> <!-<script> var btn1 = document.getElementbyid (" btn1 "); btn1.onclick = function () {alert (" hello dom0 level handler event ")}; // переоценка btn1.onclick = funct function () {alert ("hello dom0 уровня обработчика событий 3")}; </script>-> <!-<script> var btn1 = document.getElementById ("btn1"); btn1.addeventlistener ("click", demo1); btn1.addeventlistener ("click", demo2); btn1.addeventListener ("click", demo3); function demo1 () {alert ("dom2 avent handler 1"); Обработчик событий 2 ");} функция demo3 () {alert (" Обработчик событий Dom2 уровня 3 ");} btn1.removeeventListener (" click ", demo2) </script>-> <croppl> var btn1 = document.getElementById ("btn1"); if (btn1.addeventListener) {btn1.addeventListener ("click", demo);} else if (btn1.attachevent) {btn1.attachevent ("onclick", demo)} else {btn1.onclic demo () {alert ("hello");} </script> </body> </html>Iii. Объект события
1. Объект события: объект будет генерироваться при запуска событий DOM.
2. Событие объекта события:
Тип: получить тип события
цель: получить цель события
StopPropagation (): предотвратить события от пузырьков
Предотвратить поведение по умолчанию Block Event
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "div"> <button id = "btn1"> кнопка </button> <a href = "http://www.baidu.com" id = "AID"> baidu </a> </div> <script> document.getElementById ("btn1"). addEventListener ("click", showtype); document.getElementById ("div"). AddEventListener ("click", showdiv); document.getElementById ("aId") Showtype (event) {// alert (event.type); alert (event.target); event.stoppropagation (); // Стоп -пузыри события} function showdiv () {alert ("div")} function showa (event) {// event.stoppropation (); // Event.preventDefault ();} </script> </body> </html>