jQuery使用事件处理程序删除元素 [英] jQuery removing elements with event handlers

问题描述

我有一个产品列表，我需要动态更新 #container 的innerHTML。

我的问题是，如果我做这样的答案：
Jquery删除元素内的所有事件处理程序

  $（＃container）。find（*）。关闭（）; 
  

因此，我删除了所有孩子的所有事件处理程序，然后我更新了html：

  $（＃container）。html（responseFromAJAX）; 
  

这对性能有何影响？我的意思是，这是一个好方法，删除所有旧元素和处理程序，清理内存，或者我需要做更多？

我的应用程序是一个网上商店，所以我的用户会环顾四周，并更新 #container 可能30-50次/访问。

解析方案

直接连接到DOM元素的事件处理程序在从DOM中删除DOM元素时会死亡。

替换内容就足够了。

委托事件作为更好的选择：

延迟事件（事件委托）的规则不同，如事件实际上并不连接到单个DOM元素，而是在更高级别捕获（如文档）。然后运行选择器，并针对匹配元素运行事件函数。延迟事件占用较少的内存，但运行速度较慢（很快）（您永远不会注意到鼠标事件的差异），因为元素搜索仅在事件触发时完成。

我通常建议在上使用deferred ，而不是连接到许多单独的元素，尤其是在动态加载DOM元素时。

例如

  $（document）.on（'someeventname'，'somejQueryselector'， function（e）{
 //在此处理事件
}）; 
  

具有委派处理程序的事件序列

• 将委派的处理程序附加到单个不变的祖先元素（ document 是最好的默认值，有几个原因，如果没有其他更接近/方便） 。有关详细信息，请参阅说明。


• 所选事件冒泡到委派的目标元素


• jQuery选择器仅适用于气泡中的元素 - chain


• 事件处理程序仅针对导致事件的匹配元素运行。

这样做的结果是委派的处理程序仅在事件时匹配，因此可以处理动态添加/删除的内容。事件注册时实际运行时间开销较低（因为它只连接到单个元素），事件时间的速度差异可以忽略不计（除非你可以每秒点击一次鼠标50,000次！）。 / p>

注意：

• 对于委派事件，您应该尝试将它们附加到单个元素，即目标元素的祖先，不会更改。


• 后备通常是 body 或文件如果没有其他方便的话。


• 使用正文对于委派事件可能会导致错误与样式。这可能意味着鼠标事件不会冒泡到正文（如果 body 的计算高度为0）。 文件更安全，因为它不受样式的影响。


• 另外文件 总是存在，因此您可以在没有问题的情况下将委派的事件处理程序附加到DOM就绪处理程序之外。

I have a list of products, where I need to update the innerHTML of a #container dynamically.

My question is, if I do something like in this answer: Jquery Remove All Event Handlers Inside Element

$("#container").find("*").off();

So, I remove all the event handlers for all the children, and then I update the html:

$("#container").html(responseFromAJAX);

How will this affect on the performance? I mean, is this a good way, to remove all the old elements and handlers, and clean up memory, or I need to do more?

My app is a webshop, so my Users will look around, and update the #container maybe 30-50 times/visit.

解决方案

Event handlers, connected directly to DOM elements, die when the DOM elements are removed from the DOM.

Replacing the content is enough.

Delegated events as a better alternative:

The rules for deferred events (event delegation) are different, as the events are not actually connected to the individual DOM elements, but are captured at a higher level (like the document). A selector is then run and the event function run against the matching element(s). Deferred events tie up less memory but are a tiny(-tiny) bit slower to run (you will never notice the difference for mouse events) as the element search is only done when the event triggers.

I would generally recommend using deferred on, instead of connecting to lots of individual elements, especially when your DOM elements are loaded dynamically.

e.g.

$(document).on('someeventname', 'somejQueryselector', function(e){
    // Handle the event here
});

Sequence of events with a delegated handler

• Attach a delegated handler to a single non-changing ancestor element (document is the best default for several reasons if nothing else is closer/convenient). See notes for details.
• The chosen event bubbles up to the delegated target element
• The jQuery selector is applied to just the elements in the bubble-chain
• The event handler is run against only the matching elements that caused the event.

The upshot of this is that delegated handlers only match at event time, so can cope with dynamically added/removed content. The runtime overhead is actually lower at event registration (as it only connects to a single element) and the speed difference at event time is negligible (unless you can click a mouse 50,000 times per second!).

Notes:

• With delegated events, you should try to attach them to a single element, that is an ancestor of the target elements and that will not change.
• The fallbacks are usually body or document if nothing else is handy.
• Using body for delegated events can cause a bug to do with styling. This can mean mouse events do not bubble to body (if the computed height of body is 0). document is safer as it is not affected by styling.
• Also document always exists, so you can attached delegated event handlers outside of a DOM-ready handler with no problems.

这篇关于jQuery使用事件处理程序删除元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！