В этой статье мы рассмотрим методы jQuery, которые предназначены для обработки различных событий, возникающих на странице.
Событие– это «сигнал», возникающий в браузере, который сообщает вам, что что-то произошло для того, чтобы вы могли с ним взаимодействовать.
Например, событие click возникает при клике пользователем на DOM-элементе. Кроме click, в браузере генерируются множество других событий. Здесь же мы остановимся на рассмотрение методов, которые предоставляет библиотека jQuery для работы с ними.
Обработка событий с помощью методов jQuery
Перед тем как переходить к добавлению элементам обработчиков событий, эти элементы сначала необходимо получить.
В jQuery повесить событие (слушатель событий) на определённый элемент можно с помощью функций on и one, а также кратких записей on.
// функция on
.on(events,handler);
// функция one
.one(events,handler);
// events - событие или список событий через пробел, при наступлении которых необходимо выполнить обработчик (handler)
// handler - функция (обработчик события)
// краткая запись функции on
.event(handler);
// event - название события (можно использовать для обработки только тех событий, для которых в jQuery создана такая краткая запись)Функция one отличается от on только тем, что она выполняет обработчик при наступлении указанного события только один раз.
Например, добавим с помощью функции onсобытие clickдля всех элементов с классом btn:
// использование в качестве обработчика анонимной функции
$('.btn').on('click', function() {
// действия, которые будут выполнены при наступлении события...
console.log($(this).text());
});
// использование обычной функции в качестве обработчика
var myFunction = function() {
console.log($(this).text());
}
$('.btn').on('click', myFunction);Вышеприведённый код, записанный с использованием короткой записи функции on:
$('.btn').click(function() {
// действия, которые будут выполнены при наступлении события...
console.log($(this).text());
});Дополнительная информация о событии
При обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта Event в обработчик события осуществляется всегда посредством первого аргумента.
$('#demo').on('click', function(e){
// e – объект Event, содержащий дополнительную информацию о произошедшем событии
// часто используемые свойства объекта Event
e.preventDefault(); //отменить выполнение действия по умолчанию
e.stopPropagation(); //остановить дальнейшее всплытие события
// e.type – получить тип события
// e.target – ссылка на элемент, на котором произошло событие
// e.currentTarget - ссылка на текущий элемент (для которого сработал обработчик). Это свойство, как правило, равно функции this.
// e.currentTarget === this
// e.which – код клавиши (для мыши), код кнопки или символа (для клавиатуры)
//e.pageX, e.pageY – координаты курсора, относительно левого верхнего угла документа
});Пространство имён
В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.
Например:
// событие click в пространстве имён first
$('#demo').on('click.first',function(){
console.log('1 обработчик события click');
});
// событие click в пространстве имён second
$('#demo').on('click.second',function(){
console.log('2 обработчик события click');
});Пространство имён - это очень удобная вещь. Она используется, например, когда вам необходимо вызвать не все события, а только с определённым именем.
// вызвать событие click в пространстве имён first
$('#demo').trigger('click.first');
// вызвать событие click в пространстве имён second
$('#demo').trigger('click.second');Также с его помощью очень просто удалять определённые события:
//удалить обработчики события click в пространстве имён first
$('#demo').off('click.first');
//удалить обработчики события click в пространстве имён second
$('#demo').off('click.second');Описание и примеры использования функций triggerи offрассматриваются в статье немного ниже.
Передача дополнительных данных в обработчик
При необходимости вы можете передать данные в обработчик события (посредством указания дополнительного аргумента в функции on). Доступ к переданным данным внутри обработчика осуществляется через объект Event.
Осуществляется это так (пример):
<div id="content"></div>
<button id="showContent1">Показать контент 1</button>
<button id="showContent2">Показать контент 2</button>
...
<script>
$('#showContent1').on('click', {title:'Заголовок 1', content: 'Содержимое 1...'}, function(e){
var output = '<b>'+e.data.title+': </b>' + e.data.content;
$('#content').html(output);
});
$('#showContent2').on('click', {title:'Заголовок 2', content: 'Содержимое 2...'}, function(e){
var output = '<b>'+e.data.title+': </b>' + e.data.content;
$('#content').html(output);
});
</script>Как повесить несколько событий на один элемент
Пример использования одного обработчика для нескольких (2 или более) событий:
$('#id').on('keyup keypress blur change', function(e) {
console.log(e.type); // тип события
});
// или так
var myFunction = function() {
...
}
$('#id')
.keyup(myFunction)
.keypress(myFunction)
.blur(myFunction)
.change(myFunction);Для каждого события своя функция:
$("#id").on({
mouseenter: function() {
// обработчик события mouseenter...
},
mouseleave: function() {
// обработчик события mouseleave...
},
click: function() {
// обработчик события click...
}
});Пример использования в jQuery несколько обработчиков (функций) на одно событие:
$("#demo").click(function(){
console.log('1 обработчик события click');
});
$("#demo").click(function(){
console.log('2 обработчик события click');
});Например, узнать в какой очерёдности будут выполняться события можно так:
var eventList = $._data($('#demo')[0], 'events');
console.log(eventList);Программный вызов события
Для вызова события из кода в jQuery есть 2 метода:
trigger- вызывает указанное событие у элемента.
triggerHandler- вызывает обработчик события, при этом само событие не происходит.
$('#header').on('click',
function() {
console('Произошёл клик на элементе #header');
}
});
// программный вызов события click элемента
$('#header').trigger('click');
// короткая запись данного вызова
$('#header').click();
// вызов обработчика события click у выбранного элемента
$('#header').triggerHandler('click');jQuery - Событие загрузки страницы (ready)
Процесс добавления к некоторому элементу обработчика события обычно осуществляется после загрузки страницы, т.е. когда DOM дерево документа уже построено. Иначе при написании обработчиков, вы можете обратиться к элементам, которых ещё нет на странице.
Самая короткая запись события загрузки страницы в jQuery выглядит так:
$(function(){
// действия, которые необходимо выполнить после загрузки документа...
});Но, можно использовать и более длинную запись:
$(document).ready(function(){
// действия, которые необходимо выполнить после загрузки документа...
});jQuery - Событие загрузки (load)
Событие load браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: image, script, iframe и window.
Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):
$(window).on('load', function() {
// действия после полной загрузки страницы...
});Например, выведем сообщение в консоль, когда указанное изображение будет загружено:
<img id="image" src="image.png">
...
<script>
$('#image').on('load', function() {
console.log('Изображение загружено');
});
</script>jQuery - События мыши
В jQuery для отслеживания действий мыши наиболее часто используют следующие события:
-
mousedown
-
mouseup
-
click
-
mousemove
-
wheel
-
hover
-
mouseenter
-
mouseover
-
mouseleave
-
mouseout
jQuery - Событие клик (click)
Событие click является сложным событием, оно возникает после генерирования событий mousedown и mouseup. Событие mousedownвозникает, когда указатель находится над элементом и кнопка мыши нажата. Событие mouseupпроисходит, когда указатель находится над элементом и кнопка мыши отпущена. Событие click генерируется, когда курсор находится над элементом, и клавиша мыши нажата и отпущена. Эти события могут получать любые HTML элементы.
Например, повесим обработчик на событие onclickэлемента window. При наступлении данного события обработчик будет выводить номер нажатой клавиши и координаты курсора:
$(window).on('click', function(e) {
// обработка события click...
console.log('Нажата кнопка: ' + e.which); //1 - левая кнопка, 2 - средняя кнопка, 3 - правая
console.log('Координаты курсора: x = ' + e.pageX + ' ; y = ' + e.pageY);
});Например, повесим событие onclickна все элементы с классом btn:
$('.btn').on('click', function(){
// код обработчика события нажатия кнопки
...
});Краткая запись события по клику:
$('.btn').click(function(){
...
});Например, разберем, как можно скрыть блок через некоторое время после события click:
<div class="message">
...<a class="hide-message" href="#">Скрыть блок через 5 секунд</a>...
</div>
...
<script>
$('.hide-message').click(function(e){
e.preventDefault();
var _this = this;
setTimeout(function(){
$(_this).closest('.message').hide();
}, 5000);
});
</script>jQuery - Событие при наведении (hover)
Событие при поднесении курсора является сложным и состоит из 2 событий:
-
вхождения (mouseenter, mouseover);
-
покидания (mouseleave, mouseout).
События mouseenter и mouseleave в jQuery отличаются от mouseoverи mouseoutтолько тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseoutвсплывают, а mouseenter и mouseleave– нет.
Например, изменим цвет элемента списка при поднесении к нему курсора:
<ul id="list">
<li>Ручка</li>
<li>Карандаш</li>
<li>Линейка</li>
</ul>
...
<script>
$('ul>li').
mouseenter(function(){
// при вхождении в элемент
$(this).css('color','orange');
}).
mouseleave(function(){
// при покидании элемента
$(this).css('color','black');
});
</script>Те же самые действия, но использованиям mouseoverи mouseout:
$('ul>li').
mouseover(function(){
// при вхождении в элемент
$(this).css('color','orange');
}).
mouseout(function(){
// при покидании элемента
$(this).css('color','black');
});Данные методы необязательно использовать вместе, их можно также применять по отдельности.
Например, подсчитаем количество посещений элемента при наступлении события "Навести мышью":
<div id="count">Количество: <span>0</span></div>
...
<script>
$('#count').mouseenter(function(){
var count = parseInt($(this).find('span').text());
count++;
$(this).find('span').text(count);
});
</script>Вместо использования mouseenter и mouseleave можно использовать событие hover.
Например, перепишем вышеприведённый пример, используя hover:
$('ul>li').hover(
function(){
// при вхождении в элемент
$(this).css('color','orange');
},
function(){
// при покидании элемента
$(this).css('color','black');
}
);При использовании события hover в jQuery, первый обработчик используется для задания действий при вхождении курсора в элемент (mouseenter), а второй - при покидании (mouseleave).
Если указать событию hover один обработчик, то он будет выполняться как для обработки наведения мыши, так и для её покидания.
Например:
$('h1').hover(function(){
console.log('Произошло события входа в элемент или выхода из него');
});jQuery - Событие движения мыши
Событие mousemove посылается элементу, когда указатель мыши перемещается внутри него. Любой HTML элемент может получать это событие.
$('.target').mousemove(function(e) {
console.log('Вызван обработчик для события mousemove.');
console.log('Координаты относительно левого верхнего угла документа: ' + e.pageX + ', ' + e.pageY);
console.log('Координаты курсора внутри цели: ' + e.offsetX + ', ' + e.offsetY);
});jQuery - Событие колёсика мыши (wheel)
Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:
$(window).on('wheel', function(e) {
// код обработчика (например)...
console.log('Количество прокрученных пикселей: ' + e.originalEvent.deltaY);
if (e.originalEvent.deltaY < 0){
console.log('Прокручиваем вверх');
} else {
console.log('Прокручиваем вниз');
}
});Данное событие в отличие от scroll генерируется браузером только для колёсика мышки, при этом неважно прокручивается элемент или нет, т.е. с ним можно работать на элементах с overflow, равным hidden. Еще одно отличие заключается в том, что wheel генерируется до прокрутки, а scroll- после неё.
jQuery – События клавиатуры
При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:
keydown -> keypress -> keyup
keydown(клавиша нажата, но ещё не отпущена);
keypress(событие генерируется для букв, цифр и других клавиш, за исключением управляющих) – предназначено для того чтобы получить код символа (события keydownи keyupпозволяют узнать только о коде клавиши, но не символа);
keyup(генерируется браузером при отпускании клавиши).
Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:
<input id="target" type="text" value="">
...
<script>
$('#target').on('keydown keypress keyup', function(e) {
console.log('Тип события: ' + e.type); // keydown, keypress, keyup
console.log('Код нажатой клавиши или символа: ' + e.which); // код символа позволяет получить только keypress
console.log('Нажата клавиша Alt: ' + e.altKey);
console.log('Нажата клавиша Ctrl: ' + e.ctrlKey);
console.log('Нажата клавиша Shift: ' + e.shiftKey);
console.log('Нажата клавиша Cmd (osMac): ' + e.metaKey);
});
</script>Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:
$(document).keypress("c",
function(e) {
if(e.ctrlKey) {
console.log('Нажато сочетание клавиш Ctrl+c');
}
});Пример, как можно прослушать сочетание клавиш Ctrl+Enter:
$(document).keydown(function(e) {
// с поддержкой macOS X
if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
// ваши действия...
}
}Пример, с использованием событий keydown и keyup:
<input id="name" type="text">
...
<script>
$('#name').
keydown(function(){
$(this).css('background-color', 'yellow');
}).
keyup(function(){
$(this).css('background-color, 'pink');
});
</script>jQuery – События элементов формы
В jQuery можно выделить следующие события для элементов формы и не только:
-
focus (focusin)
-
blur (focusout)
-
change
-
input (для текстовых элементов формы)
-
select
-
submit
jQuery - События получения и потери фокуса
Событие focus посылается элементу, когда он получает фокус. Данное событие генерируется для элементов input, selectи ссылок (a href="..."), а также любых других элементов, у которых установлено свойство tabindex. Получение элементом фокуса обычно осуществляется посредством клика или нажатия клавиши Tab на клавиатуре. Событие focus не всплывает.
Кроме focus есть ещё похожее событие, называется оно focusin. В отличие от focusданное событие всплывает, и оно может, например, использоваться для обнаружения события фокуса родительскими элементами.
Событие blur посылается элементу, когда он теряет фокус. Так же как и focus, событие blurимеет похожее событие focusout. Данное событие отличается от blur тем, что оно может всплывать. Это возможность можно использовать, например, для получения его на родительских элементах, а не только на том элементе, который его вызвал (target).
Например, при получении элементом divсобытия фокуса установим ему фон оранжевого цвета:
<div id="demo"><input type="text"></div>
...
<script>
$('#demo').
focusin(function(){
$(this).css('background-color','orange');
})
.focusout(function(){
$(this).css('background-color','inherit');
});
</script>Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:
$('#demo input').
focus(function(){
$(this).parent().css('background-color','orange');
})
.blur(function(){
$(this).parent().css('background-color','inherit');
});jQuery - Событие изменения (change)
Событие change предназначено для регистрации изменения значения элементов input, textarea и select. Для элементов select, checkboxes, и radi oкнопок данное событие возникает сразу (т.е. как только пользователь делает какой-то выбор). Но для других элементов данное событие не будет происходить до тех пор, пока этот элемент не потеряет фокус.
Пример использования события changeдля слежения за состоянием элемента checkbox. Доступность кнопки будет определять в зависимости от того в каком состоянии (checked или нет) находиться флажок:
<input type="checkbox" id="agree">
<button type="submit" id="send" disabled>Отправить</button>
...
<script>
$(function() {
$('#agree').on('change', function(){
if (this.checked) {
$('#send').prop('disabled',false);
} else {
$('#send').prop('disabled',true);
}
});
});
</script>Пример, в котором рассмотрим, как получить значение элемента selectпри его изменении:
<p id="result"></p>
<select id="list">
<option value="1">Первое значение</option>
<option value="2">Второе значение</option>
<option value="3">Третье значение</option>
</select>
...
<script>
$(function() {
$('#list').on('change', function(){
var value = $(this).val();
$('#result').text(value);
});
});
</script>Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:
<select name="colors" multiple="multiple">
<option>Зелёный</option>
<option>Красный</option>
<option>Синий</option>
<option>Коричневый</option>
<option>Фиолетовый</option>
<option>Серый</option>
</select>
...
<script>
$('select[name="colors"]')
.change(function () {
var colors = [];
$('select[name="colors"] option:selected').each(function() {
colors.push($(this).text());
});
console.log('Выбранные цвета: ' + colors.join());
})
.change();
</script>Пример программного вызова события changeдля элемента select:
// list - id элемента change
$('#list').trigger('change');
// краткая запись
$('#list').change();
// вызов только обработчика события change
$('#list').triggerHandler('change');Пример использования события изменения change для получения значения элемента input:
<input type="text" name="name">
...
<script>
$(function() {
// событие изменения значения input (возникает только после потери фокуса)
$('input[name="name"]').on('change',
function(){
var value = $(this).val();
console.log(value);
});
});
</script>Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.
Пример, использования события ввода для получения значения элемента input:
$('input[name="name"]').on('input',function(){
var value = $(this).val();
console.log(value);
});Пример, в котором представлен один из способов получения значения элемента textarea:
<textarea name="text"></textarea>
...
<script>
$('textarea[name="text"]').on('input',function(){
var value = $(this).val();
console.log(value);
});
</script>Пример, в котором рассмотрим, как с помощью события changeполучить значение выбранного элемента inputс type, равным radio:
<input type="radio" name="platform" checked="checked" value="windows">Windows
<input type="radio" name="platform" value="linux">Linux
<input type="radio" name="platform" value="macos">macOS
...
<script>
$(function() {
$('input[name="platform"]').on('change', function(){
var value = $(this).val();
console.log(value);
});
});
</script>jQuery - Событие выбора (select)
Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type="text" или textarea выделяет текст.
$( "#target" ).select(function() {
console.log('Вызван обработчик события select');
});jQuery – Событие отправки формы (submit)
Событие submitвозникает у элемента, когда пользователь пытается отправить форму. Данное событие может быть добавлено только к элементам form.
Пример, использования события submit:
<form id="feedback" action="action.php">
...
</form>
...
<script>
$('#feedback').submit(function(e) {
// отменить отправку формы
e.preventDefault();
// другие действия, например, для отправки формы по ajax...
});
</script>Программный вызов отправки формы:
$('#feedback').submit();
$('#feedback').trigger('submit');jQuery - Событие прокрутки (scroll)
Для отслеживания состояния скроллинга в jQuery используется событие scroll.
Например, повесим на событие прокрутки страницы функцию, которая будет отображать элемент с классом scrollup, если величина прокрутки больше 200px и скрывать его, если значение прокрутки меньше этой величины.
// краткая запись функции
$(window).scroll(function() {
// действия при скроллинге страницы...
if ($(this).scrollTop()>200) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});jQuery - Событие изменения размеров окна (resize)
Для прослушивания события изменения окна браузера используется resize:
Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:
$(window).resize(function() {
$('body').append('<p>Ширина x Высота = ' + window.innerWidth + ' x ' + window.innerHeight + '</p>');
});jQuery - Отмена стандартного поведения события
Некоторые элементы в HTML имеют стандартное поведение. Например, когда пользователь нажимает на ссылку, он переходит по адресу указанному в атрибуте href. Если вам это действие не нужно, то его можно отменить. Для отмены стандартного поведения необходимо вызвать в обработчике этого события метод preventDefault объекта event.
Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service:
$('a.service').on('click',function(e){
//отменяем стандартное действие браузера
e.preventDefault();
// действия, которые будет выполнять ссылка
...
});Что такое всплытие и как его остановить
Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:
текущий элемент (цель) -> родительский элемент цели -> прародительский элемент -> ... -> document -> window
В jQuery бывают сценарии, когда в представленной цепочке у какого-нибудь элемента то же есть обработчик для этого события, который выполнять не нужно. И чтобы это событие не распространилось на этот элемент, его необходимо остановить. Для этого в обработчике нужного элемента необходимо вызвать метод stopPropagationобъекта event. После вызова этого метода событие остановится, и не будет всплывать.
Например, необходимо чтобы при поднесении курсора к элементу с классом mark, его содержимое становилось оранжевым цветом.
<div class="mark">Некоторый текст...<span class="mark">фрагмент...</span>...продолжение...</div>
...
<script>
$('.mark').on('hover',
function(e){
e.stopPropagation();
$(this).css('color',orange);
},
function(e){
e.stopPropagation();
$(this).css('color',black);
}
});
</script>В данном случае если не указывать метод stopPropagation, то при поднесении курсора к элементу span с классом mark данное событие возникнет не только у него, но и у всех его родительских элементов. А это в этом примере приведёт к тому, что изменится цвет не только текста, заключенного в span, но и всего абзаца.
Если вам необходимо отменить стандартное поведение браузера и остановить всплытие события, то в jQuery вместо вызова двух этих методов можно просто вернуть в качестве результата функции значение false.
$('a').on('click', function(e){
//e.preventDefault();
//e.stopPropagation();
...
return false;
});Добавление событий к динамически созданным объектам
Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции on:
$(document).on(eventName, selector, handler);
// document или любой другой существующий родительский элемент
// eventName - имя события
// selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события
// handler - обработчик событияЭто действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является document. Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция onможет программно отобрать среди элементов (элемента, который вызвал это событие (target) и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции onобработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.
Например, добавим событие к элементу, которого ещё нет на странице:
<button id="addButton" type="button">Добавить кнопку</button>
<script>
// при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку
$('#addButton').on('click', function(e) {
$('body').prepend('<button class="deleteMe" type="button">Удалить меня</button>');
});
// добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице
$(document).on('click','.deleteMe', function() {
$(this).remove();
});
</script>Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
Например, запретим в комментариях переходить по внешним ссылкам (такие действия будем перенаправлять на страницу away):
$(document).on('click','#comment a',function(e) {
if(!(location.hostname === this.hostname || !this.hostname.length)) {
e.preventDefault();
location.href='away?link='+encodeURIComponent($(this).attr('href'));
}
});jQuery - Удалить обработчик события
Удаление обработчиков события осуществляется с помощью метода off. При этом с помощью него можно удалить только те обработчики, которые добавлены посредством метода on.
Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.
Например, отключим все обработчики у элементов с классом link:
$('.link').off();Например, удалим событие clickу всех элементов с классом link:
$('.link').off('link');Специальный селектор (**) позволяет удалить только делегированные события с сохранением не делегированных:
$('.link').off('click','**');Удалить только указанные делегированные события (с помощью селектора):
// добавление делегированного события
$('ul').on('click','li', function(){
// выводим в консоль контент элемента li
console.log($(this).text());
});
// удаление делегированного события
$('ul').off('click','li');Удалить все обработчики openModal делегированного события click в пространстве имён modalдля элементов с классом show:
$('body').on('click.modal', '.show', openModal);Создание пользовательского события
Для создания пользовательских событий в jQuery используются методы onи trigger.
Принцип создания специального события jQuery рассмотрим посредством следующего примера:
<div class="module">
<p>...</p>
<button class="success" type="button">Вызвать пользовательское событие highlight (цвет зелёный)</button>
<button class="error" type="button">Вызвать пользовательское событие highlight (цвет красный)</button>
</div>
...
<script>
// добавляем ко всем элементам p пользовательское событие, которое будет изменять цвет текста и его содержимое
// получения данных, переданных методом trigger, осуществим посредством аргументов color и title
$('.module p').on('highlight', function(e, color, title) {
$(this).css('color',color);
$(this).text('Вызвано пользовательское событие highlight ' +title);
});
// при нажатии на элемент с классом success вызвать кастомное событие highlight и передать ему параметры
$('.success').click(function(){
// используя второй аргумент передадим данные в обработчик события
$(this).closest('.module').find('p').trigger('highlight',['green','(цвет зелёный)']);
});
// при нажатии на элемент с классом error вызвать кастомное событие highlight и передать ему параметры
$('.error').click(function(){
// используя второй аргумент передадим данные в обработчик события
$(this).closest('.module').find('p').trigger('highlight',['red','(цвет красный)']);
});
</script>