TOC

Пример jQuery bind () и unbind ()

Пример jQuery bind () и unbind ()

Функция jQuerybind() используется для прикрепления обработчика событий к элементам, а функцияunbind() используется для отсоединения существующего обработчика событий от элементов.

Примеры

Простой HTML-код для демонстрации. 


    Mouseover Me, Click Me or Double Click Me

1. связывания ()

jQuery имеет полную поддержку типов событий JavaScript, таких как «click», «dblclick» или пользовательских имен событий.

Привязать одно событие щелчка к элементам с идентификатором «BoxId». 

$("#BoxId").bind("click", (function () {
    $('span').text("Single Clicked");
}));

Привязать событие двойного щелчка к элементам с идентификатором «BoxId». 

$("#BoxId").bind("dblclick", (function () {
    $('span').text("Double Clicked");
}));

2. bind () + объект события

jQuery поставляется с множеством объектов событий, чтобы получить дополнительную информацию о среде пользователя, проверьте здесьjQuery event object details.

Привязать событие mouseover с параметром объекта события к элементам с идентификатором BoxId. 

$("#BoxId").bind("mouseover", (function (event) {
    $('span').text('The mouse cursor is at ('
    + event.pageX + ', ' + event.pageY + ')');
}));

3. bind () + данные события

Это означает, что данные пользовательского параметра передаются в функцию bind ().

Привязать одно событие клика и передать пользовательское сообщение в качестве параметра для элементов с идентификатором «BoxId». Внутри функции вы можете получить доступ к сообщению с параметром с помощьюevent.data. 

var name = 'Message pass by jQuery event data';
$("#BoxId").bind("click", {msg: name},(function (event) {
    $('span').text("Single Clicked - " + event.data.msg);
}));

4. bind () + Несколько событий

Чтобы связать несколько событий вместе, вы можете включить каждое из них через пробел.

Привязывайте события одного и двух щелчков к элементам с идентификатором «BoxId». 

$("#BoxId").bind("click dblclick", (function () {
    $('span').text("Single Clicked");
}));

В качестве альтернативы вы также можете написать следующий код: (Supported in jQuery 1.4). 

$("#BoxId").bind({
    click : function(){
        $('span').text("Single Clicked");
    },
    dblclick : function(){
        $('span').text("Double Clicked");
    }
});

5. unbind()

Отвязать или отсоединить существующие события довольно просто, нужно просто указать прикрепленный тип события.

Отключено событие «click» и «dblclick» от элементов с идентификатором «BoxId». 

$('#BoxId').unbind("click");
$('#BoxId').unbind("dblclick");

Попробуй сам 









  
jQuery bind() and unbind() example


  

    Mouseover Me, Click Me or Double Click Me

Попробуйте демо

Related