Связанные показания:
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. Общественные члены объекта события
1. Общественные члены мероприятия в DOM
Объект события содержит свойства и методы, связанные с конкретным событием, которое его создало. Типы запускаемых событий разные, а доступные свойства и методы различны. Тем не менее, все события в DOM имеют следующих публичных членов.
а Сравнение CurrentTarget и Target
Внутри обработчика событий, объект, который всегда равняется значению CurrentTarget, а цель просто содержит фактическую цель события.
Например: на странице есть кнопка, зарегистрируйте событие Click в теле (родительский узел кнопки). Когда кнопка нажимается, событие Click будет пузыриться в тело для обработки.
<body> <input id = "btn" type = "button" value = "click"/> <script> document.body.onclick = function (event) {console.log ("Нажмите событие, зарегистрированное в Body"); console.log ("this === event.currenttarget?"+(this === event.currenttarget)); // true console.log ("currentTarget === Document.Body?"+(event.currentTarget === Document.Body)); // true console.log ('event.target === document.getElementById ("btn")? // true} </script> </body>Результат работы:
беременный Через атрибут типа можно обрабатывать несколько событий в функции.
Принцип: Разные события обрабатываются по -разному, обнаруживая атрибут события.
Например: Определите функцию обработчика для обработки 3 типов событий: щелчок, Mouseover, Mouseout.
<body> <input id = "btn" type = "cutting" value = "click"/> <script> var handler = function (event) {switch (event.type) {case "Click": alert ("clicked"); перерыв; case "mouseover": event.target.style.backgroundcolor = "pink"; перерыв; case "Mouseout": event.target.style.backgroundcolor = ""; }}; var btn = document.getElementById ("btn"); btn.onclick = Handler; btn.onmouseover = Handler; btn.onmouseout = Handler; </script> </body>Запустите эффект: нажмите кнопку, и поле появляется. Когда мышь проходит через кнопку, цвет фона кнопки становится розовым; Когда мышь покидает кнопку, цвет фона возвращается к по умолчанию.
в Сравнение StopPropagation () и StopmidiatiatePropagation ()
То же самое: Stoppropagation () и StopimmediatePropagation () могут использоваться для отмены дальнейшего захвата или пузырька событий.
Разное: разница между ними заключается в том, что, когда событие имеет несколько обработчиков событий, StopmedItiatePropagation () может помешать обработчику события быть вызванным позже.
Например:
<body> <input id = "btn" type = "кнопка" value = "click"/> <script> var btn = document.getElementById ("btn"); btn.addeventlistener ("click", function (event) {console.log ("Buttn chlick Слушай один раз"); // event.stoppropagation (); // Эффект некомменного просмотра // event.stopimmediatePropagation (); // Эффект некваженного просмотра}, false); btn.addeventlistener ("click", function () {console.log ("Кнопка нажимает дважды»);}, false); document.body.onclick = function (event) {console.log ("Body Clicked"); } </script> </body>Эффект бега:
D, Eventphase
Значение Eventphase составляет 1 в фазе захвата, 2 в целевой фазе и 3 в пузырьковой фазе.
пример:
<body> <input id = "btn" type = "button" value = "click"/> <script> var btn = document.getElementById ("btn"); btn.onclick = function (event.) {console.log ("Кнопка DOM0-Level Method Add Event Levlyphase event., event.eventphase); console.log («Метод кнопки Dom2-уровня добавляет обработчик событий, а значение Eventphase-«+event.eventphase);}, true); btn.addeventListener («click», function (event) {console.log («Кнопка DOM2 Метод уровня добавления событий, а значение события-«+Eventfase); document.body.addeventlistener ("click", function (event) {console.log ("корпус добавляет обработчик событий, а значение eventphase -"+event.eventphase);}, true); document.body.addeventlister ("click", функция (Event) "+event.eventphase);}, false); </script>Эффект бега:
2. Общественные члены мероприятия в IE
Свойства и методы событий в IE будут варьироваться от типа событий к DOM, но некоторые из них являются публичными членами, которые имеют все объекты, и большинство из этих членов имеют соответствующие свойства или методы DOM.
Выше приведено соответствующее знание публичных членов (атрибутов и методов) события, которое редактор представил вам (iv), и я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение!