Heim > Artikel > Web-Frontend > Machen Sie sich mit Bindungsereignissen (bind()) und Entfernungsereignissen (unbind()) in JQuery vertraut

Machen Sie sich mit Bindungsereignissen (bind()) und Entfernungsereignissen (unbind()) in JQuery vertraut

巴扎黑Original: 2017-06-25 14:50:571864Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung und das Teilen von Beispielen für das Bindungs-Ereignis und Entfernungsereignis vor. Er wird hier als Referenz für Freunde in Not empfohlen.

Wenn Sie die Wirkung des Ereignisses manchmal nach der Ausführung des Ereignisses abbrechen möchten, können Sie es mit bestimmten Methoden behandeln. Zum Beispiel die Methoden bind() (Binden von Ereignissen) und unbind() (Entfernen von Ereignissen, die über die bind()-Methode hinzugefügt wurden), um die Auswirkungen von Ereignissen zu entfernen.

Zum Beispiel im folgenden Fall:

Der Code lautet wie folgt:

<script type="text/
javascript
">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
    })
</script>

HTML-Teil:

Der Code lautet wie folgt:

<body>
    <button id="btn">Click Me</button>
    <p id="test"></p>
</body>

Wenn auf die Schaltfläche btn geklickt wird, werden drei Klickereignisse ausgelöst. Die Methode append() übergibt hier den Inhalt von drei Absätzen an die p-Ebene.

Die append()-Methode hängt den angegebenen Inhalt an das Ende des ausgewählten Elements (immer noch darin) an. Sie unterscheidet sich immer noch von der html()-Methode. Die html()-Methode ändert den Inhalt des gesamten Elements, anstatt den Inhalt an das Ende des Elements anzuhängen. Die Methode text() ähnelt der Methode html(), der Unterschied besteht jedoch darin, dass HTML-Code in der Methode html() geschrieben und korrekt analysiert werden kann, während text() den HTML-Code nur als normales Zeichenfolge .

Jedes Mal, wenn Sie hier klicken, wird ein Ereignis ausgeführt und Sie möchten am Ende der p-Ebene einen Absatz hinzufügen. Der folgende Code bricht den Ereigniseffekt ab. Sie können das Ereignis

über löschen, um den Klickeffekt ungültig zu machen:

Der Code lautet wie folgt: .unbind("click");Die Funktion davon Code besteht darin, das Klickereignis unter dem Element btn abzubrechen. Dies gilt nicht nur für die bind()-Methode, sondern auch für die click()-Methode. Aus einer bestimmten Perspektive sind bind("click", function(){}) und click(function(){}) gleichwertig.

Sie können auch bestimmte Ereignisse für bestimmte Methoden löschen. Sie können sich auf den folgenden Code beziehen:

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delAll&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click");
       });
    })
</script>

Der Code lautet wie folgt:

Der zweite Parameter der unbind()-Methode ist der Name der Ausführungsfunktion, die dem Ereignis entspricht. Nach der Ausführung gibt es nur noch myFun2. Das Ereignis wurde gelöscht und die anderen beiden Klickereignisse wurden normal ausgeführt.

Es gibt auch eine Methode one(), die der Methode bind() ähnelt. Der Unterschied besteht darin, dass die Methode one() nur einmal ausgeführt wird. Binden Sie eine einmalige

<script type="text/javascript">
    $(function(){
       $(&#39;#btn&#39;).bind("click", myFun1 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数1</p>");
              }).bind("click", myFun2 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数2</p>");
              }).bind("click", myFun3 = function(){
                     $(&#39;#test&#39;).append("<p>绑定函数3</p>");
              });
       $(&#39;#delTwo&#39;).click(function(){
              $(&#39;#btn&#39;).unbind("click",myFun2);
       });
    })
</script>

Ereignishandlerfunktion

an ein bestimmtes Ereignis (z. B. einen Klick) jedes passenden Elements. Der Code lautet wie folgt:

Der Code lautet wie folgt:

Nach dem Klicken wird er nur einmal ausgeführt. Durch erneutes Klicken wird der Effekt nicht ausgelöst. Dies ist die einzige Methode.

Das obige ist der detaillierte Inhalt vonMachen Sie sich mit Bindungsereignissen (bind()) und Entfernungsereignissen (unbind()) in JQuery vertraut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erfahrungsaustausch zur Verwendung von triggerHandler() in jQueryNächster Artikel：Erfahrungsaustausch zur Verwendung von triggerHandler() in jQuery

In Verbindung stehende Artikel

Mehr sehen