Ausführliche Erläuterung der JQuery-Bindungsereignismethoden „delegate()', „bind()', „live()' und „on()'.-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Ausführliche Erläuterung der JQuery-Bindungsereignismethoden „delegate()', „bind()', „live()' und „on()'.

黄舟

Jun 26, 2017 am 10:02 AM

bindjquerylive绑定

Vorwort

Da jquery häufig zum Hinzufügen und Löschen von Dom-Elementen in Projekten verwendet wird, umfasst es die Bindungsereignismethode von Dom-Elementen. Fassen wir kurz die Unterschiede zwischen Bind, Live, Delegate usw. zusammen. , zum späteren Nachschlagen, und ich hoffe, dass dieser Artikel den Gärtnern in Zukunft helfen kann. Ich hoffe, dass Sie mich ohne weiteres korrigieren.

bind()

Kurze Beschreibung

　 bind()Fügt dem passenden Element einen oder mehrere Ereignishandler hinzu.

Anwendung

　$(selector).bind(event,data,function)

Ereignis: erforderlich; ein oder mehrere Ereignisse, die dem Element hinzugefügt wurden, wie z. B. Klick, Doppelklick usw.; 🎜> Einzelereignisverarbeitung: Zum Beispiel

$(selector).bind("click",data,function); Verarbeitung mehrerer Ereignisse: 1. Verwenden Sie Leerzeichen, um mehrere Ereignisse zu trennen, z. B.

$(selector).bind("click dbclick mouseout",data,function);

2. Verwenden Sie geschweifte Klammern, um mehrere Ereignisse flexibel zu definieren, z. B. $(selector ).bind({event1:function , event2:function, ...})　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 Aufruf der gleichen Funktion

Klammeralternative: Die Bindung ist flexibler und Sie können Funktionen separat an Ereignisse binden.

Daten: optional; Parameter, die übergeben werden müssen;

Funktion: erforderlich; wenn gebunden Die Funktion, die ausgeführt werden muss, wenn ein bestimmtes Ereignis auftritt

Beispiele
Code anzeigen

Anwendbare JQuery-Version

　Gilt für alle Versionen, aber laut offizieller Website gibt es seit Version jquery1.7 die Funktion bind() Es wird empfohlen, stattdessen on() zu verwenden.

live()

Kurze Beschreibung

　live() An das aktuelle oder zukünftige passende Element Einen oder mehrere Event-Handler hinzufügen;

Verwendung

　$(selector).live(event,data,function)

Ereignis: Erforderlich; ein oder mehrere Elemente, die den Elementereignissen hinzugefügt wurden, z als Klick, Doppelklick usw.;

　 Einzelereignisverarbeitung: wie $(selector).live ("click",data,function);

Multi-Event-Verarbeitung: 1. Verwenden Sie Leerzeichen, um Trennen Sie mehrere Ereignisse. Ereignisse, z. B. $(selector).live("click dbclick mouseout",data,function);

2. Verwenden Sie geschweifte Klammern, um mehrere Ereignisse flexibel zu definieren, z. B. $(selector). live({event1:function, event2:function, ...})　

3. Raumtrennungsmethode: Die Bindung ist relativ starr und kann Funktionen nicht separat an Ereignisse binden. Sie eignet sich für die Verarbeitung mehrerer Ereignisse, die dieselbe Funktion aufrufen.

　　　 Klammeralternative: Die Bindung ist flexibler und Sie können Funktionen einzeln an Ereignisse binden; 　　

Daten: optional; Parameter, die übergeben werden müssen;

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery中live()绑定事件方式</title>
    <style type="text/css">
        .container
        {
            width: 300px;
            height: 300px;
            border: 1px #ccc solid;
            background-color: Green;
        }
        .btn-test
        {
            border: 1px #ccc solid;
            padding: 5px 15px;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            /*********添加单个事件处理*********/

            $(".btn-test").live("click", function () {
                //显示隐藏div
                $(".container").slideToggle();
            });

            
            /********添加多个事件处理********/

            //空格相隔方式
            $(".btn-test").live("mouseout click", function () {
                //显示隐藏div
                $(".container").slideToggle();
            });

            //大括号替代方式
            $(".btn-test").live({
                "mouseout": function () {
                    alert("这是mouseout事件!");
                },
                "click": function () {
                    $(".container").slideToggle();
                }
            });

            /********删除事件处理********/
            $(".btn-test").die("click");
            
        });
    </script>
</head>
<body>
    <input type="button" value="按钮" class="btn-test" />
    <div class="container">
    </div>
</body>
</html>

View Code

适用Jquery版本

　　jquery1.9版本以下支持，jquery1.9及其以上版本删除了此方法，jquery1.9以上版本用on()方法来代替。

delegate()

简要描述

　　delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

使用方式　

　　$(selector).delegate(childSelector,event,data,function)

　　childSelector: 必需项；需要添加事件处理程序的元素，一般为selector的子元素；

　　event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

　　　　　　单事件处理：例如 $(selector).delegate(childselector,"click",data,function);

　　　　　　多事件处理：1.利用空格分隔多事件，例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);

　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})　

　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　　　

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery中delegate()绑定事件方式</title>
    <style type="text/css">
        .container
        {
            width: 300px;
            height: 300px;
            border: 1px #ccc solid;
            background-color: Green;
        }
        .btn-test
        {
            border: 1px #ccc solid;
            padding: 5px 15px;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            /***********单元素添加单事件***********/

            //按钮绑定单击事件 实现div的显示隐藏
            $(".header").delegate("#btn-test1", "click", function () {
                $(".container").slideToggle();
            });


            /***********单元素添加多事件***********/

            //空格相隔方式
            $(".header").delegate("#btn-test1", "click mouseout", function () {
                $(".container").slideToggle();
            });

            //大括号替代方式
            $(".header").delegate("#btn-test1", {
                "mouseout": function () {
                    alert("这是mouseout事件!");
                },
                "click": function () {
                    $(".container").slideToggle();
                }
            });


        });
    </script>
</head>
<body>
    <div class="header">
        <input type="button" value="按钮1" class="btn-test" id="btn-test1" />
        <input type="button" value="按钮2" class="btn-test" id="btn-test2" />
    </div>
    <div class="container">
    </div>
</body>
</html>

View Code

适用Jquery版本

　jque ry1.4.2 und höher;

on()

Kurze Beschreibung

　on() für das angegebene Element Eins oder hinzufügen Weitere Ereignishandler und gibt Funktionen an, die ausgeführt werden sollen, wenn diese Ereignisse auftreten. Ereignishandler, die die Methode on() verwenden, gelten für aktuelle oder zukünftige Elemente (z. B. neue Elemente, die von einem Skript erstellt wurden). $(selector) ).on(event,childselector,data,function)

event :

Erforderlich; ein oder mehrere Ereignisse, die dem Element hinzugefügt wurden, z. B. Klick, Doppelklick usw.;

Einzelereignisverarbeitung: z als

$(selector).on("click",childselector,data,function);

Verarbeitung mehrerer Ereignisse: 1. Verwenden Sie Leerzeichen, um mehrere Ereignisse zu trennen, z. B. $(selector). on("click

dbclick mouseout",childseletor,data ,Funktion);

　　　　　　　　　　　　2.利用大括号灵活定义多事件，例如 $(selector).on({event1:function, event2:function, ...},childselector);　

　　　　　　　　　　　　3.空格相隔方式：绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

　　　　　　　　　　　　大括号替代方式：绑定较为灵活，可以给事件单独绑定函数；　

　　childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；　　

　　data：可选；需要传递的参数；

　　function：必需；当绑定事件发生时，需要执行的函数；

举例说明
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery中on()绑定事件方式</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { /*********添加单个事件处理*********/ $(".header").on("click", ".btn-test", function () { //显示隐藏div $(".container").slideToggle(); }); /********添加多个事件处理********/ //空格相隔方式 $(".header").on("mouseout click", ".btn-test", function () { //显示隐藏div $(".container").slideToggle(); }); //大括号替代方式 $(".header").on({ "mouseout": function () { alert("这是mouseout事件!"); }, "click": function () { $(".container").slideToggle(); } }, ".btn-test"); //删除事件 $(".header").off("click", ".btn-test"); }); </script> </head> <body> <div class="header"> <input type="button" value="按钮" class="btn-test" /> </div> <div class="container"> </div> </body> </html>

View Code

适用Jquery版本

jquery1.7 und höher; nach dem Erscheinen der jquery1.7-Version wird verwendet, um bind zu ersetzen (), live()-Bindungsereignismethode; 🎜> Die Gemeinsamkeiten, Unterschiede, Vor- und Nachteile der vier Methoden

Gleiche Punkte:
1. Beide unterstützen die Bindung einzelner Elemente und mehrere Ereignisse; Leerzeichen-Trennungsmethode oder Klammerersetzungsmethode; 2. Alle Ereignisse werden durch Ereignis-Bubbling an das Dokument übergeben >

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery中四种方式给未来元素设置事件</title> <style type="text/css"> .container { width: 300px; height: 300px; border: 1px #ccc solid; background-color: Green; } .btn-test { border: 1px #ccc solid; padding: 5px 15px; cursor: pointer; } </style> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //利用bind()方法，给P标签设置click方法 ======失败没有任何反应======= $(".container p").bind("click", function () { alert("bind()添加单击事件成功!"); }); //利用live()方法.给P标签设置click方法 =======成功调用方法============ $(".container p").live("click", function () { alert("live()添加单击事件成功!"); }); //利用delegate()方法.给P标签设置click方法 =======成功调用方法============ $(".container").delegate("p", "click", function () { //显示隐藏div alert("delegate()添加单击事件成功!"); }); //利用on()方法.给P标签设置click方法 =======成功调用方法============ $(".container").on("click", "p", function () { //显示隐藏div alert("on()添加单击事件成功!"); }); //按钮添加P标签 $(".btn-test").click(function () { $(".container").append("<p>这是新增的段落!</p>"); }); }); </script> </head> <body> <input type="button" class="btn-test" value="添加元素" /> <div class="container"> </div> </body> </html>

2. Die Funktion bind() war vor der Veröffentlichung von jquery Version 1.7 relativ beliebt. Nach der Veröffentlichung von Version 1.7 wird bind() nicht mehr offiziell empfohlen und die alternative Funktion ist on(). Dies gilt auch für die neu hinzugefügten Funktionen in Version 1.7 >

Wird verwendet, um die gelöschte Funktion live() zu ersetzen in Version 1.9;

3 Die Live()-Funktion ähnelt der Delegate()-Funktion, aber die Live()-Funktion hat Vorteile in Bezug auf Ausführungsgeschwindigkeit, Flexibilität und CSS-Selektor wird weniger unterstützt als Delegate()
4.bind() unterstützt alle Versionen von Jquery; delegate() unterstützt jquery1.4.2+; on() unterstützt jquery1.7+; >Zusammenfassung　Wenn die Bei der im Projekt genannten JQuery-Version handelt es sich um eine niedrigere Version. Es wird empfohlen, „delegate()“ zu verwenden. Bei höheren Versionen von jquery kann stattdessen „on()“ verwendet werden. Wenn Sie andere Ideen haben, können Sie diese gerne mitteilen .

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der JQuery-Bindungsereignismethoden „delegate()', „bind()', „live()' und „on()'.. 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

Verwandter Artikel

Ist JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

Die Rolle von C/C bei JavaScript -Dolmetschern und CompilernApr 20, 2025 am 12:01 AM

C und C spielen eine wichtige Rolle in der JavaScript -Engine, die hauptsächlich zur Implementierung von Dolmetschern und JIT -Compilern verwendet wird. 1) C wird verwendet, um JavaScript -Quellcode zu analysieren und einen abstrakten Syntaxbaum zu generieren. 2) C ist für die Generierung und Ausführung von Bytecode verantwortlich. 3) C implementiert den JIT-Compiler, optimiert und kompiliert Hot-Spot-Code zur Laufzeit und verbessert die Ausführungseffizienz von JavaScript erheblich.

JavaScript in Aktion: Beispiele und Projekte in realer WeltApr 19, 2025 am 12:13 AM

Die Anwendung von JavaScript in der realen Welt umfasst Front-End- und Back-End-Entwicklung. 1) Zeigen Sie Front-End-Anwendungen an, indem Sie eine TODO-Listanwendung erstellen, die DOM-Operationen und Ereignisverarbeitung umfasst. 2) Erstellen Sie RESTFUFFUPI über Node.js und express, um Back-End-Anwendungen zu demonstrieren.

JavaScript und das Web: Kernfunktionalität und AnwendungsfälleApr 18, 2025 am 12:19 AM

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

See all articles