|
|
Синтаксис и описание:
Добавлено в jQuery 1.0.bind( eventType, [ eventData ,] handler( [eventObject] ) )Добавлено в jQuery 1.4.bind( events )Команда .bind() устанавливает функцию handler() как обработчик события eventType для всех элементов набора jQuery. Может связывать с обработчиками любые события JavaScript, а также собственные (пользовательские) события.
Параметры:
eventType – (строка) Тип события (или несколько типов событий, разделенных пробелами). Допустимы абсолютно все типы событий JavaScript (например: focus, mouseover, resize и другие) и даже именованные (см. Примечание 2). Также может содержать нестандартные имена пользовательских событий, которые не предусмотрены в поведении браузера (обработчики таких событий могут быть вызваны в jQuery искусственно с помощью методов .trigger() или .triggerHandler()). eventData – (объект) Данные, передаваемые обработчику события в виде event.data (свойства data экземпляра Event). Значение переменных, передаваемых в eventData, фиксируется на момент объявления обработчика, а не на момент его вызова. Если этот необязательный параметр опущен, то функция handler() (обработчик события) передается во втором параметре. handler( [eventObject] ) – Функция, объявляемая обработчиком события eventType. В качестве первого параметра она получает eventObject (экземпляр объекта Event). Контекст this вызова функции ссылается на текущий элемент.
function handler(eventObject) {
this; // текущий DOM-элемент.
}
events – (объект) Содержит одну или несколько пар - типов событий и их обработчиков в виде {'eventType': handler(),...}
-
Примечание:
.bind() является в jQuery основным методом для прикрепления обработчиков событий. Но библиотека предоставляет для удобства целый ряд укороченных вариантов метода .bind() для установки обработчиков стандартных типов JS событий.
Это команды: .blur(), .focus(), .focusin(), .focusout(), .load(), .resize(), .scroll(), .unload(), .click(), .dblclick(), .mousedown(), .mouseup(), .mousemove(), .mouseover(), .mouseout(), .mouseenter(), .mouseleave(), .change(), .select(), .submit(), .keydown(), .keypress(), .keyup(), .error().
-
Примечание:
События могут группироваться с помощью определения в пространстве имен, когда собственное имя пространства имен добавляется к имени события в виде суффикса через точку. (В дальнейшем такими именованными событиями можно оперировать как с единым целым, используя для доступа к ним имя пространства имен обработчиков событий. Например, удалить сразу всю группу обработчиков событий. См. метод .unbind())
$('#foo').bind('click', handler);
$('#foo1').bind('click.myEvents', handler1);
$('#foo2').bind('click.myEvents', handler2);
$('#foo3').bind('mouseover.myEvents', handler3);
$('*').unbind('click.myEvents'); // удалит только все обработчики события click пространства имен myEvents: handler1 и handler2.
$('*').unbind('.myEvents'); // удалит только все обработчики всех событий в пространстве имен myEvents: handler1, handler2 и handler3.
-
Примечание:
С помощью метода preventDefault() экземпляра Event при перехвате события можно предотвратить поведение браузера по умолчанию, например, отправку данных формы на сервер или перезагрузку страницы по щелчку на ссылке.
$('form').bind('submit', function(e){
... // Какие-нибудь действия
e.preventDefault(); // Предотвращение отправки формы
});
-
Примечание:
С помощью метода stopPropagation() экземпляра Event можно запретить распространение события по дереву DOM (всплытие от целевого элемента к корню дерева).
$('span').bind('click', function(e){
e.stopPropagation(); // Запрет всплытия события
... // Какие-нибудь действия
});
-
Примечание:
Чтобы предотвратить поведение браузера по умолчанию и запретить распространение (всплытия) события по дереву DOM, функция-обработчик должна возвратить false.
$('a').bind('click', function(e){
... // Какие-нибудь действия
return false; // Отмена и всплытия события, и поведения браузера по умолчанию - перехода по ссылке.
});
-
Примечание:
Начиная с jQuery 1.4.2 одинаковые обработчики не "склеиваются" (дубликаты не игнорируются) как раньше при возникновении события. Например, следующий код приведет к тому, что сообщение 'Привет!' при одном клике на кнопке будет сгенерировано два раза.
function test(){ alert("Привет!"); }
$("button").bind('click', test );
$("button").bind('click', test );
Примеры:
-
Для элемента с id="foo" установить обработчик JS события - щелчка мышью.
$('#foo').bind('click', function() {
alert('Пользователь кликнул на элементе с id="foo"');
});
-
Установить на элементе обработчик сразу для нескольких событий
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
-
В версии jQuery 1.4 можно устанавливать сразу несколько разных обработчиков разных событий, передав их команде .bind() в виде объекта.
$('#foo').bind({
click: function() {
// какие-либо действия
},
mouseenter: function() {
// какие-либо действия
}
});
-
При клике на элементе с id='foo' выдаст сообщение 'Пока!'.
При клике на элементе с id='bar' также выдаст сообщение 'Пока!', т.к. на момент вызова обработчика переменная message будет иметь значение 'Пока!'.
var message = 'Привет!';
$('#foo').bind('click', function() {
alert(message);
});
message = 'Пока!';
$('#bar').bind('click', function() {
alert(message);
});
-
При клике на элементе с id='foo' выдаст сообщение 'Привет!'.
При клике на элементе с id='bar' также выдаст сообщение 'Пока!', т.к. значения переменных в данных, переданных функциям через Event, фиксируются на момент объявления этих функций обработчиками соответствующих событий, а не на момент их срабатывания. (См. описание - параметр eventData)
var message = 'Привет!';
$('#foo').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
message = 'Пока!';
$('#bar').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
-
По событию готовности document (сразу после того, как исходный код страницы будет полностью загружен браузером) для элемента с id='foo' установим обработчик события click с использованием свойств экземпляра объекта Event для отображения координат щелчка.
$(document).ready(function() {
$('#foo').bind('click', function(event) {
alert('Координаты курсора мыши ('
+ event.pageX + ', ' + event.pageY + ')');
});
});
[ наверх ]
|
|
