Vermitteln Sie ein umfassendes Verständnis der Bind()-Funktion in JQuery

Dieser Artikel stellt hauptsächlich die Verwendung des Bind()-Ereignisses in JQuery vor. Er analysiert die Funktion, Eigenschaften und Verwendungsfähigkeiten des Bind()-Ereignisses anhand von Beispielen.

Dieser Artikel Das Beispiel analysiert die Verwendung des Bind()-Ereignisses in JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Werfen wir zunächst einen Blick auf die Definition:

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

Die Hauptfunktion der Bind()-Methode besteht darin, daran zu binden. Das Objekt stellt einige Verhaltensweisen von Ereignismethoden bereit. Die Bedeutung seiner drei Parameter ist wie folgt:

eventType ist ein Ereignistyp vom Typ String, also das Ereignis, das Sie binden müssen. Zu diesen Typen können die folgenden gehören: Blur, Focus, Focusin, Focusout, Load, Resize, Scroll, Unload, Click, Dblclick, Mousedown, Mouseup, Mousemove, Mouseover, Mouseout, MouseEnter, Mouseleave, Change, Select, Submit, Keydown, Keypress , Tastatureingabe, Fehler. Hierbei ist zu beachten, dass hier die Ereignismethoden in JavaScript und nicht in JQuery verwendet werden. Die Ereignismethoden in JQuery haben alle ein zusätzliches „on“ vor JavaScript, wie z. B. onclick, onblur usw.

Der eventData-Parameter ist ein optionaler Parameter, wird jedoch in normalen Zeiten selten verwendet. Wenn dieser Parameter bereitgestellt wird, können wir einige zusätzliche Informationen an die Funktion Ereignisbehandlung übergeben. Dieser Parameter hat eine gute Verwendung, nämlich die Behandlung von Problemen, die durch Schließungen verursacht werden. Ich werde Ihnen später ein Beispiel geben.

Handler ist die für die Bindung verwendete Verarbeitungsnummer. Tatsächlich handelt es sich auch um die Rückruffunktion , die entsprechende Methode nach der Verarbeitung der Daten.

1. Das erste einfache bind()-Ereignis---Hello Word

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

Klicken Sie nach dem Öffnen der Seite Es erscheint die Schaltfläche „Click Me“ und „Hello World“. Dies ist unser einfachstes Bindungsereignis. Es ist ganz einfach.

2. Mehrere Ereignisse binden

Wir können mehrere Ereignisse über bind() binden (tatsächlich ist dies eine sehr bekannte Methode in JQuery und Linq Chain). Programmierung). Die implementierte Hauptfunktion besteht darin, dass beim Klicken „Hello World“ erscheint und beim Verlassen der Schaltfläche ein p angezeigt wird.

<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>

Diese Codeseite ist leicht zu verstehen. Wenn Sie auf die Schaltfläche klicken, wird beim Verlassen p angezeigt. Für Animationen in JQuery können Sie „langsam“, „schnell“ und „normal“ verwenden. Natürlich können Sie auch die entsprechenden Millisekunden einstellen.

3.bind()-Ereignisobjekt

Handler-Callback-Funktion kann einen Parameter akzeptieren. Wenn diese Funktion aufgerufen wird, wird ein JavaScript-Ereignisobjekt verwendet als Parameter übergeben werden.

Geben Sie ein Beispiel von der offiziellen JQuery-Website:

<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>

Die Hauptfunktion besteht hier darin, zu erkennen, dass, wenn der Benutzer auf das p-Objekt klickt, Die aktuellen Koordinaten relativ zur Seite werden im Span-Tag angezeigt und das Ereignisereignis wird hier verwendet. Übergeben Sie die Parameter.

4.unbind()-Ereignis

unbind([type],[data],Handler) ist die umgekehrte Operation von bind(), beginnend mit jedem passenden Remove das gebundene Ereignis aus dem Element. Wenn keine Parameter vorhanden sind, werden alle gebundenen Ereignisse gelöscht. Sie können benutzerdefinierte Ereignisse, die Sie mit bind() registriert haben, entbinden. Wenn ein Ereignistyp als Parameter angegeben wird, werden nur gebundene Ereignisse dieses Typs entfernt. Wenn beim Binden ein Handler als zweites Argument übergeben wird, wird nur dieser spezifische Event-Handler entfernt.

<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>

Der obige Code ist auch leicht zu verstehen, das heißt, wenn die Maus des Benutzers auf dem Span bleibt, wird das Klickereignis des Spans abgebrochen. Letztendlich wird die Warnung also nur im Körper angezeigt.

Lassen Sie uns abschließend kurz die Verwendung des one()-Ereignisses verstehen. Tatsächlich sind one und bind gleich, beide werden für Bindungsereignisse generiert. Einer ist im Grunde derselbe wie bind. Der Unterschied besteht darin, dass beim Aufruf von jQuery.event.add die registrierte Ereignisverarbeitungsfunktion leicht angepasst wird. Einer namens jQuery.event.proxy fungiert als Proxy für die Funktion zur Verarbeitung eingehender Ereignisse. Wenn ein Ereignis einen Aufruf der Funktion dieses Agenten auslöst, wird das Ereignis zunächst aus dem Cache gelöscht und dann die registrierte Ereignisfunktion ausgeführt. Hier ist die Anwendung des Abschlusses, durch die die Referenz der von fn registrierten Ereignisfunktion erhalten wird.

Verwendungsregeln:

one(type,[data],fn)

Binden Sie für jedes übereinstimmende Element einen einmaligen Ereignishandler an ein bestimmtes Ereignis (z. B. einen Klick). Dieser Event-Handler wird für jedes Objekt nur einmal ausgeführt. Andere Regeln sind die gleichen wie bei der Funktion bind(). Dieser Event-Handler erhält ein Event-Objekt, mit dem das Standardverhalten verhindert werden kann. Wenn Sie das Standardverhalten abbrechen und verhindern möchten, dass das Ereignis sprudelt, muss der Ereignishandler false zurückgeben.

Posten Sie es, die Implementierung der jeweiligen Codes von bind und eins, der Leser kann einen kleinen Vergleich anstellen:

Bind()-Code-Implementierung:

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); 
 }); 
}

Implementierung des One()-Codes:

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>

Das obige ist der detaillierte Inhalt vonVermitteln Sie ein umfassendes Verständnis der Bind()-Funktion in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!