На этом шаге мы рассмотрим один из способов изменения движения события.
Мы уже видели одну ситуацию, когда всплытие события может породить проблемы. Чтобы показать случай, когда метод .hover() оказывается не в состоянии помочь в решении наших проблем, мы изменим реализацию скрытия элементов, продемонстрированную в прошлых шагах.
Предположим, что нам необходимо расширить область, на которой можно щелкнуть, чтобы свернуть или развернуть переключатель стилей. Один из способов добиться желаемого эффекта заключается в том, чтобы переместить обработчик события из метки, элемент <h3>, в содержащий ее элемент <div>:
$(document).ready(function() {
$('#switcher').click(function() {
$('#switcher .button').toggleClass('hidden');
});
});
Рис.1. Изменение области переключения
Текст этого примера можно взять здесь.Это изменение позволит использовать всю область переключателя стилей для управления его видимостью. Недостаток такой реализации состоит в том, что щелчок на кнопке будет также приводить к свертыванию переключателя стилей после изменения оформления содержимого страницы. Это обусловлено всплытием события: сначала событие обрабатывается кнопками, а затем распространяется вверх по дереву DOM, пока не достигнет элемента <div id="switcher">, где активируется наш новый обработчик, и скрывает кнопки.
Чтобы решить данную проблему, нам необходимо получить доступ к объекту события, то есть к конструкции JavaScript, передаваемой при вызове каждого обработчика события. Этот объект содержит информацию о событии, такую как координаты указателя мыши в момент появления события. Кроме того, он обладает некоторыми методами, которые могут применяться для оказания влияния на дальнейшее распространение события по дереву DOM.
Чтобы получить возможность использовать объект события внутри обработчика, достаточно добавить параметр в функцию:
$(document).ready(function() {
$('#switcher').click(function(event) {
$('#switcher .button').toggleClass('hidden');
});
});
На следующем шаге мы рассмотрим использование введенного параметра функции.
