На этом шаге мы рассмотрим некоторые побочные эффекты всплытия событий.
Всплытие события может вызывать побочные эффекты, особенно когда элементы по ошибке реагируют на событие mouseover или mouseout. Рассмотрим обработчик события mouseout, присоединенный в нашем примере к элементу <div>. Когда указатель мыши покидает пределы элемента <div>, вызывается обработчик события mouseout, как и ожидается. Поскольку данный элемент находится на вершине иерархии, никакой другой элемент не получает это событие. С другой стороны, когда указатель мыши покидает пределы элемента <а>, этому элементу передается событие mouseout. После чего это событие будет всплывать сначала к элементу <span>, а затем к элементу <div>, вызывая запуск того же обработчика события. Такая последовательность всплытия не всегда бывает желательной; для случая кнопок переключателя стилей в нашем примере это могло бы привести к преждевременному снятию выделения.
Метод .hover() учитывает описанные выше особенности всплытия событий, благодаря чему при использовании этого метода для подключения обработчика мы можем забыть о проблемах, связанных с передачей события mouseover или mouseout не тому элементу. Это делает метод .hover() очень привлекательной альтернативой технике присваивания отдельных обработчиков событий мыши.
Только что описанная ситуация, связанная с событием mouseout, наглядно демонстрирует необходимость ограничивать область видимости события. Несмотря на то, что метод .hover() корректно обрабатывает конкретный случай, мы будем сталкиваться с другими ситуациями, требующими ограничения распространения события в пространстве (предотвращения возможности передачи события определенным элементам) или во времени (предотвращения возможности передачи события в определенные моменты времени).
На следующем шаге мы рассмотрим изменение движения события.