Каждая платформа JavaScript реализует кросс-браузерную обработку событий, побуждая вас отойти от встроенного добавления событий в старом стиле и использовать оптимизированный линейный подход. Взгляните на пример jQuery в листинге 6, в котором событие hover используется для выделения элемента div.
Листинг 6. Прикрепление события наведения с помощью jQuery
$('#the-box').hover(function() {
$(this).addClass('выделить');
}, функция() {
$(this).removeClass('выделить');
});
Это особое событие jQuery, и вы обнаружите, что оно предоставляет две функции. Первая функция вызывается при возникновении события onMouseOver, а вторая функция вызывается при возникновении события onMouseOut. Это связано с тем, что не существует стандартного события DOM для наведения. Давайте посмотрим на более типичное событие, такое как щелчок (см. листинг 7):
Листинг 7. Прикрепление событий кликов с помощью jQuery
$('#the-button').click(function() {
alert('Вы нажали кнопку!');
});
Как видите, в экземпляре имеется только один параметр функции. Большинство событий в jQuery обрабатываются одинаково, с использованием обработчиков событий в jQuery, контекст указывает на то, какой объект инициировал событие. Некоторые платформы работают не так. В случае с Prototype код в листинге 7 выглядит точно так же, как в листинге 8.
Листинг 8. Прикрепление событий кликов с помощью Prototype
$('the-button').observe('click', function(e) {
alert('Вы нажали кнопку!');
});
Первое, что вы заметите, это отсутствие функции щелчка, а есть функция наблюдения, которая принимает параметр события перед ссылкой на себя. Вы также заметите, что функция принимает параметр e, где контекст относится к элементу, вызвавшему событие. Чтобы увидеть, как это работает, перепишем код листинга 6, используя Prototype (см. листинг 9).
Листинг 9. Прикрепление событий наведения с помощью Prototype
$('the-box').observe('mouseover', function(e) {
вар эль = Event.element(e);
el.addClassName('выделение');
});
$('the-box').observe('mouseout', function(e) {
вар эль = Event.element(e);
el.removeClassName('выделить');
});
jQuery также отличается: вам нужно использовать только функцию $ для получения переменных контекста, а библиотека Prototype использует функцию Event.element(). Кроме того, вы заметили, что вам необходимо разделить события mouseover и mouseout.
Из некоторых руководств в этой статье вы можете увидеть, что функции создаются встроенными, а не именуются. Это означает, что его нельзя использовать повторно, а пример наведения Prototype также дает нам возможность увидеть, как использовать именованные функции. Листинг 10 иллюстрирует этот метод.
Листинг 10. Улучшение событий наведения с помощью Prototype
Вы заметите, что на этом этапе вам нужно определить только одну функцию. Он вызывается как событиями mouseover, так и mouseout. Эта функция определяет, имеет ли элемент имя класса «выделение», и добавляет или удаляет его в зависимости от результата. Вы также заметите, что параметр e передается неявно. Другими словами, вы передали в функцию наблюдения неоднозначный аргумент.
Адрес перепечатки: http://www.denisdeng.com/?p=720 .
Исходный адрес: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html.
функция toggleClass(e) {
вар эль = Event.element(e);
если (el.hasClassName('выделить'))
row.removeClassName('выделить');
еще
row.addClassName('выделить');
}
$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);