草庐IT

javascript - 动态绑定(bind)事件处理程序的最有效方法

coder 2024-07-20 原文

问题: 我需要动态地将任意数量的事件处理程序绑定(bind)到任意数量的元素(DOM 节点、window、document)运行时，我需要能够在页面的生命周期内为动态创建(或销毁)的节点更新事件绑定(bind)。我可以看到三个选项来解决这个问题:

I) window
事件委托(delegate) II) 每个节点直接绑定(bind)事件
III) 共同祖先的事件委托(delegate)(在运行时之前是未知的，并且可能需要在 DOM 更改时重新计算)

最有效的方法是什么？

一点背景

我正在处理一组需要对用户事件(点击、滚动等)进行分析跟踪的页面，我希望能够在一堆页面上轻松配置这些事件处理程序，而无需编写脚本处理每个实例的事件绑定(bind)。此外，因为我将来可能需要跟踪新事件，或者跟踪动态添加到页面或从页面中删除的元素上的事件，所以我需要能够考虑在生命周期内发生的 DOM 更改页面的。

作为我目前正在考虑的示例，我想创建一个接受配置对象的函数，该配置对象允许程序员为每个事件指定默认处理程序，并允许他们为特定元素覆盖它们:

Analytics.init({
    // default handlers for each event type
    defaultHandlers: {
        "click": function(e) { ... },
        "focus": function(e) { ... }
    },

    // elements to listen to 
    targetElements: {

        // it should work with non-DOM nodes like 'window' and 'document'
        window: {
            // events for which the default handlers should be called
            useDefaultHandlers: ['click'],

            // custom handler
            "scroll": function(e) { ... }
        },

        // it should work with CSS selectors
        "#someId": {
            useDefaultHandlers: ['click', 'focus'],
            "blur": function(e) { ... }
        }
    }
});

来源

最佳答案

我通常在 document.documentElement 上委托(delegate)事件反对因为:

  1. 代表<html>页面上的元素，包含所有内容，其中包含用户可以与之交互的所有 HTML 标签。
  2. 它在 JavaScript 开始执行时可用，无需窗口加载或 DOM 就绪事件处理程序
  3. 您仍然可以捕获“滚动”事件

至于事件委托(delegate)的效率，事件必须冒泡的节点越多，花费的时间就越长，但是我们说的是大约 1 到 2 毫秒的时间差 -- 可能。用户是察觉不到的。引入性能损失的通常是 DOM 事件的处理，而不是事件从一个节点冒泡到另一个节点。

我发现以下因素通常会对 JavaScript 性能产生负面影响:

  1. 文档树中的节点越多，浏览器操作它所耗费的时间就越多。
  2. 页面上事件处理程序的数量越多，JavaScript 的速度就越慢，尽管您需要 100 个处理程序才能真正看到差异。

主要是，#1 的影响最大。我认为在大多数情况下，试图提高事件处理的性能是不成熟的优化。我看到的优化事件处理代码的唯一情况是你有一个每秒触发多次的事件(例如“滚动”和“mousemove”事件)。事件委托(delegate)的额外好处是您不必清理将从文档树分离的 DOM 节点上的事件处理程序，从而允许浏览器对该内存进行垃圾回收。

(来自下面的评论)wvandell 说:

The performance costs of event delegation have little to do with the actual 'bubbling' of events ... there is a performance hit incurred when delegating many selectors to a single parent.

这是事实，但让我们考虑一下感知的表现。委托(delegate)许多点击事件不会引起用户注意。如果你委托(delegate)一个像 scroll 这样的事件或 mousemove ，它可以每秒触发 50 次以上(留下 20 毫秒来处理事件)，然后用户可以察觉到性能问题。这又回到了我反对过早优化事件处理程序代码的论点。

许多点击事件可以毫无问题地委托(delegate)给一个共同的祖先，例如document.documentElement .我会在那里委托(delegate)一个“mousemove”事件吗？ 也许。这取决于发生了什么，以及委托(delegate)的“mousemove”事件是否足够响应。

关于javascript - 动态绑定(bind)事件处理程序的最有效方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25552804/

javascriptbindcodedelegate的jquerygoogle-analyticsdom-eventsevent-delegation

有关javascript - 动态绑定(bind)事件处理程序的最有效方法的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. 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

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  6. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  7. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  8. ruby - 在 Ruby 中编写命令行实用程序 - 2

    我想用ruby​​编写一个小的命令行实用程序并将其作为gem分发。我知道安装后，Guard、Sass和Thor等某些gem可以从命令行自行运行。为了让gem像二进制文件一样可用，我需要在我的gemspec中指定什么。 最佳答案 Gem::Specification.newdo|s|...s.executable='name_of_executable'...endhttp://docs.rubygems.org/read/chapter/20 关于ruby-在Ruby中编写命令行实用程序

  9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  10. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此

随机推荐