Explication détaillée de l'utilisation de la fonction jQuery.bind()

La fonction

bind() est utilisée pour lier la fonction de gestion des événements à un ou plusieurs événements de chaque élément correspondant.

De plus, vous pouvez également transmettre certaines données supplémentaires requises à la fonction de gestionnaire d'événements.

Lorsque bind() est exécuté, la fonction de gestionnaire d'événements sera liée à chaque élément correspondant. Par conséquent, vous utilisez bind() pour lier l'événement click à tous les éléments de bouton. Vous liez l'événement click à chaque élément de bouton qui existe dans le document à ce moment-là. Si vous ajoutez ultérieurement un nouvel élément bouton au document, l'événement lié ne prendra pas effet sur celui-ci. Si vous souhaitez que l'événement de liaison prenne également effet sur les éléments nouvellement ajoutés à l'avenir, veuillez utiliser des fonctions d'événement telles que on(), délégué(), live() (essayez d'abord d'utiliser les fonctions d'événement précédentes).

De plus, vous pouvez lier plusieurs gestionnaires d'événements au même élément et au même type d'événement. Lorsqu'un événement est déclenché, jQuery exécutera les fonctions de traitement des événements liés dans l'ordre de liaison.

Pour supprimer un événement lié via bind(), utilisez la fonction unbind().

Cette fonction appartient à l'objet (instance) jQuery.

Syntaxe

la fonction bind() a principalement les deux formes d'utilisation suivantes :

Utilisation une :

jQueryObject.bind( events [, data ], handler )

Utilisation deux : jQuery 1.4. 3 Ajout de la prise en charge de cette utilisation.

jQueryObject.bind( events [, data ] [, isDefaultBubble ] )

Utilisation 3 : jQuery 1.4 prend désormais en charge cette utilisation.

jQueryObject.bind( eventsMap )

Paramètres

Description du paramètre

events Type de chaîne Un ou plusieurs types d'événements séparés par des espaces et un espace de noms facultatif, par exemple "clic ", "clic de focus", "keydown.myPlugin".

data Facultatif/Tout type de données qui doivent être transmis à la fonction de traitement d'événements via event.data lorsqu'un événement est déclenché.

Fonction de traitement d'événement spécifiée par le type de fonction du gestionnaire.

isDefaultBubble Le type facultatif/booléen spécifie s'il faut autoriser le comportement par défaut de l'élément et la diffusion d'événements lorsqu'un événement est déclenché. La valeur par défaut est vraie.

Le type d'objet eventsMap est un objet Object. Chaque attribut correspond au type d'événement et à l'espace de noms facultatif (événements de paramètre), et la valeur de l'attribut correspond à la fonction de traitement d'événement liée (gestionnaire de paramètres).

Pour l'espace de noms facultatif dans les événements de paramètre (uniquement pris en charge dans la version 1.4.3+), veuillez vous référer à l'exemple de code ci-dessous.

Ceci dans le gestionnaire de paramètres pointe vers l'élément DOM actuel. bind() transmettra également un paramètre au gestionnaire : l'objet Event représentant l'événement en cours.

La valeur de retour du gestionnaire de paramètres a le même effet que la valeur de retour de la fonction de traitement d'événements native du DOM. Par exemple, la fonction de gestionnaire d'événements de l'événement submit (soumission de formulaire) renvoie false, ce qui peut empêcher la soumission du formulaire.

Le paramètre isDefaultBubble est utilisé pour indiquer si le comportement par défaut de l'élément et le bouillonnement d'événements sont autorisés. Si la valeur est fausse, cela empêchera le comportement par défaut de l'élément (par exemple : le comportement de saut par défaut d'un lien qui déclenche un événement de clic, le comportement de soumission par défaut d'un formulaire qui déclenche un événement de soumission) et la diffusion bouillonnante des événements.

Valeur de retour

bind()La valeur de retour de la fonction est de type jQuery et renvoie l'objet jQuery actuel lui-même.

Exemples et explications

Prenons l'événement click ("click") comme exemple. Ce qui suit est l'utilisation générale des fonctions d'événement dans jQuery (certaines fonctions ont également d'autres formes d'utilisation, qui ne sont pas encore abordés ici :

// 这里的选择器selector用于指定可以触发事件的元素
// 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"委托代理"的形式触发事件。
// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").click( [ data ,] handler );
// jQuery 1.0+ (1.4.3+支持参数data)
$("selector").bind( "click" [, data ], handler );
// jQuery 1.3+ (1.4+支持参数data)
$("selector").live( "click" [, data ], handler );
// jQuery 1.4.2+
$("ancestor").delegate( "selector", "click" [, data ], handler );
// jQuery 1.7+
$("ancestor").on( "click", "selector" [, data ], handler );

Veuillez vous référer au code HTML initial suivant :

<div id="n1">
    <p id="n2"><span>CodePlayer</span></p>
    <p id="n3"><span>专注于编程开发技术分享</span></p>
    <em id="n4">http://www.365mini.com</em>
</div>
<p id="n5">Google</p>

Nous lions les événements de clic à tous les éléments

div> :

//为div中的所有p元素的click事件绑定事件处理函数
//只有n2、n3可以触发该事件
$("div p").bind("click", function(){
// 这里的this指向触发点击事件的p元素(Element)
    alert( $(this).text() );
});

De plus, nous pouvons également lier plusieurs événements en même temps et transmettre des données supplémentaires à la fonction de traitement des événements. Nous pouvons transmettre le paramètre event (objet événement événement) transmis à. la fonction de traitement d'événements via jQuery. Pour traiter :

var obj = { id: 5, name: "王五" };
//为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据obj
// 附加数据可以是任意类型
$("#n5").bind("mouseenter mouseleave", obj, function(event){
    var $me = $(this);
    var obj = event.data; // 这就是传入的附加数据
    if( event.type == "mouseenter"){
        $me.html( "你好，" + obj.name + "!");
    }else if(event.type == "mouseleave" ){
        $me.html( "再见，" + obj.name + "!");      
    }           
} );

De plus, si l'élément qui remplit les conditions est nouvellement ajouté après l'exécution de la fonction bind(), l'événement de liaison ne prendra pas effet sur lui. . En prenant le code HTML initial comme exemple, nous pouvons écrire le code jQuery suivant :

//为div中的所有p元素的click事件绑定事件处理函数
//只有n2、n3可以触发该事件
$("div p").bind("click", function(event){
    alert( $(this).text() );
});
// 新添加的n6不会触发上述click事件
$("#n1").append(&#39;<p id="n6">上述绑定的click事件不会对该元素也生效!</p>&#39;);

Les événements paramètres prennent également en charge des espaces de noms supplémentaires pour les types d'événements. Lors de la liaison de plusieurs gestionnaires d'événements du même type au même élément. À l'aide des espaces de noms, vous pouvez limiter la portée du déclenchement ou de la suppression lors du déclenchement d'événements et de la suppression d'événements.

function clickHandler(event){
    alert( "触发时的命名空间:[" + event.namespace + "]");
}
var $p = $("p");
// A：为所有p元素绑定click事件，定义在foo和bar两个命名空间下
$p.bind( "click.foo.bar", clickHandler );
// B：为所有p元素绑定click事件，定义在test命名空间下
$p.bind( "click.test", clickHandler );
var $n2 = $("#n2");
// 触发所有click事件
$n2.trigger("click"); // 触发A和B (event.namespace = "")
// 触发定义在foo命名空间下的click事件
$n2.trigger("click.foo"); // 触发A (event.namespace = "foo")
// 触发定义在bar命名空间下的click事件
$n2.trigger("click.bar"); // 触发A (event.namespace = "bar")
// 触发同时定义在foo和bar两个命名空间下的click事件
$n2.trigger("click.foo.bar"); // 触发A (event.namespace = "bar.foo")
// 触发定义在test命名空间下的click事件
$n2.trigger("click.test"); // 触发B (event.namespace = "test")
bind()函数的参数eventsMap是一个对象，可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下：
var eventsMap = {
    "mouseenter": function(event){
        $(this).html( "Hello!");        
    },
    
    "mouseleave": function(event){
        $(this).html( "Bye!");
    }
};
//为n5绑定mouseenter mouseleave两个事件
$("#n5").bind( eventsMap );

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!