Machen Sie sich mit Bindungsereignissen (bind()) und Entfernungsereignissen (unbind()) in JQuery vertraut-js-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-06-25 14:50:57

Original

1858 Leute haben es durchsucht

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>

Nach dem Login kopieren

HTML-Teil:

Der Code lautet wie folgt:

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

Nach dem Login kopieren

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 < behandeln kann 🎜> 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!