Web-Frontend
js-Tutorial
Ausführliche Erläuterung der JQuery-Bindungsereignismethoden „delegate()', „bind()', „live()' und „on()'.
Ausführliche Erläuterung der JQuery-Bindungsereignismethoden „delegate()', „bind()', „live()' und „on()'.
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：必需；当绑定事件发生时，需要执行的函数； 举例说明 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.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；演示代码如下: 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!<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>
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 > <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>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
BTCC-Tutorial: Wie kann ich die MetaMask-Wallet an der BTCC-Börse binden und verwenden?
Apr 26, 2024 am 09:40 AM
MetaMask (auf Chinesisch auch Little Fox Wallet genannt) ist eine kostenlose und beliebte Verschlüsselungs-Wallet-Software. Derzeit unterstützt BTCC die Bindung an die MetaMask-Wallet. Nach der Bindung können Sie sich mit der MetaMask-Wallet schnell anmelden, Werte speichern, Münzen kaufen usw. und bei der erstmaligen Bindung einen Testbonus von 20 USDT erhalten. Im BTCCMetaMask-Wallet-Tutorial stellen wir detailliert vor, wie man MetaMask registriert und verwendet und wie man das Little Fox-Wallet in BTCC bindet und verwendet. Was ist die MetaMask-Wallet? Mit über 30 Millionen Nutzern ist MetaMask Little Fox Wallet heute eines der beliebtesten Kryptowährungs-Wallets. Die Nutzung ist kostenlos und kann als Erweiterung im Netzwerk installiert werden
Wie binde ich ein Unterkonto auf Xiaohongshu? Wie prüft es, ob das Konto normal ist?
Mar 21, 2024 pm 10:11 PM
Im heutigen Zeitalter der Informationsexplosion wird der Aufbau einer persönlichen Marke und eines Unternehmensimages immer wichtiger. Als führende Fashion-Life-Sharing-Plattform in China hat Xiaohongshu die Aufmerksamkeit und Beteiligung vieler Nutzer auf sich gezogen. Für diejenigen Nutzer, die ihren Einfluss erweitern und die Effizienz der Inhaltsverbreitung verbessern möchten, ist die Bindung von Unterkonten ein wirksames Mittel geworden. Wie bindet Xiaohongshu also ein Unterkonto? Wie kann ich überprüfen, ob das Konto normal ist? Dieser Artikel beantwortet diese Fragen ausführlich für Sie. 1. Wie binde ich ein Unterkonto auf Xiaohongshu? 1. Melden Sie sich bei Ihrem Hauptkonto an: Zuerst müssen Sie sich bei Ihrem Xiaohongshu-Hauptkonto anmelden. 2. Öffnen Sie das Einstellungsmenü: Klicken Sie oben rechts auf „Ich“ und wählen Sie dann „Einstellungen“. 3. Geben Sie die Kontoverwaltung ein: Suchen Sie im Einstellungsmenü nach der Option „Kontoverwaltung“ oder „Kontoassistent“ und klicken Sie darauf
Schritte und Methoden, um Douyin in Toutiao zu binden
Mar 22, 2024 pm 05:56 PM
1. Öffnen Sie Toutiao. 2. Klicken Sie unten rechts auf „Mein“. 3. Klicken Sie auf [Systemeinstellungen]. 4. Klicken Sie auf [Konto- und Datenschutzeinstellungen]. 5. Klicken Sie auf die Schaltfläche auf der rechten Seite von [Douyin], um Douyin zu binden.
Wie binde ich die Cainiao-App an Pinduoduo? Wie füge ich den Cainiao Wrap zur Pinduoduo-Plattform hinzu?
Mar 19, 2024 pm 02:30 PM
Die Cainiao-App ist eine Plattform, die Ihnen verschiedene Logistikinformationen liefern kann. Die Funktionen hier sind sehr leistungsstark und einfach zu verwenden. Wenn Sie logistische Probleme haben, können diese auf jeden Fall gelöst werden -Stopp-Service kann alles rechtzeitig lösen, die Expresslieferung abholen, versenden usw. Wir haben mit verschiedenen Plattformen zusammengearbeitet und können manchmal abgefragt werden Es kann vorkommen, dass die auf Pinduoduo gekauften Waren keine Logistikinformationen anzeigen können. Um dies zu erreichen, müssen Sie die spezifischen Methoden unten klären, und jeder kann einen Blick darauf werfen. So binden Sie Cainiao an ein Pinduoduo-Konto: 1. Öffnen Sie die Cainiao-App und gehen Sie zur Hauptseite
Wie verwende ich die PUT-Anfragemethode in jQuery?
Feb 28, 2024 pm 03:12 PM
Wie verwende ich die PUT-Anfragemethode in jQuery? In jQuery ähnelt die Methode zum Senden einer PUT-Anfrage dem Senden anderer Arten von Anfragen, Sie müssen jedoch auf einige Details und Parametereinstellungen achten. PUT-Anfragen werden normalerweise zum Aktualisieren von Ressourcen verwendet, beispielsweise zum Aktualisieren von Daten in einer Datenbank oder zum Aktualisieren von Dateien auf dem Server. Das Folgende ist ein spezifisches Codebeispiel, das die PUT-Anforderungsmethode in jQuery verwendet. Stellen Sie zunächst sicher, dass Sie die jQuery-Bibliotheksdatei einschließen. Anschließend können Sie eine PUT-Anfrage senden über: $.ajax({u
jQuery-Tipps: Ändern Sie schnell den Text aller a-Tags auf der Seite
Feb 28, 2024 pm 09:06 PM
Titel: jQuery-Tipps: Ändern Sie schnell den Text aller Tags auf der Seite. In der Webentwicklung müssen wir häufig Elemente auf der Seite ändern und bedienen. Wenn Sie jQuery verwenden, müssen Sie manchmal den Textinhalt aller a-Tags auf der Seite gleichzeitig ändern, was Zeit und Energie sparen kann. Im Folgenden wird erläutert, wie Sie mit jQuery den Text aller Tags auf der Seite schnell ändern können, und es werden spezifische Codebeispiele angegeben. Zuerst müssen wir die jQuery-Bibliotheksdatei einführen und sicherstellen, dass der folgende Code in die Seite eingefügt wird: <
So binden Sie die Cainiao-APP an Pinduoduo. So binden Sie die Cainiao-APP an Pinduoduo
Mar 19, 2024 pm 05:16 PM
Wissen Sie, wie Sie Pinduoduo binden, wenn Sie Cainiao Wrap verwenden? Die offizielle Version der Cainiao Wrap-App synchronisiert einige Logistikinformationen von Pinduoduo nicht automatisch auf dieser Plattform. Sie können lediglich die Bestellnummer kopieren oder Ihr Mobiltelefon überprüfen wenn es Expressversandinformationen gibt. Natürlich müssen diese alle manuell ausgefüllt werden. Wenn Sie mehr wissen möchten, schauen Sie sich den Editor an. So binden Sie die Cainiao-APP an Pinduoduo 1. Öffnen Sie die Cainiao-APP und klicken Sie auf „Paketanleitung“ in der oberen linken Ecke der Hauptseite. 2. In der Benutzeroberfläche gibt es viele Shopping-Websites und Konten können gebunden werden. 3. Klicken Sie, um andere E-Commerce-Plattformen zu importieren. 4. Benutzerautorisierung: Klicken Sie auf Pinduoduo, um zur Benutzeroberfläche zu gelangen
So binden Sie die Xiaomi-Auto-App an das Ladesäulengerät
Apr 01, 2024 pm 06:52 PM
Das neueste von Xiaomi auf den Markt gebrachte Modellauto Mi su7 hat verschiedene heiße Suchlisten dominiert. Viele Benutzer, die zufällig ein Auto kaufen möchten, haben sich für den Kauf eines Modellautos Xiaomi su7 entschieden Wenn Sie sich dazu entschließen, eine Ladesäule zu Hause zum Aufladen zu verwenden, wird Ihnen dieses Tutorial eine ausführliche Einführung geben. Ich hoffe, es kann Ihnen helfen. Zuerst öffnen wir die mobile Xiaomi-App, klicken auf die Schaltfläche „Mein“ in der unteren rechten Ecke und sehen dann in der Benutzeroberfläche „Mein“ die Option „Heimladestapel“. Klicken Sie nach dem Aufrufen der Seite, die den Ladestapel bindet, auf den Scancode Klicken Sie unten auf die Schaltfläche und scannen Sie den QR-Code auf der Ladesäule. Mit dem QR-Code können Sie die Ladesäule an die App binden.
