- •2. Что такое события в JavaScript
- •2.1. Как связать событие и JavaScript
- •2.3. Основные события в JavaScript
- •2.4. События, о которых не было сказано
- •3. Return к функциям (функции и события)
- •4. Еще один пример использования функций и событий
- •5. События и его свойства (Event)
- •5.1. Передача объекта Event внутрь обработчика события
- •5.2. Всплывание события cancelBubble
- •5.3. Вызов стандартного обработчика
- •5.4. Практика работы с мышью: перетаскивание элементов
- •6. Функции (нюансы) Итак, события мы рассмотрели полностью, но в функциях существует множество нюансов, поэтому следующая тема будет посвящена именно им.
- •6.1. Знакомство с рекурсией.
- •Пример на рекурсию
- •Р екурсии или итерации?
- •6.2. Функция – это переменная. Несколько видов объявлений функций.
- •6.3. Функция внутри функции
- •6.4. Условная функция
- •7. Самостоятельное задание:
5.1. Передача объекта Event внутрь обработчика события
Объект действительно создается в момент возникновения события и его нужно передавать внутрь обработчика так же, как и ссылку this, но вся проблема в том, что в IE все работает не так. В IE объект создается внутри обработчика и имеет имя window.event, но с этим легко бороться. Давайте рассмотрим это наследующем примере, заодно и проверим некоторые свойства объекта Event:
<html> <head> <script> function mouseShowHandler(e){ //В один момент времени может существовать или переданный объект e или window.event //В конечном итоге переменная e будет равна одному из них e = e || window.event //Также можно использовать следующую запись //e = window.event ? window.event : e; //Первая проще //Записываем координаты мыши document.getElementById('mouse').innerHTML = e.clientX + "px " + e.clientY + "px"; } </script> <style> body { margin: 0px; paddig: 0px; height: 100%; width: 100%; } </style> </head> <body onmousemove="mouseShowHandler(event);"> <div style="position: absolute; right: 0px; bottom: 0px;" id="mouse"></div> </body> </html>
Вместо clientY вы можете использовать другие координаты мыши, заодно посмотреть, чем они отличаются. Только желательно использовать их для конкретных блоков на странице, если они у вас есть.
Давайте кратко рассмотрим некоторые свойства объекта Event.
5.2. Всплывание события cancelBubble
"Всплыванием" события (bubble) называют процесс передачи события от дочернего элемента к родительскому после его обработки. В пример можно поставить ссылку на сайте – если вы на нее нажмете, то должно сработать событие onClick для ссылки и событие onClick для всех элементов, которые находятся под этой ссылкой, даже для элемента body. То есть, после того, как некоторый элемент обработает событие, оно будет передано на обработку родительскому элементу. Таким образом, событие как бы поднимается по дереву элементов вверх – всплывает. Рассмотрим этот процесс на примере:
<html> <head> <style type="text/css"> #center { height: 200px; } div { border: 1px solid black; margin: 100px; } </style> <script type="text/javascript"> function clickHandler (elem) { elem.style.backgroundColor="darkgreen"; alert ("Нажмите 'Ок' для продолжения"); } </script> </head> <body onclick="clickHandler(this)"> <div onclick="clickHandler(this)"> <div id="center" onclick="clickHandler(this)"></div> </div> </body> </html>
Как следует из кода примера, на странице три элемента (<body> и два элемента <div>) обрабатывают событие одного и того же типа – onclick. При этом для его обработки они используют одну функцию – clickHandler(elem), которая меняет фоновый цвет переданного ей элемента на зеленый и выдает сообщение методом alert(). Элемент, который требуется перекрасить, передается функции обработки посредством внутреннего указателя this. Таким образом, при вызове функции clickHandler(this) для некоторого элемента, this будет указывать на сам элемент.
Чтобы увидеть процесс всплывания события щелкните мышью на внутреннем прямоугольнике страницы. После щелчка он окрасится в зеленый цвет и будет выдано сообщение "Нажмите 'Ок' для продолжения". Процесс повторится для внешнего прямоугольника, а, затем, и для всей страницы. Если же щелкнуть сразу на внешнем прямоугольнике, то вы увидите уже два сообщения, а центральный прямоугольник останется неизмененным.
В ряде случаев всплывание события дает нежелательный эффект и его требуется запретить. Для этого необходимо присвоить значение true свойству cancelBubble объекта event:
event.cancelBubble = true;
Перепишем пример с использованием свойства cancelBubble:
<html> <head> <style type="text/css"> #center { height: 200px; } div { border: 1px solid black; margin: 100px; } </style> <script type="text/javascript"> function clickHandler (e, elem) { elem.style.backgroundColor = "darkgreen"; alert ("Нажмите 'Ок' для продолжения"); e = e || window.event e.cancelBubble = true; } </script> </head> <body onclick="clickHandler(event, this)"> <div onclick="clickHandler(event, this)"> <div id="center" onclick="clickHandler(event, this)"></div> </div> </body> </html>
Теперь событие не всплывает и при каждом клике на элементе перекрашивается именно тот элемент, по которому вы кликнули, и событие не распространяется на элементы, находящиеся под этим элементом.
Это свойство редко когда может пригодиться, но необходимо знать, что оно есть.