Heim > Artikel > Web-Frontend > jquery beim Entfernen der Ereignisbindung

jquery beim Entfernen der Ereignisbindung

PHPzOriginal: 2023-05-28 17:38:38653Durchsuche

Um verschiedene interaktive Effekte zu erzielen, binden wir in der Front-End-Entwicklung Ereignisse an Seitenelemente, damit diese in bestimmten Szenarien bestimmte Vorgänge ausführen können. Manchmal müssen wir jedoch die Bindung eines Ereignisses entfernen. Wenn beispielsweise ein Element zerstört wird oder nicht mehr auf ein Ereignis warten muss, müssen wir die Bindung des entsprechenden Ereignishandlers vom Element aufheben. In jQuery werden mehrere Methoden bereitgestellt, um das Binden und Lösen von Ereignissen zu implementieren, z. B. on(), off(), unbind()usw. In diesem Artikel wird hauptsächlich erläutert, wie die Ereignisbindung in der Methode <code>on() entfernt wird. on()、off()、unbind()等。本文将主要介绍on()方法中如何移除事件的绑定。

jQuery事件处理

在jQuery中，事件处理方法一般有三种，分别是bind()、delegate()和live()。其中，delegate()使用的较少，其主要作用是为父级元素添加事件处理程序，用于动态添加的子元素；live()在jQuery1.7版本后被废弃，可以用on()代替。

on()是jQuery比较常用的事件处理方法，用于在指定的元素上绑定一个或多个事件处理函数。常见的使用方式如下：

$(selector).on(event, handler);

其中，selector为需要绑定事件的目标元素，可为标签、类名、ID等选择器；event为绑定的事件类型，如click、mouseover、keyup等；handler为事件处理函数，可以是匿名函数或已定义的函数名。

随着项目需求和代码规模的不断增长，可能会出现一个元素被多个回调函数绑定同一个事件的情况，这时候我们需要移除绑定在该元素上的某个或所有的事件处理函数。接下来，我们将介绍如何使用on()中的参数来移除事件的绑定。

移除指定处理程序

如果我们只需要移除元素上的指定事件处理程序，可以使用off()方法。该方法用于移除与指定元素相关的事件处理函数。常见的使用方式如下：

$(selector).off(event, handler);

其中，selector为需要移除事件的目标元素，可为标签、类名、ID等选择器；event为需要移除的事件类型，如click、mouseover、keyup等；handler为被移除的事件处理函数，可以是匿名函数或已定义的函数名。

接下来，我们通过一个具体的例子来演示使用off()方法移除事件的绑定。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移除指定事件处理程序</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="btn">点击绑定事件</button>
    <script>
        function handleClick() {
            console.log('处理click事件');
        }

        $('#btn').on('click', handleClick);

        setTimeout(() => {
            $('#btn').off('click', handleClick);
            console.log('移除click事件处理程序');
        }, 2000);
    </script>
</body>
</html>

在上面的代码中，我们在按钮元素上绑定了一个click事件，绑定的事件处理函数为handleClick。然后，在2秒后，我们使用off()方法移除了点击事件的处理程序handleClick。当我们点击按钮时，会在控制台上打印处理事件的信息。当移除处理程序后，再次点击按钮时，就没有任何响应了。这就是通过off()方法移除指定事件处理程序的基本操作。

移除与元素相关的全部处理程序

在开发中，我们也可能需要移除某个元素上绑定的所有事件处理程序，这时候可以使用off()方法的另外一个形式：

$(selector).off(event);

这个方法只需传入一个参数event，它会从元素上移除所有指定类型的事件处理函数。

使用one()

除了off()之外，在jQuery中还有另外一个方法可以用于移除事件绑定，它就是one()。该方法与on()很相似，但是它只会监听一次事件，执行完毕后就自动解除绑定。因此，如果你需要在元素上添加一个仅需执行一次的事件处理程序，那么可以使用one()代替on()来绑定事件，这样就无需手动解除绑定了。

$(selector).one(event, handler);

和on()方法一样，one()也接收两个参数，分别指定要绑定的事件类型和处理程序。当指定事件类型被触发时，处理程序就会被执行。当处理程序执行完毕后，对应的事件就会被自动移除。

使用unbind()

unbind()方法也可以用于移除事件绑定。和off()类似，unbind()也有两个用法，分别是移除指定的事件处理程序和移除所有类型的事件处理程序。使用方式如下：

$(selector).unbind(event, handler); // 移除指定事件处理程序

$(selector).unbind(event); // 移除全部事件处理程序

总结

本文主要介绍了在jQuery中使用on()、off()、one()和unbind()

jQuery-Ereignisverarbeitung

In jQuery gibt es im Allgemeinen drei Ereignisverarbeitungsmethoden, nämlich bind(), delegate() und live (). Unter diesen wird delegate() selten verwendet. Seine Hauptfunktion besteht darin, Ereignishandler für dynamisch hinzugefügte untergeordnete Elemente hinzuzufügen nach Version .7 aufgegeben und kann durch on() ersetzt werden. 🎜🎜on() ist eine häufig verwendete Ereignisbehandlungsmethode in jQuery, mit der eine oder mehrere Ereignisbehandlungsfunktionen an bestimmte Elemente gebunden werden. Übliche Verwendungsmethoden sind wie folgt: 🎜rrreee🎜 Unter diesen ist selector das Zielelement, das an das Ereignis gebunden werden muss. Dabei kann es sich um einen Selektor wie Label, Klassenname, ID usw. handeln. ; event ist das Bindungselement, wie z. B. Click, Mouseover, Keyup usw.; handler ist die Ereignisverarbeitungsfunktion, die eine anonyme Funktion sein kann ein definierter Funktionsname. 🎜🎜Da die Projektanforderungen und der Codeumfang weiter wachsen, kann es vorkommen, dass ein Element durch mehrere Rückruffunktionen an dasselbe Ereignis gebunden ist. Zu diesem Zeitpunkt müssen wir ein oder alle an das Element gebundenen Ereignisse entfernen. Als Nächstes stellen wir vor, wie Sie die Parameter in on() verwenden, um die Ereignisbindung zu entfernen. 🎜

Angegebenen Handler entfernen

🎜Wenn wir nur den angegebenen Ereignishandler für das Element entfernen müssen, können wir die Methode off() verwenden. Diese Methode wird verwendet, um die Ereignishandlerfunktion zu entfernen, die sich auf das angegebene Element bezieht. Übliche Verwendungsmethoden sind wie folgt: 🎜rrreee🎜 Unter diesen ist selector das Zielelement des Ereignisses, das entfernt werden muss. Dabei kann es sich um einen Selektor wie Label, Klassenname, ID usw. handeln. ; event ist erforderlich. Entfernte Ereignistypen wie Click, Mouseover, Keyup usw.; handler ist die entfernte Ereignisbehandlungsfunktion, die eine anonyme Funktion oder eine definierte sein kann Funktionsname. 🎜🎜Als nächstes verwenden wir ein konkretes Beispiel, um die Verwendung der Methode off() zum Entfernen der Ereignisbindung zu demonstrieren. 🎜rrreee🎜Im obigen Code binden wir ein click-Ereignis an das Schaltflächenelement, und der gebundene Ereignishandler ist handleClick. Dann, nach 2 Sekunden, entfernen wir den Click-Event-Handler handleClick mit der Methode off(). Wenn wir auf die Schaltfläche klicken, werden die Informationen zur Verarbeitung des Ereignisses auf der Konsole gedruckt. Nach dem Entfernen des Handlers passiert nichts, wenn erneut auf die Schaltfläche geklickt wird. Dabei handelt es sich grundsätzlich um das Entfernen eines angegebenen Event-Handlers über die Methode off(). 🎜

Entfernen Sie alle mit dem Element verbundenen Handler

🎜Während der Entwicklung müssen wir möglicherweise auch alle an ein Element gebundenen Event-Handler entfernen. In diesem Fall können wir off() Eine andere Form von verwenden -Methode: 🎜rrreee🎜Diese Methode muss nur einen Parameter event übergeben, wodurch alle Event-Handler des angegebenen Typs aus dem Element entfernt werden. 🎜

Verwenden Sie one()

🎜Zusätzlich zu off() gibt es in jQuery eine weitere Methode, die zum Entfernen der Ereignisbindung verwendet werden kann, nämlich one() . Diese Methode ist on() sehr ähnlich, lauscht das Ereignis jedoch nur einmal und löst die Bindung nach der Ausführung automatisch auf. Wenn Sie also einen Ereignishandler für ein Element hinzufügen müssen, das nur einmal ausgeführt werden muss, können Sie one() anstelle von on() verwenden, um das Ereignis zu binden , sodass die Bindung nicht manuell aufgehoben werden muss. 🎜rrreee🎜Wie die Methode on() empfängt auch one() zwei Parameter, die den Ereignistyp und den zu bindenden Handler angeben. Wenn der angegebene Ereignistyp ausgelöst wird, wird der Handler ausgeführt. Wenn der Handler die Ausführung abschließt, wird das entsprechende Ereignis automatisch entfernt. 🎜

Verwenden Sie unbind()

🎜unbind()-Methode kann auch verwendet werden, um die Ereignisbindung zu entfernen. Ähnlich wie off() hat auch unbind() zwei Verwendungszwecke, nämlich das Entfernen des angegebenen Event-Handlers und das Entfernen aller Arten von Event-Handlern. Die Verwendung ist wie folgt: 🎜rrreee

Zusammenfassung

🎜Dieser Artikel stellt hauptsächlich die Verwendung von on(), off(), one vor ( )- und unbind()-Methoden zur Verarbeitung von Ereignisbindungs- und -entbindungsvorgängen. Für unterschiedliche Anforderungen können Sie die geeignete Methode zur Verarbeitung der Ereignisbindung auswählen und so den Code flexibler und effizienter gestalten. Es ist zu beachten, dass beim Aufheben der Bindung auf die korrekte Übergabe der Parameter geachtet werden muss, da sonst unerwartete Situationen auftreten können. 🎜

Das obige ist der detaillierte Inhalt vonjquery beim Entfernen der Ereignisbindung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery 回调函数 Delegate Event 事件选择器

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：So installieren Sie den Installationspfad von Centos NodeJSNächster Artikel：So installieren Sie den Installationspfad von Centos NodeJS

In Verbindung stehende Artikel

Mehr sehen