草庐IT

javascript - 什么是 DOM 事件委托(delegate)？

coder 2023-05-01 原文

谁能解释一下 JavaScript 中的事件委托(delegate)以及它有什么用处？

最佳答案

DOM 事件委托(delegate)是一种通过事件“冒泡”(也称为事件传播)的魔力，通过单个公共(public)父级而不是每个子级响应 ui 事件的机制。

当元素上触发事件时，the following occurs :

The event is dispatched to its target EventTarget and any event listeners found there are triggered. Bubbling events will then trigger any additional event listeners found by following the EventTarget's parent chain upward, checking for any event listeners registered on each successive EventTarget. This upward propagation will continue up to and including the Document.

事件冒泡为浏览器中的事件委托(delegate)提供了基础。现在您可以将事件处理程序绑定(bind)到单个父元素，并且只要事件发生在其任何子节点上(以及它们的任何子节点)，该处理程序就会被执行。 这是事件委托(delegate)。这是一个实践示例:

<ul onclick="alert(event.type + '!')">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

在该示例中，如果您要单击任何子 <li>节点，您将看到 "click!" 的警报，即使没有绑定(bind)到 <li> 的点击处理程序你点击了。如果我们绑定(bind) onclick="..."给每个<li>你会得到同样的效果。

那么有什么好处呢？

假设您现在需要动态添加新的 <li>通过 DOM 操作将项目添加到上述列表中:

var newLi = document.createElement('li');
newLi.innerHTML = 'Four';
myUL.appendChild(newLi);

如果没有使用事件委托(delegate)，您将不得不“重新绑定(bind)”"onclick"新的 <li> 的事件处理程序元素，以便它的行为与其 sibling 相同。 使用事件委托(delegate)，您不需要做任何事情。只需添加新的 <li>到列表中，你就完成了。

这对于具有绑定(bind)到许多元素的事件处理程序的 Web 应用程序来说绝对很棒，其中新元素在 DOM 中动态创建和/或删除。通过事件委托(delegate)，事件绑定(bind)的数量可以通过将它们移动到一个公共(public)的父元素来大幅减少，并且动态创建新元素的代码可以与绑定(bind)其事件处理程序的逻辑分离。

事件委托(delegate)的另一个好处是事件监听器使用的总内存占用减少了(因为事件绑定(bind)的数量减少了)。对于经常卸载的小页面(即用户经常导航到不同的页面)，它可能没有太大的区别。但对于长期存在的应用程序来说，它可能很重要。当从 DOM 中删除的元素仍然占用内存(即它们泄漏)时，有一些非常难以追踪的情况，并且这种泄漏的内存通常与事件绑定(bind)相关联。使用事件委托(delegate)，您可以自由地销毁子元素，而不会忘记“解除绑定(bind)”它们的事件监听器(因为监听器在祖先上)。然后可以控制这些类型的内存泄漏(如果不消除，有时很难做到。IE 我在看着你)。

下面是一些更好的事件委托(delegate)的具体代码示例:

关于javascript - 什么是 DOM 事件委托(delegate)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1687296/

javascriptdelegatecodenoreferrerevent-handlingdom-eventsevent-delegation

有关javascript - 什么是 DOM 事件委托(delegate)？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  6. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  7. ruby - Infinity 和 NaN 的类型是什么？ - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

  8. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  9. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  10. ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or

随机推荐