Методы live() и die()

Назначение обработчиков событий с помощью метода bind () имеет один существенный недостаток. Если мы назначили обработчик, а затем добавили новые элементы, то для этих элементов обработчики событий назначены не будут.


$(":button").bind("click", function() {
var html = '<input type="button" value="HoBaя кнопка">';
$(this).after("<br>" + html);
});

<input type="button" value="Кнопка">

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

$(":button").live("click", function() {
var html = '<input type="button" value="Новая кнопка">';
$(this).after("<br>" + html);
});

В этом случае, если щелкнуть на новой кнопке, появится еще одна кнопка. Щелчок на этой кнопке приведет к созданию еще одной кнопки и т.д.

Обратите внимание
Метод live () доступен начиная с версии jQuery 1.3. В более ранних версиях можно использовать модуль Live Query.

Метод live () имеет следующий формат.

live(<Тип события>, <Функция обратного вызова>)

В параметре < Тип события> могут быть указаны следующие значения:

• события мыши: click, dblclick, mousedown, mouseup, mousemove, mouseover,
mouseout;

• события клавиатуры: keydown, keyprcss, keyup.

Кроме того, с помощью метода live () можно назначать собственные события. Вызов собственных событий осуществляется при помощи методов trigger () и trigger-Handler (). Создадим собственное событие, а затем вызовем его.

$("#div1").live("myEvent", function() {
alert("Обработка собственного события");
});
$(":button").click(function() {
$("#div1").trigger("myEvent"); // Вызов события
});

В качестве параметра «Функция обратного вызова> указывается ссылка на функцию следующего формата.
function <Название функции> {[<Объект event>[, <Аргументы>] ] ) {
// ...
}

Элемент, вызвавший событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на'элемент коллекции jQuery. Если в параметре <Объект event> указана переменная, то через нее можно обратиться к свойствам объекта event. В параметре <Аргументы> можно указать несколько переменных через запятую. Значения в эти переменные можно передать с помощью второго параметра методов trigger () и trig-gerHandler().

$("#div1").bind("myEvent", function(e, msg) {
alert("Обработка собственного события. " + msg);
});
$(":button").click(function() {
$("#div1").trigger("myEvent", ["Наше сообщение"]);
});

Удалить обработчик события можно с помощью метода die (). Формат метода:

die(<ТИП события>[, <Название функции>])

Обратите внимание
Метод die () доступен начиная с версии jQuery 1.3.

Рассмотрим пример.

$("#btnl").live("click", function() {
alert("Вы нажали на кнопку");
});
$("#btn2").click(function() {
$( "#btnl").die("click"); // Удаляем обработчик

<input type="button" value="Нажми меня" id="btnl">
<input type="button" value="Удалить обработчик" id="btn2">

Если во втором параметре указать название функции, то будет удален только обработчик с таким названием.

function f_click1() {
alert("Функция f_click1()");
}
function f_click2() {
alert ("Функция f_click2()");

$("#btnl").live("click", f_click1);
$("#btnl").live("click", f_click2);
$("#btn2").click(function() {
$("#btnl").die("click", f_click2);

<input type="button" value="Нажми меня" id="btnl">
<input type="button" value="Удалить обработчик" id="btn2">

В этом примере мы назначили два обработчика события click для первой кнопки. Если щелкнуть на кнопке Нажми меня, то будут выведены два сообщения.

Функция f_click1() Функция f_click2()

В результате щелчка на кнопке Удалить обработчик обработчик события с названием f_click2 будет удален. Теперь после щелчка на первой кнопке получим только одно сообщение.
Функция f_click1()

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *