Vous donner une compréhension approfondie de la fonction Bind() dans JQuery

Cet article présente principalement l'utilisation de l'événement Bind() dans JQuery. Il analyse la fonction, les caractéristiques et les compétences d'utilisation de l'événement Bind() avec des exemples. Les amis dans le besoin peuvent se référer à

Cet article L'exemple. analyse l'utilisation de l'événement Bind() dans JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Jetons d'abord un coup d'œil à sa définition :

.bind( eventType [, eventData], handler(eventObject))

La fonction principale de la méthode Bind(). est de s'y lier. L'objet fournit certains comportements de méthode événementielle. Les significations de ses trois paramètres sont les suivantes :

eventType est un type d'événement de type chaîne, qui est l'événement que vous devez lier. Ces types peuvent inclure les éléments suivants : flou, focus, focusin, focusout, chargement, redimensionnement, défilement, déchargement, clic, double-clic, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress. , saisie, erreur. Ce qu'il faut noter ici, c'est que les méthodes événementielles en JavaScript sont utilisées ici, pas dans JQuery. Les méthodes événementielles dans JQuery ont toutes un "on" supplémentaire devant JavaScript, comme onclick, onblur, etc.

Le paramètre eventData est un paramètre facultatif, mais il est rarement utilisé en temps normal. Si ce paramètre est fourni, nous pouvons alors transmettre des informations supplémentaires à la fonction gestion des événements. Ce paramètre a une très bonne utilité, c'est-à-dire pour gérer les problèmes causés par les fermetures. Je vous donnerai un exemple plus tard.

Handler est le numéro de traitement utilisé pour la liaison. En fait, c'est aussi la fonction de rappel , la méthode correspondante après le traitement des données.

1. Le premier événement simple bind () --- Bonjour Word

<input id="BtnFirst"type="button"value="Click Me"/>
<script>
$(function () {
 $("#BtnFirst").bind("click",function(){
  alert("Hello World");
 });
})
</script>

Après avoir ouvert la page, cliquez les boutons "Cliquez sur moi" et "Hello World" apparaîtront. Il s’agit de notre événement de liaison le plus simple. C'est très simple.

2. Lier plusieurs événements

Nous pouvons lier plusieurs événements via bind() (en fait, c'est une méthode très connue dans JQuery et Linq Chain programmation). La fonction principale implémentée est que lorsque l'on clique, "Hello World" apparaît, et lorsque l'on quitte le bouton, un p s'affiche.

<p>
<input id="BtnFirst"type="button"value="Click Me"/></p>
<p id="Testp"style=" width:200px; height:200px; display:none; ">
</p>
<script>
$(function () {
 $("#BtnFirst").bind("click", function () {
  alert("Hello World");
 }).bind("mouseout", function () {
  $("#Testp").show("slow");
 });
})
</script>

Cette page de codes est facile à comprendre Lorsque vous cliquez sur le bouton, un "Hello World" apparaît. Lorsque vous quittez, donnez p pour l'afficher. Pour les animations dans JQuery, vous pouvez utiliser « lent », « rapide » et « normal ». Bien entendu, vous pouvez également définir les millisecondes correspondantes.

Objet événement 3.bind()

La fonction de rappel du gestionnaire peut accepter un paramètre Lorsque cette fonction est appelée, un Objet événement JavaScript le sera. être transmis en paramètre.

Donnez un exemple tiré du site officiel de JQuery :

<style> 
 p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}
 p.over {background:#ccc;}
 span {color:red;}
</style>
<p>Click or double click here.</p>
<span></span>
<script>
 $("p").bind("click", function(event){
  var str = "( " + event.pageX + ", " + event.pageY + " )";
  $("span").text("Click happened! " + str);
 });
 $("p").bind("dblclick", function(){
  $("span").text("Double-click happened in " + this.nodeName);
 });
 $("p").bind("mouseenter mouseleave", function(event){
  $(this).toggleClass("over");
 });
</script>

La fonction principale ici est de se rendre compte que lorsque l'utilisateur clique sur l'objet p, le courant Les coordonnées relatives à la page sont affichées dans la balise span, et l'événement event est utilisé ici. Transmettez les paramètres.

Événement 4.unbind()

unbind([type],[data],Handler) est l'opération inverse de bind(), à partir de chaque Remove correspondant l'événement lié à l'élément. S'il n'y a aucun paramètre, tous les événements liés sont supprimés. Vous pouvez dissocier les événements personnalisés que vous avez enregistrés avec bind(). Si un type d'événement est fourni en tant que paramètre, seuls les événements liés de ce type sont supprimés. Si un gestionnaire est passé comme deuxième argument lors de la liaison, seul ce gestionnaire d'événements spécifique sera supprimé.

<body onclick="MyBodyClick()">
 <p onclick="MyClickOut()">
  <p onclick="MyClickInner()">
   <span id="MySpan">I love JQuery!! </span>
  </p>
 </p>
 <span id="LooseFocus">失去焦点</span>
</body>
<script>
function MyClickOut() {
 alert("outer p");
}
function MyClickInner() {
 alert("Inner p");
}
function MyBodyClick() {
 alert("Body Click");
}
var foo = function () {
 alert("I&#39;m span.");
}
$(function () {
 $("#MySpan").bind("click", foo);
})  
$(function () {
 $("#LooseFocus").unbind("click", foo);
})
</script>

Le code ci-dessus est également facile à comprendre, c'est-à-dire que lorsque la souris de l'utilisateur reste sur le span, l'événement de clic du span est alors annulé. Donc, à la fin, l’alerte n’apparaîtra qu’à l’intérieur du corps.

Enfin, comprenons brièvement l'utilisation de l'événement one(). En fait, one et bind sont identiques, les deux sont générés pour les événements de liaison. L'un est fondamentalement identique à bind. La différence est que lors de l'appel de jQuery.event.add, la fonction de traitement des événements enregistrés est légèrement ajustée. L'un d'eux a appelé jQuery.event.proxy pour proxy la fonction de traitement des événements entrants. Lorsqu'un événement déclenche un appel à la fonction de cet agent, l'événement est d'abord supprimé du cache, puis la fonction d'événement enregistrée est exécutée. Voici l'application de fermeture, grâce à laquelle on obtient la référence de la fonction événement enregistrée par fn.

Règles d'utilisation :

one(type,[data],fn)

Liez un gestionnaire d'événement unique à un événement spécifique (comme un clic) de chaque élément correspondant. Ce gestionnaire d'événements n'est exécuté qu'une seule fois sur chaque objet. Les autres règles sont les mêmes que pour la fonction bind(). Ce gestionnaire d'événements recevra un objet événement, qui peut être utilisé pour empêcher le comportement par défaut. Si vous souhaitez annuler le comportement par défaut et empêcher l'événement de se propager, le gestionnaire d'événements doit renvoyer false.

Post it, l'implémentation des codes respectifs de bind et one, le lecteur peut faire une légère comparaison :

L'implémentation du code Bind() :

bind : function(type, data, fn) { 
 return type == "unload" ? this.one(type,data,fn) : this.each(function(){
 //fn || data, fn && data实现了data参数可有可无 
  jQuery.event.add(this, type, fn || data, fn && data); 
 }); 
}

Implémentation du code One() :

one : function(type, data, fn) { 
 var one = jQuery.event.proxy(fn || data, function(event) { 
  jQuery(this).unbind(event, one); 
  return (fn || data).apply(this, arguments);
 //this->当前的元素 
 }); 
 return this.each(function() { 
  jQuery.event.add(this, type, one, fn && data); 
 }); 
}

5.最后呢，其实想在贴一个冒泡事件，因为在处理绑定事件的时候，如果调用内部的事件 有可能会触发外面的事件，所以给大伙一个借鉴吧。

这里可以参考一下javascript事件冒泡的文章：《JavaScript 事件冒泡简介及应用》。

简单的说，何为冒泡事件？其实，简单的理解是，也可以说是事件传播，它会从内部的控件广播到父类的元素，然后接着一直往上到祖先级别的元素。

则 冒泡实例代码：

<body onclick="MyBodyClick()">
 <p onclick="MyClickOut()">
  <p onclick="MyClickInner()">
    <span id="MySpan">
     I love JQuery!!
    </span>
  </p>
 </p>
</body>
<script type="text/javascript">
 function MyClickOut() {
  alert("outer p");
 }
 function MyClickInner() {
  alert("Inner p");
 }
 function MyBodyClick() {    
  alert("Body Click");
 }
 $(function () {
  $("#MySpan").bind("click", function (event) {
   alert("I&#39;m span");
   event.stopPropagation();
 });
</script>

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!