Heim Web-Frontend js-Tutorial jQuery代码优化 事件委托篇_jquery

jQuery代码优化 事件委托篇_jquery

May 16, 2016 pm 05:59 PM
Veranstaltungsdelegation 代码优化

jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合。

事件委托

事件委托的事例在现实当中比比皆是。比如,有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件。在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象)。因此,发生在a上面的单击事件,div和body元素同样可以处理。而利用事件传播(这里是冒泡)这个机制,就可以实现事件委托。具体来说,事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)。

.bind()
假设有一个多行多列的表格,我们想让用户单击每个单元格都能看到与其中内容相关的更多信息(比如,通过提示条)。为此,可以为每个单元格都绑定click事件:

$("info_table td").bind("click", function(){/*显示更多信息*/});

问题是,如果表格中要绑定单击事件的有10列500行,那么查找和遍历5000个单元格会导致脚本执行速度明显变慢,而保存5000个td元素和相应的事件处理程序也会占用大量内存(类似于让每个人亲自站在门口等快递)。

在前面这个例子的基础上,如果我们想实现一个简单的相册应用,每页只显示50张照片的缩略图(50个单元格),用户点击“第x页”(或“下一页”)链接可以通过Ajax从服务器动态加载另外50张照片。在这种情况下,似乎使用.bind()方法为50个单元格绑定事件又可以接受了。

事实却不然。使用.bind()方法只会给第一页中的50个单元格绑定单击事件,动态加载的后续页面中的单元格都不会有这个单击事件。换句话说,.bind()只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件(类似于新来的员工收不到快递)。

事件委托可以解决上述两个问题。具体到代码上,只要用jQuery 1.3新增的.live()方法代替.bind()方法即可:

$("#info_table td").live("click",function(){/*显示更多信息*/});

这里的.live()方法会把click事件绑定到$(document)对象(但这一点从代码中体现不出来,这也是.live()方法饱受诟病的一个重要原因,稍后再详细讨论),而且只需要给$(document)绑定一次(不是50次,更不是5000次),然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时,$(document)对象都会检查事件类型和事件目标,如果是click事件且事件目标是td,那么就执行委托给它的处理程序。

.live()
到目前为止,一切似乎很完美。可惜,事实并非如此。因为.live()方法并不完美,它有如下几个主要缺点:

$()函数会找到当前页面中的所有td元素并创建jQuery对象,但在确认事件目标时却不用这个td元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销;
默认把事件绑定到$(document)元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失;
只能放在直接选择的元素后面,不能在连缀的DOM遍历方法后面使用,即$("#infotable td").live...可以,但$("#infotable").find("td").live...不行;
收集td元素并创建jQuery对象,但实际操作的却是$(document)对象,令人费解。

解决之道

为了避免生成不必要的jQuery对象,可以使用一种叫做“早委托”的hack,即在$(document).ready()方法外部调用.live():

复制代码 代码如下:

(function($){
$("#info_table td").live("click",function(){/*显示更多信息*/});
})(jQuery);

在此,(function($){...})(jQuery)是一个“立即执行的匿名函数”,构成了一个闭包,可以防止命名冲突。在匿名函数内部,$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意,使用这个hack时,脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机,因为这时候刚好document元素可用,而整个DOM还远未生成;如果把脚本放在结束的body标签前面,就没有意义了,因为那时候DOM已经完全可用了。

为了避免事件冒泡造成的性能损失,jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数:

$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});这样,“受托方”就从默认的$(document)变成了$("#infotable")[0],节省了冒泡的旅程。不过,与.live()共同使用的上下文参数必须是一个单独的DOM元素,所以这里指定上下文对象时使用的是$("#infotable")[0],即使用数组的索引操作符来取得的一个DOM元素。

.delegate()
如前所述,为了突破单一.bind()方法的局限性,实现事件委托,jQuery 1.3引入了.live()方法。后来,为解决“事件传播链”过长的问题,jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()。

使用.delegate(),前面的例子可以这样写:

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
使用.delegate()有如下优点(或者说解决了.live()方法的如下问题):

直接将目标元素选择符("td")、事件("click")及处理程序与“受拖方”$("#info_table")绑定,不额外收集元素、事件传播路径缩短、语义明确;
支持在连缀的DOM遍历方法后面调用,即支持$("table").find("#info").delegate...,支持精确控制;
可见,.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下,也可以使用.live()。

提示:使用事件委托时,如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。

结论
在下列情况下,应该使用.live()或.delegate(),而不能使用.bind():

为DOM中的很多元素绑定相同事件;
为DOM中尚不存在的元素绑定事件;

PS:根据jQuery 1.7 Beta 1的发版说明,jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on()和.off():
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
如果指定selector,则为事件委托;否则,就是常规绑定。新旧API对应如下:
jQuery代码优化 事件委托篇_jquery

(注:本文基于《jQuery基础教程(第3版)》相关章节内容编撰而成,同时参考了

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie man Java-Code gut umgestaltet Wie man Java-Code gut umgestaltet Jun 15, 2023 pm 09:17 PM

Als eine der beliebtesten Programmiersprachen der Welt ist Java für viele Unternehmen und Entwickler zur Sprache der Wahl geworden. Allerdings ist Code-Refactoring für die Aufrechterhaltung der Codequalität und Entwicklungseffizienz von entscheidender Bedeutung. Aufgrund seiner Komplexität kann es mit der Zeit immer schwieriger werden, Java-Code zu warten. In diesem Artikel wird erläutert, wie Sie Java-Code umgestalten, um die Codequalität und Wartbarkeit zu verbessern. Verstehen Sie die Prinzipien des Refactorings. Der Zweck des Java-Code-Refactorings besteht darin, die Struktur, Lesbarkeit und Wartbarkeit des Codes zu verbessern, und nicht einfach nur „den Code zu ändern“. Weil

Leistungsoptimierung von Java Spring Boot Security: Bringen Sie Ihr System zum Fliegen Leistungsoptimierung von Java Spring Boot Security: Bringen Sie Ihr System zum Fliegen Feb 19, 2024 pm 05:27 PM

1. Codeoptimierung, um die Verwendung zu vieler Sicherheitsanmerkungen zu vermeiden: Versuchen Sie in Controller und Service, die Verwendung von @PreAuthorize und @PostAuthorize sowie anderen Anmerkungen zu reduzieren, um die Ausführungszeit des Codes zu verlängern. Abfrageanweisungen optimieren: Bei Verwendung von springDataJPA kann die Optimierung von Abfrageanweisungen die Datenbankabfragezeit verkürzen und dadurch die Systemleistung verbessern. Sicherheitsinformationen zwischenspeichern: Durch das Zwischenspeichern einiger häufig verwendeter Sicherheitsinformationen kann die Anzahl der Datenbankzugriffe verringert und die Reaktionsgeschwindigkeit des Systems verbessert werden. 2. Verwenden Sie Indizes zur Datenbankoptimierung: Durch das Erstellen von Indizes für häufig abgefragte Tabellen kann die Abfragegeschwindigkeit der Datenbank erheblich verbessert werden. Protokolle und temporäre Tabellen regelmäßig bereinigen: Protokolle und temporäre Tabellen regelmäßig bereinigen

Codeoptimierungstechniken in der PHP-Verarbeitung mit hoher Parallelität Codeoptimierungstechniken in der PHP-Verarbeitung mit hoher Parallelität Aug 11, 2023 pm 12:57 PM

Codeoptimierungstechniken in der PHP-Verarbeitung mit hoher Parallelität Mit der rasanten Entwicklung des Internets ist die Verarbeitung mit hoher Parallelität zu einem wichtigen Thema bei der Entwicklung von Webanwendungen geworden. In der PHP-Entwicklung ist die Optimierung des Codes zur Bewältigung hoher gleichzeitiger Anforderungen zu einem schwierigen Problem geworden, das Programmierer lösen müssen. In diesem Artikel werden einige Codeoptimierungstechniken in der PHP-Verarbeitung mit hoher Parallelität vorgestellt und Codebeispiele zur Veranschaulichung hinzugefügt. Angemessene Verwendung des Caches. In Situationen mit hoher Parallelität führt ein häufiger Zugriff auf die Datenbank zu einer übermäßigen Systemlast und einem relativ langsamen Zugriff auf die Datenbank. Deshalb können wir

Was sind die gängigen Methoden zur Optimierung der Programmleistung? Was sind die gängigen Methoden zur Optimierung der Programmleistung? May 09, 2024 am 09:57 AM

Zu den Methoden zur Programmleistungsoptimierung gehören: Algorithmusoptimierung: Wählen Sie einen Algorithmus mit geringerer Zeitkomplexität und reduzieren Sie Schleifen und bedingte Anweisungen. Auswahl der Datenstruktur: Wählen Sie geeignete Datenstrukturen basierend auf Datenzugriffsmustern aus, z. B. Nachschlagebäume und Hash-Tabellen. Speicheroptimierung: Vermeiden Sie die Erstellung unnötiger Objekte, geben Sie nicht mehr verwendeten Speicher frei und verwenden Sie die Speicherpooltechnologie. Thread-Optimierung: Identifizieren Sie Aufgaben, die parallelisiert werden können, und optimieren Sie den Thread-Synchronisierungsmechanismus. Datenbankoptimierung: Erstellen Sie Indizes, um den Datenabruf zu beschleunigen, optimieren Sie Abfrageanweisungen und verwenden Sie Cache- oder NoSQL-Datenbanken, um die Leistung zu verbessern.

So überarbeiten Sie Code in der Go-Sprache So überarbeiten Sie Code in der Go-Sprache Jun 02, 2023 am 08:31 AM

Mit der kontinuierlichen Vertiefung der Softwareentwicklung und der kontinuierlichen Anhäufung von Code ist Code-Refactoring zu einem unvermeidlichen Bestandteil des modernen Softwareentwicklungsprozesses geworden. Dabei handelt es sich um einen Prozess, bei dem der etablierte Code eines Systems geändert wird, um dessen Struktur, Leistung, Lesbarkeit oder andere damit zusammenhängende Aspekte zu verbessern. In diesem Artikel werden wir untersuchen, wie man Code-Refactoring in der Go-Sprache durchführt. Refactoring-Ziele definieren Bevor wir mit dem Code-Refactoring beginnen, sollten wir ein klares Refactoring-Ziel festlegen. Wir müssen uns einige Fragen stellen, zum Beispiel: Was sind die Probleme mit diesem Code? Wir müssen umbauen

Wie kann ich C++-Code umgestalten? Wie kann ich C++-Code umgestalten? Nov 04, 2023 pm 04:40 PM

C++ ist eine sehr leistungsfähige, flexible und weit verbreitete Programmiersprache. Mit der kontinuierlichen Weiterentwicklung von Projekten und der fortgesetzten relativen Wiederverwendung von Code wird es jedoch Probleme wie eine Verschlechterung der Codequalität und Lesbarkeit geben. Zu diesem Zeitpunkt muss der Code umgestaltet werden, um eine bessere Codequalität und eine höhere Wartbarkeit zu erreichen. In diesem Artikel erfahren Sie, wie Sie C++-Code umgestalten. Definieren Sie Ihre Ziele Bevor Sie mit der Umgestaltung Ihres Codes beginnen, müssen Sie definieren, was Sie erreichen möchten. Beispielsweise möchten Sie möglicherweise die Lesbarkeit des Codes verbessern, die Codeduplizierung reduzieren, die Codeleistung verbessern usw. keiner

Praxis der Python-Leistungsoptimierung: von den Grundlagen bis zum Fortgeschrittenen Praxis der Python-Leistungsoptimierung: von den Grundlagen bis zum Fortgeschrittenen Feb 20, 2024 pm 12:00 PM

Grundlegende Optimierungen Verwenden Sie die richtige Python-Version: Neuere Python-Versionen sind im Allgemeinen leistungsfähiger, bieten eine bessere Speicherverwaltung und integrierte Optimierungen. Wählen Sie die richtige Bibliothek: Sie können Zeit sparen und die Leistung verbessern, indem Sie speziell entwickelte Bibliotheken verwenden, anstatt Code von Grund auf neu zu schreiben. Reduzieren Sie die Anzahl der Schleifen: Vermeiden Sie nach Möglichkeit die Verwendung verschachtelter Schleifen. Die Verwendung von Listenverständnissen und Generatorausdrücken sind effizientere Alternativen. Durch die Optimierung der Datenstruktur wird der richtige Container ausgewählt: Listen eignen sich für den Direktzugriff, Wörterbücher für schnelle Schlüsselwertsuchen und Tupel für unveränderliche Daten. Vorab zugewiesenen Speicher verwenden: Durch die Vorabzuweisung der Größe eines Arrays oder einer Liste können Sie den Aufwand für die Speicherzuweisung und -defragmentierung reduzieren. Nutzung von Numpy und Pandas: Für wissenschaftliches Rechnen und Datenanalysen bietet Num

Schlüsselkompetenzen zur Codeoptimierung in der Leistungsoptimierung des Java-Frameworks Schlüsselkompetenzen zur Codeoptimierung in der Leistungsoptimierung des Java-Frameworks Jun 03, 2024 pm 01:16 PM

Bei der Leistungsoptimierung des Java-Frameworks ist die Codeoptimierung von entscheidender Bedeutung, einschließlich: 1. Reduzierung der Objekterstellung; Wenn Sie diese Tipps befolgen, können Sie die Leistung des Frameworks verbessern, indem Sie beispielsweise Hibernate-Abfragen optimieren, um die Anzahl der Datenbankaufrufe zu reduzieren.

See all articles