Javascript jQuery 事件性能 MVC答案

【问题标题】：Javascript jQuery Event Performance MVCJavascript jQuery 事件性能 MVC
【发布时间】：2021-12-06 00:20:51
【问题描述】：

我正在审查一个 Javascript 应用程序的性能，该应用程序是使用 spin.js 和 underscore js（充当模板引擎）构建的。有一个通用的 EventManager.js 处理应用程序中的所有事件（通过 jQuery 'on' 事件处理 body 元素，请参阅下面的 sn-p），然后应用程序有自己的发布订阅中介委托给所有模块，它过滤事件然后发送到所有模块，通过过滤目标并将内部事件发布到模块。

鼠标移动事件该事件正在事件管理器上处理，因此任何鼠标移动都将由事件管理器处理，而不仅仅是处理特定 div 元素上的鼠标移动。我觉得功能太多了。

例如：div 上的点击事件由 module.subscribe("App-Click", onModuleClickHandler, filter: { selector: '#someSelector') 之类的模块处理。如果单击了该选择器，则eventmanager 检查当前目标是否具有该选择器，然后将自定义“App-Click”发布到该模块。

这样处理好还是只处理带有每个html事件的子模块而不是通用事件管理器？如果问题的任何部分含糊不清，请发表评论，我会更详细地更新该部分。

以下是eventManager的sn-p：

$('body')
    .on('mousedown',   onMouseEvent)
    .on('mouseup',     onMouseEvent)
    .on('mouseover',   onMouseEvent)
    .on('mousemove',   onMouseEvent)
    .on('mouseout',    onMouseEvent)
    .on('click',       onMouseEvent)
    .on('mousewheel',  onMouseWheelEvent);

【问题讨论】：

你应该只为你感兴趣的人询问活动。
@LeeTaylor 应用程序需要所有这些事件，你的意思是在特定的 div 而不是 dom 上注册？ ($('#divid').on) 而不是 body。另外，我如何衡量两者的性能并告诉他们这对性能不好而这很好。
是的，我的意思是你应该只为你需要的特定 DOM 元素请求这些事件。您可以使用现代浏览器中的内置分析器工具来帮助您确定要获得的性能提升

标签： javascript jquery jquery-events javascriptmvc spine.js

【解决方案1】：

DOM 上的事件传播使用sinking/bubbling 与下沉（捕获）和冒泡阶段。原则上，您的活动经理也应实施这一点，因为它非常灵活且实用。

但不清楚为什么您需要自己实现它。它已经在那里了。

【讨论】：

该应用程序没有实现事件传播，但他们创建了一个 mvc 架构，以便在 eventmanager.js 中处理 dom 事件，然后仅发送到订阅了对应的自定义事件名称的模块对于该 dom 事件，例如：div 上的单击事件由 module.subscribe("App-Click", onModuleClickHandler, filter: { selector: '#someSelector') 之类的模块处理。如果单击该选择器，则 eventmanager 将自定义“App-Click”发布到该模块。我不知道他们为什么这样做，只是想知道这样做的利弊。