xandeadx.ru Блог музицирующего веб-девелопера

Javascript → Пользовательские события в jQuery

Опубликовано в

В jQuery есть множество встроенных событий, на которые можно навешивать свои обработчики (например click или change). Помимо этого, существует возможность создавать свои события с помощью метода trigger и перехватывать их с помощью bind.

Например, мы пишем скрипт, который выводит на экран модальное окно. Окно закрывается одним из трёх способов — кликнув на крестике в правом верхнем углу, кликнув в любом месте страницы за пределами окна или нажав Esc. И вот мы хотим дать возможность сторонним скриптам отлавливать момент закрытия окна и навешивать на это событие свои функции.

Для этого нужно в скрипте, который отвечает за работу окна, при его закрытии вызвать:

$('#window').trigger('windowclose', ['Param 1', 'Param 2']);

Этим кодом мы создали пользовательское событие windowclose, на которое теперь из любого места можно навесить свой обработчик:

$('#window').bind('windowclose', function(e, param1, param2) {
  alert('Окно закрылось.');
});

Как видно из примера, в trigger, вторым аргументом, можно передавать свои параметры, которые будут доступны в bind.

Похожие записи

Комментарии RSS

Ещё есть очень полезный метод live, с помощью которого, можно привязывать события не только к существующим элементам DOM, но и к тем, которые еще не созданы.
--
Добавлен в версии 1.3.

live устарел, используйте .on()

Почему нельзя просто без всяких событий написать:
function windowclose(Param1, Param2){
....
}
а вместо $('#window').trigger(...
windowclose(Param1, Param2);

в посте написано почему

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании