Analyse de l'utilisation des événements Bind() dans JQuery_jquery

Cet article analyse l'utilisation de l'événement Bind() dans JQuery avec des exemples. 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 fournir certains comportements de méthode événementielle sur l'objet qui y est lié. Les significations de ses trois paramètres dans le terme 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 de gestionnaire d'é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 sur le bouton « Cliquez sur moi » et « Hello World » apparaîtra. 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, il s'agit de la très célèbre programmation en chaîne dans JQuery et Linq). La fonction principale implémentée est que lorsque l'on clique, "Hello World" apparaît, et lorsque l'on quitte le bouton, un div s'affiche.

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

Cette page de codes est facile à comprendre. Lorsque vous cliquez sur le bouton, un "Hello World" apparaît, et lorsque vous quittez, le div s'affiche. 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 sera transmis en tant que paramètre.

Cet objet événement est généralement un paramètre qui n'est pas nécessaire et peut être omis, car lorsque la fonction de gestionnaire d'événements est liée, vous pouvez clairement savoir ce qu'elle doit faire lorsqu'elle est déclenchée, et généralement des informations suffisantes peuvent être obtenues. Cependant, il est parfois nécessaire d'obtenir davantage d'informations sur l'environnement de l'utilisateur lors de l'initialisation de l'événement.

Donnez-moi 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 d'afficher les coordonnées actuelles par rapport à la page dans la balise span lorsque l'utilisateur clique sur l'objet p 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() et supprime l'événement lié de chaque élément correspondant. 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()">
 <div onclick="MyClickOut()">
  <div onclick="MyClickInner()">
   <span id="MySpan">I love JQuery!! </span>
  </div>
 </div>
 <span id="LooseFocus">失去焦点</span>
</body>
<script>
function MyClickOut() {
 alert("outer Div");
}
function MyClickInner() {
 alert("Inner Div");
}
function MyBodyClick() {
 alert("Body Click");
}
var foo = function () {
 alert("I'm span.");
}
$(function () {
 $("#MySpan").bind("click", foo);
})  
$(function () {
 $("#LooseFocus").unbind("click", foo);
})
</script>

Le code ci-dessus est également facile à comprendre. Lorsque la souris de l'utilisateur reste sur le span, l'événement de clic du span est 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énements unique à un événement spécifique (comme un clic) pour 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.

Publiez l'implémentation des codes respectifs de bind et one. Le lecteur peut faire une légère comparaison :

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()">
 <div onclick="MyClickOut()">
  <div onclick="MyClickInner()">
    <span id="MySpan">
     I love JQuery!!
    </span>
  </div>
 </div>
</body>
<script type="text/javascript">
 function MyClickOut() {
  alert("outer Div");
 }
 function MyClickInner() {
  alert("Inner Div");
 }
 function MyBodyClick() {    
  alert("Body Click");
 }
 $(function () {
  $("#MySpan").bind("click", function (event) {
   alert("I'm span");
   event.stopPropagation();
 });
</script>

希望本文所述对大家的jQuery程序设计有所帮助。