Heim > Artikel > Web-Frontend > Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung)

Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung)

WBOYnach vorne: 2021-12-15 18:34:252228Durchsuche

Im vorherigen Artikel „18 JavaScript-Optimierungstipps, die Sie kennen müssen“ haben wir einige Tipps in JavaScript vorgestellt. In diesem Artikel werfen wir einen Blick darauf, wie man JQuery-Ereignisse bindet und entbindet, ich hoffe, es hilft allen.

JQuery-Ereignisbindung und -Entbindung

1.1. jQuery-Ereignisregistrierung

jQuery bietet uns einen praktischen Mechanismus zur Ereignisregistrierung, der für Entwickler ein frustrierender Vorgang ist Folgendes:

Vorteile: Die Bedienung ist einfach und Sie müssen sich keine Gedanken über die Berichterstattung über Veranstaltungen und andere Probleme machen.

Nachteile: Die normale Veranstaltungsregistrierung kann nicht für die Veranstaltungsdelegation verwendet werden und die Bindung der Veranstaltung kann nicht aufgehoben werden, sodass andere Methoden erforderlich sind.

Syntax

Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung)

Democode

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

1.2. jQuery-Ereignisverarbeitung

Aufgrund der Mängel gewöhnlicher Registrierungsereignismethoden hat jQuery mehrere Verarbeitungsmethoden entwickelt:

on( ): wird für die Ereignisbindung verwendet, derzeit die beste Ereignisbindungsmethode
off(): Ereignis-Entbindung
trigger() / triggerHandler(): Ereignisauslöser

1.2.1 Ereignisbehandlung on()-Bindungsereignis

Aufgrund der Mängel gewöhnlicher Registrierungsereignismethoden hat jQuery mehrere neue Ereignisbindungsmethoden bind()/live()/delegate()/on() usw. erstellt, darunter die meisten Nützliche sind: on()

Syntax

Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung)

Democode

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol></ol>
    <script>
        $(function() {
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以实现事件委托（委派）
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // (3) on可以给未来动态创建的元素绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

1.2.3. Ereignisbehandlung off() Ereignis entbinden

Wenn sich die obige Logik eines Ereignisses in einem bestimmten Zustand befindet Wird je nach Bedarf nicht mehr benötigt, kann die Logik des Ereignisses entfernt werden. Dieser Vorgang wird als Ereignis-Entbindung bezeichnet. jQuery bietet uns eine Vielzahl von Methoden zum Aufheben der Ereignisbindung: die() / undelegate() / off() usw., und es gibt sogar eine Ereignisbindungsmethode one(), die nur einmal ausgelöst wird. Hier konzentrieren wir uns auf off();

Syntax

Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung)

Democode

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是一个P标签</p>
<script>
        $(function() {
  // 事件绑定
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log(&#39;我鼠标经过了&#39;);
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

1.2.4. Die Ereignisbehandlung trigger() löst automatisch Ereignisse aus

Manchmal möchten wir, dass bestimmte Ereignisse automatisch ausgelöst werden, z. B. die automatische Wiedergabefunktion Das Öffnen des Karussellbilds entspricht dem Klicken auf die Schaltfläche rechts. Sie können einen Timer verwenden, um das Klickereignis auf der rechten Schaltfläche automatisch auszulösen, ohne dass Sie mit der Maus klicken müssen. Daraus stellt uns jQuery zwei automatisch ausgelöste Ereignisse bereit, trigger() und triggerHandler();

Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung) Democode

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 绑定事件
      $("div").on("click", function() {
        alert(11);
      });
      // 自动触发事件
      // 1. 元素.事件()
      // $("div").click();会触发元素的默认行为
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
      // 一个会获取焦点，一个不会
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

1.3.jQuery-Ereignisse für Ereignisobjekte im DOM Es ist gekapselt, hat eine bessere Kompatibilität, ist bequemer zu erhalten und weist kaum Änderungen bei der Verwendung auf. Wenn ein Ereignis ausgelöst wird, wird ein Ereignisobjekt generiert.

Syntax

Democode

<body>
    <div></div>
<script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

Hinweis: Die Verwendung von Ereignisobjekten in jQuery kann aus Ereignissen in API und DOM gelernt werden. Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung)

1.4. jQuery-Kopierobjekt

jQuery bietet uns zwei Sätze von APIs zum schnellen Abrufen und Festlegen der Größe und Position von Elementen, die bequem und einfach zu verwenden sind.

Syntax

Democode

 <script>
        $(function() {
   // 1.合并数据
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
   
   // 2. 会覆盖 targetObj 里面原来的数据
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); 
        })
    </script>

Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung) 1.5. jQuery-Koexistenz mit mehreren Bibliotheken

In der tatsächlichen Entwicklung wurden viele Projekte seit mehr als zehn Jahren kontinuierlich weiterentwickelt und die jQuery-Version wird ständig aktualisiert Die jQuery-Version kann den Bedarf derzeit nicht decken. Es muss sichergestellt werden, dass neue Funktionen mit der neuen jQuery-Version implementiert werden, während die alte Version normal läuft. Diese Situation wird als jQuery-Multibibliothekskoexistenz bezeichnet.

Grammatik

Demo-Code

<script>
$(function() {
  // 让jquery 释放对$ 控制权 让用自己决定
  var suibian = jQuery.noConflict();
  console.log(suibian("span"));
})
</script>

Verwandte Video-Tutorial-Empfehlungen: Wie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung) jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie bindet und entbindet man Ereignisse in JQuery? (Detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery 封装 die Delegate 委托 Event 对象事件 dom

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Eine kurze Diskussion darüber, wie die Funktion zum Wechseln der Registerkartenkarte in Miniprogrammen implementiert wirdNächster Artikel：Eine kurze Diskussion darüber, wie die Funktion zum Wechseln der Registerkartenkarte in Miniprogrammen implementiert wird

In Verbindung stehende Artikel

Mehr sehen