Exemple avec jQuery bind () et unbind ()

La fonction jQuerybind() est utilisée pour attacher un gestionnaire d'événements aux éléments, tandis que la fonctionunbind() est utilisée pour détacher un gestionnaire d'événements existant des éléments.

Exemples

Code html simple pour la démonstration.


    Mouseover Me, Click Me or Double Click Me

1. lier()

jQuery prend entièrement en charge les types d'événements JavaScript tels que «cliquer», «dblclick» ou les noms d'événements personnalisés.

Liez un événement en un seul clic à des éléments dont l'ID est «BoxId».

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

Liez un événement de double-clic aux éléments dont l'ID est «BoxId».

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

2. bind () + objet événement

jQuery est livré avec de nombreux objets événement pour obtenir plus d'informations sur l'environnement de l'utilisateur, vérifiez ici lesjQuery event object details.

Liez un événement de "survol" avec un paramètre d'objet d'événement à des éléments avec un ID de "BoxId".

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

3. bind () + données d'événement

Cela signifie passer des données de paramètres personnalisés à votre fonction bind ().

Liez un événement en un seul clic et passez un message personnalisé en tant que paramètre à un élément avec un ID de «BoxId». À l'intérieur de la fonction, vous pouvez accéder au message de paramètre à l'aide deevent.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 () + Plusieurs événements

Pour lier plusieurs événements ensemble, vous pouvez inclure chacun d'eux séparés par un espace.

Liez les événements de simple clic et de double-clic aux éléments dont l'ID est «BoxId».

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

Vous pouvez également coder comme suit: (Supported in jQuery 1.4).

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

5. unbind()

Dissocier ou détacher les événements existants est assez facile, il suffit de spécifier le type d'événement attaché.

Détaché l'événement «click» et «dblclick» des éléments avec un identifiant «BoxId».

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

Essayez-le vous-même









  jQuery bind() and unbind() example

  
    Mouseover Me, Click Me or Double Click Me

Essayez la démo

TOC

Exemple avec jQuery bind () et unbind ()