Analyse der Bind()-Ereignisnutzung in JQuery_jquery

In diesem Artikel wird die Verwendung des Bind()-Ereignisses in JQuery anhand von Beispielen analysiert. 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, einige Verhaltensweisen der Ereignismethode für das daran gebundene Objekt bereitzustellen. Die Bedeutung der drei Parameter im Begriff 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 Event-Handler-Funktion übergeben. Dieser Parameter hat eine sehr 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 auf die Schaltfläche „Click Me“ und „Hello World“ wird angezeigt. Dies ist unser einfachstes Bindungsereignis. Es ist ganz einfach.

2. Mehrere Ereignisse verknüpfen

Wir können mehrere Ereignisse über bind() binden (tatsächlich ist dies die sehr berühmte Kettenprogrammierung in JQuery und Linq). Die implementierte Hauptfunktion besteht darin, dass beim Klicken „Hello World“ angezeigt wird und beim Verlassen der Schaltfläche ein Div angezeigt wird.

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

Diese Codeseite ist leicht zu verstehen. Wenn Sie auf die Schaltfläche klicken, wird ein „Hallo Welt“ angezeigt, und wenn Sie gehen, wird das Div 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

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

Dieses Ereignisobjekt ist normalerweise ein Parameter, der nicht notwendig ist und weggelassen werden kann, denn wenn die Ereignishandlerfunktion gebunden ist, können Sie klar wissen, was sie tun soll, wenn sie ausgelöst wird, und normalerweise können ausreichende Informationen abgerufen werden. Manchmal ist es jedoch erforderlich, während der Ereignisinitialisierung weitere Informationen über die Umgebung des Benutzers zu erhalten.

Geben Sie mir 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 darin, die aktuellen Koordinaten relativ zur Seite im Span-Tag anzuzeigen, wenn der Benutzer auf das p-Objekt klickt. Hier wird das Ereignisereignis verwendet. Übergeben Sie die Parameter.

4.unbind()-Ereignis

unbind([type],[data],Handler) ist die umgekehrte Operation von bind() und entfernt das gebundene Ereignis von jedem passenden 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()">
 <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>

Der obige Code ist auch leicht zu verstehen. Wenn die Maus des Benutzers auf dem Bereich bleibt, wird das Klickereignis des Bereichs 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 dient 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.

Nutzungsregeln:

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 nur einmal für jedes Objekt 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.

Veröffentlichen Sie die Implementierung der jeweiligen Codes von bind und one. 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()">
 <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程序设计有所帮助。