let theElement = document.querySelector("#three_a");
theElement.addEventListener("click", doSomething, true);
function doSomething(e) {
e. stopPropagation();
}
В данном случае при нажатии на buttonOne путь нашего события будет выглядеть так:
Событие click начнет быстрое движение вниз по дереву DOM, уведомляя каждый элемент на своем пути к buttonOne. Так как элемент three_a прослушивает событие click во время фазы погружения, будет вызван связанный с ним обработчик событий:
function doSomething(e) {
e. stopPropagation();
}
Как правило, события не продолжают распространение, пока взаимодействие с активированным обработчиком событий не будет завершено. Поскольку обработчик событий для three_a настроен реагировать на событие click, происходит вызов обработчика событий doSomething. Событие попадает в состояние задержки до тех пор, пока обработчик событий doSomething не будет выполнен и возвращен.
В данном случае событие не будет распространяться. Обработчик событий doSomething оказывается его последним клиентом благодаря функции stopPropagation, которая притаилась в тени, чтобы разделаться с событием раз и навсегда. Событие click не достигнет элемента buttonOne и не получит возможности вернуться к корню, как бы печально это ни было.
СОВЕТ
В вашем объекте события существует еще одна функция, с которой вы можете ненароком встретиться, и называется она preventDefault:
function overrideScrollBehavior(e) {
e. preventDefault();
// делает что-нибудь
}
Действия этой функции немного загадочны. Многие HTML-элементы при взаимодействии с ними демонстрируют стандартное поведение. Например, щелчок по текстовой рамке производит переключение на нее и вызывает появление мигающего курсора. Использование колесика мыши в области, допускающей прокрутку, приведет к прокрутке в соответствующем направлении. Щелчок в графе для галочки переключит состояние отметки в положение да/нет. Браузер по умолчанию знает, как обработать встроенные реакции на все приведенные события.
Если нужно отключить это встроенное поведение, можно вызвать функцию preventDefault. Ее нужно вызывать во время реагирования на событие в элементе, чью встроенную реакцию вы хотите проигнорировать. Мой пример применения этой функции можно посмотреть здесь: http://bit.ly/kirupaParallax.
КОРОТКО О ГЛАВНОМ
Ну и как вам эта тема про события с их погружением и всплытием? Лучшим способом освоить принципы работы погружения и всплытия событий будет написание кода и наблюдение за перемещением события по DOM.
На этом мы завершили техническую часть этой темы, но если у вас есть несколько свободных минут, я предлагаю вам посмотреть связанный с ней эпизод Comedians in Cars Getting Coffee, метко названный It’s Bubble Time, Jerry!. Это, вероятно, их лучший эпизод, в котором Майкл Ричардс и Джерри Сайнфелд попивают кофе и беседуют о событиях, фазе всплытия и прочих, на мой взгляд, важных вещах.
Глава 33. События мыши
Один из наиболее распространенных способов взаимодействия с компьютером — это использование мыши (рис. 33.1).
Рис. 33.1. Кошки их тоже наверняка любят
Перемещая это волшебное устройство и нажимая на его кнопки, можно совершать множество полезных действий. При этом использование мыши простым пользователем — это одно. Для разработчика же согласование работы кода с действиями мыши — уже совсем другое. Здесь мы и начнем очередную главу.
Знакомьтесь с событиями мыши
В JavaScript основным способом работы с мышью являются события. Для этой задачи предусмотрено их великое множество, но в этой теме мы не станем рассматривать все подряд, а вместо этого сфокусируемся на самых популярных:
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• mousedown
• mouseup
• mousemove
• contextmenu
• mousewheel и DOMMouseScroll
Названия этих событий могут уже дать некоторое представление об их назначении, но мы, тем не менее, рассмотрим каждое из них подробнее. Хочу сразу предупредить вас, что некоторые из событий ужасно скучны.
Одинарный или двойной клик
Начнем с наиболее часто используемого события мыши — клика. Это событие срабатывает, когда вы щелкаете по элементу. Иначе можно сказать, что событие click срабатывает, когда вы используете мышь для нажатия на элемент, а затем отпускаете нажатие, сохраняя курсор на этом элементе.