Detaillierte Erklärung der Ereignisse in jQuery

Allgemeine Einführung

jQuery fügt den grundlegenden Ereignisverarbeitungsmechanismus hinzu und erweitert ihn, was nicht nur eine elegantere Ereignisverarbeitungssyntax bietet, sondern auch die Ereignisverarbeitungsfähigkeiten erheblich verbessert

jQuery Event

Laden von DOM

verwendet die Methode $(document).ready() in jQuery, um die Methode window.onload in JavaScript zu ersetzen, weist jedoch auch einige Unterschiede auf

1. Ausführungszeitpunkt

Zum Beispiel haben wir eine Webseite mit vielen Bildern

Die Methode $(document).ready() befindet sich auf dieser Webseite. Sie kann danach ausgeführt werden Der DOM-Baum wird geladen und die Methode window.onload muss ausgeführt werden, nachdem der DOM-Baum und die Bilder geladen wurden

Wenn wir jQuery verwenden und die Methode ausführen möchten, nachdem die gesamte Seite geladen ist, können wir Load( ) Methode

Die Funktionen der folgenden beiden Codeteile sind gleich

// jQuery
$(window).load(function(){
  // 代码1
});
// JavaScript
window.onload = function(){
  // 代码2
};

2. Verwenden Sie sie mehrmals

Das Onload-Ereignis von JavaScript kann nur einen Verweis auf speichern jeweils eine Funktion, und $(document).ready() kann mehrere speichern

function one(){
  alert('1');
}
function two(){
  alert('2');
}
// JavaScript
window.onload = one;
window.onload = two;//只执行two()
// jQuery
$(document).ready(function(){
  one();
});
$(document).ready(function(){
  two();
});//one() 和 two()都会执行

3. Abkürzung

$(document).ready(function(){}); kann abgekürzt werden als $(function(){});

Ereignisbindung

Die Syntax der Funktion bind(): bind(type,[.data],fn)

Erster Der erste Parameter ist der Ereignistyp

Der zweite Parameter ist ein optionaler Parameter, ein zusätzliches Datenobjekt, das als event.data-Attributwert an das Ereignisobjekt übergeben wird

Der dritte Parameter ist Wird zum Binden verwendet. Die Verarbeitungsfunktion

ist ein Beispiel. Es gibt zwei Divs. Wenn wir auf das erste Div klicken, wird das zweite Div angezeigt Hinzugefügte Funktionen: Wenn div2 angezeigt wird, wenn auf div1 geklickt wird, blenden Sie es aus, andernfalls zeigen Sie es an

<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
$(function(){
  $(&#39;#div1&#39;).bind(&#39;click&#39;,function(){
    $(this).next().show();
  });
   
});

Abkürzung:

$(function(){
  $('#div1').bind('click',function(){
    if($(this).next().is(':visible')){
      $(this).next().hide();
    }else{
      $(this).next().show();
    }
  });
});

Synthetisches Ereignis

$('#div1').click(function(){
  if($(this).next().is(':visible')){
     $(this).next().hide();
   }else{
     $(this).next().show();
   }
})

1. )-Methode

wird verwendet, um Cursor-Hover-Ereignisse zu simulieren. Die erste Funktion wird ausgelöst, wenn sich der Cursor auf das Element bewegt, und die zweite Funktion wird ausgelöst, wenn sich der Cursor aus dem Element herausbewegt

2. Die toggle()-Methode

$('#div1').hover(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

ist Wird verwendet, um das Ereignis „Kontinuierlicher Mausklick“ zu simulieren. Wenn die Maus zum ersten Mal auf das Element klickt, wird die erste Funktion ausgelöst, und wenn die Maus auf dieselbe Funktion klickt, wird die zweite Funktion ausgelöst

Verhindern Ereignissprudeln und Standardverhalten verhindern

$('#div1').toggle(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

1. Ereignissprudeln verhindern

stopPropagation()-Methode

2. Standardverhalten verhindern

preventDefault()-Methode

Hinweis: 1. Die Rückgabe von „false“ in jQuery dient dazu, Ereignissprudeln und Standardverhalten zu verhindern

　2. jQuery unterstützt keine Ereigniserfassung

Attribute von Ereignisobjekten

1. event.type

Der Zweck der geänderten Methode besteht darin, den Typ des Ereignisses zu ermitteln

2. event.target

$('#div1').click(function(ev){
   alert(ev.type);//click
 })

das Element abzurufen hat das Ereignis ausgelöst

3. event.latedTarget

$('#div1').click(function(ev){
  alert(ev.target.id);//div1
 })

Zugehörige Elemente abrufen

4. event.pageX und event.pageY

Das x abrufen Koordinate und Y-Koordinate des Cursors relativ zur Seite

5. event.which

$('#div1').click(function(ev){
 alert(ev.pageX + ',' + ev.pageY);//275,181
 })

Die Funktion dieser Methode besteht darin, die linke, mittlere und rechte Maustaste in der zu erhalten Mausklick-Ereignis; um die Tastaturtasten im Tastaturereignis zu erhalten

Ereignis entfernen

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠标左键，2是鼠标中见，3是鼠标右键
})

Syntax der unbind()-Methode: unbind([type],[data]);

Der erste Parameter ist der Ereignistyp, der zweite Parameter Der erste Parameter ist die zu entfernende Funktion

Schauen Sie sich ein Beispiel an, binden Sie das folgende Ereignis an div1

1 . Wenn keine Parameter vorhanden sind, löschen Sie alle gebundenen Ereignisse

$('#div1').bind('click',function(){
  alert('1');
}).bind('click',function(){
  alert('2');
}).bind('mouseover',function(){
  alert('3');
})

        $('#div1').unbind();//Alle Ereignisse löschen

  2. Wenn der Ereignistyp als bereitgestellt wird Parameter, nur die gebundenen Ereignisse dieses Typs werden gelöscht

$('#div1').unbind('mouseover');//Mouseover-Ereignis löschen

3. Wenn die Verarbeitung funktioniert Wenn die Bindung als zweiter Parameter verwendet wird, wird nur diese bestimmte Zeit verarbeitet. Die Funktion wird gelöscht

Simulationsoperation

1. Häufig verwendete Simulationen

In jQuery, Sie können die Methode trigger() verwenden, um den Simulationsvorgang abzuschließen. Sie können beispielsweise den folgenden Code verwenden, um die ID für das Klickereignis der BTN-Schaltfläche auszulösen

$('#btn').trigger( 'click');

2. Benutzerdefiniertes Ereignis auslösen

trigger()-Methode Es können nicht nur Ereignisse mit demselben Namen ausgelöst werden, die vom Browser unterstützt werden, sondern auch Ereignisse mit benutzerdefinierten Namen .

3. Daten übergeben

$('#btn').bind('myclick',function(){
  alert('1');
});
$('#btn').trigger('myclick');

4. Standardoperation ausführen

$('#btn').bind('myclick',function(event,message1,message2){
 alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);

$('input').trigger('focus');

Der obige Code löst das Fokusereignis des Eingabeelements aus und bewirkt auch, dass das Wenn Sie nur ein bestimmtes Ereignis auslösen möchten, das an das Element, gleichzeitig den Browser abbrechen Die Standardoperation für dieses Ereignis kann die Methode triggerHandler() verwenden

Andere Verwendungen

Fügen Sie einen Ereignis-Namespace hinzu, um die Verwaltung zu erleichtern

Zum Beispiel können Sie mehrere Ereignistypen an Elemente binden. Verwenden Sie Namespaces zur Standardisierung.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels jedem beim Lernen helfen kann Ich hoffe auch, die chinesische PHP-Website zu unterstützen!

$('div').bind('click.plugin',function(){
  alert('1');
});
$('div').bind('mouseover.plugin',function(){
  alert('2');
});
$('div').bind('dbclick.plugin',function(){
  alert('3');
});
$('button').click(function(){
  $('div').unbind('.plugin');
})

Ausführlichere Artikel zu Ereignissen in jQuery finden Sie auf der chinesischen PHP-Website!