Ausführliche Erläuterung der Anwendungsbeispiele für die jQuery-Bindung des Ereignis-Listeners bind und das Entfernen des Ereignis-Listeners unbind

Ausführliche Erläuterung der Anwendungsbeispiele für die jQuery-Bindung des Ereignis-Listeners bind und das Entfernen des Ereignis-Listeners unbind_jquery

WBOY

Freigeben： 2016-05-16 15:19:13

Original

1977 Leute haben es durchsucht

Die Beispiele in diesem Artikel beschreiben die Verwendung der jQuery-Bindung des Event-Listener-Binds und des Entfernens des Event-Listener-Unbind. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Verwenden Sie hier bind(eventType,[data],Listener)//data als optionalen Parameter. Das durch die one()-Methode gebundene Ereignis wird nach einmaligem Auslösen automatisch gelöscht, unbind(eventType,Listener),

Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
 border:1px solid #000000;
}
input{
 border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 var fnMyFunc1; //函数变量
 $("img")
 .bind("click",fnMyFunc1 = function(){ //赋给函数变量
  $("#show").append("<div>点击事件1</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件2</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件3</div>");
 });
 $("input[type=button]").click(function(){
 $("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
 });
});
</script>
</head>
<body>
 <img src="11.jpg"> <input type="button" value="移除事件1">
 <div id="show"></div>
</body>
</html>

Nach dem Login kopieren

Sehen Sie sich diesen Testcode noch einmal an:

<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>

Nach dem Login kopieren

JQuery-Code:

$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}

Nach dem Login kopieren

alert("aaaa") wird dreimal ausgeführt. Wenn Sie eine solche Situation nicht sehen möchten, müssen Sie das Ereignis der oberen Ebene deaktivieren. Zu diesem Zeitpunkt können Sie die Bindung einführen und entbinden Sie Funktionen, um das Problem zu lösen.

Einführung in die Funktionen:

for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}

Nach dem Login kopieren

alert("aaa"); nur einmal ausgeführt.

Die bind()-Methode fügt dem ausgewählten Element einen oder mehrere Event-Handler hinzu und gibt die Funktion an, die ausgeführt werden soll, wenn das Ereignis auftritt
Die Methode unbind() entfernt den Event-Handler des ausgewählten Elements. Möglichkeit, alle oder ausgewählte Ereignishandler zu entfernen oder die Ausführung einer bestimmten Funktion zu beenden, wenn ein Ereignis auftritt.

Ereignis ist der Ereignistyp. Zu den Typen gehören: Unschärfe, Flcus, Laden, Größenänderung, Scrollen, Entladen, Klicken, Dblclikc, Mousedown, Mouseup, Mousemove, Mouseover, Mouseout, Mouseenter, Mouseleave, Ändern , Select, Submit, Keydown, Keypress, Keyup, Error usw., natürlich kann es sich auch um einen benutzerdefinierten Namen handeln.

data ist ein optionaler Parameter und der Attributwert event.data wird an das zusätzliche Datenobjekt des Ereignisobjekts übergeben.
Funktion ist die Verarbeitungsfunktion, die für die Bindung verwendet wird.

Grammatik:

$(selector).bind(event,data,function)

Ereignis und Funktion müssen zur Erklärung auf die folgenden Codeausschnitte verweisen:

Beispiel 1: Alle Ereignisse von p löschen

Code kopieren Der Code lautet wie folgt:

$("p").unbind();

Beispiel 2: Löschen Sie das Klickereignis von p

Code kopieren Der Code lautet wie folgt:

$("p").unbind("click");

Beispiel 2: Die Testfunktion wird nach dem Löschen des Klickereignisses des p-Elements ausgelöst und die Testfunktion wird nach dem Hinzufügen des Klickereignisses des p-Elements

ausgelöst

$("p").unbind("click",test);
$("p").bind("click",test);

Nach dem Login kopieren

Hinweis: Um .bind() zu definieren, müssen Sie angeben, welche Ereignisse und Funktionen

Sehen wir uns nun eine einfache Demo an. Das gesamte Div verfügt über ein Click-to-Expand-Ereignis. Wenn Sie auf den Link klicken, aber nicht das Klickereignis des Divs auslösen möchten, müssen Sie das Klickereignis des Divs deaktivieren Hier wird das Link-Mouseenter-Ereignis ausgelöst, um die Bindung aufzuheben und das Div-Ereignis zu löschen. Dies ist noch nicht das Ende. Solange die Maus den Linkbereich betritt, wird das Klickereignis des Divs gelöscht. Wir müssen auch die Wiederherstellung des Div-Klickereignisses hinzufügen Linkbereich. Der Code lautet wie folgt:

$(function(){ var Func = function(){
  $(".com2").toggle(200); }
  $(".test").click(Func)
  $(".test a").mouseenter(function(){
    $(".test").unbind(); //删除.test的所有事件
  });
  $(".test a").mouseleave(function(){
    $(".test").bind("click",Func); //添加click事件
  });
});

Nach dem Login kopieren

Ereignis ist der Ereignistyp
…
Funktion ist die Verarbeitungsfunktion, die für die Bindung verwendet wird.

Leser, die an weiteren Inhalten zu jQuery-Ereignissen interessiert sind, können sich das Spezialthema dieser Website ansehen: „Zusammenfassung der allgemeinen Verwendung und Techniken von jQuery-Ereignissen“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.