jq父级绑定事件的意义_jQuery事件表现：绑定每个孩子上的父事件或个别事件的单个事件？(jQuery event performance: Bind a single event on paren...

jQuery事件表现：绑定每个孩子上的父事件或个别事件的单个事件？(jQuery event performance: Bind a single event on parent or individual events on each child?)

我有一个有大量子div的div(大约4k-5k！)。 每个孩子都有一个'mousedown'和'mouseup'事件。

我是否应该将这些事件一次附加给父母并使用$(e.target)选择孩子？ 会有什么性能优势，如果是的话，为什么？

谢谢！

I've got a div with a huge amount of child divs (around 4k-5k!). Each child has a 'mousedown' and 'mouseup' event attached to it.

Should I instead attach these events once to the parent and select the child using $(e.target)? Would there be any performance advantage, and if so why?

Thanks!

原文：https://stackoverflow.com/questions/10020061

更新时间：2020-01-23 06:06

最满意答案

我会想象使用jquery.on()将是理想的。

$("#divWithHugeAmountsOfChildDiv").on("mousedown",

".childCLASSEStoMouseDown",

function()

{

alert("Booya!");

});

你的html可能看起来像这样：

根据需要更改jQuery选择器...

为什么在On方法的jQuery文档中很好地解释了这个问题。

I would imagine that using jquery.on() would be ideal.

$("#divWithHugeAmountsOfChildDiv").on("mousedown",

".childCLASSEStoMouseDown",

function()

{

alert("Booya!");

});

Where your html might look like:

Changing the jQuery selectors as needed...

The why is very well explained in the jQuery documentation for the On method.

2012-04-04

相关问答

您需要使用event.stopPropagation 码 $('.download').on('click', function(event){

event.stopPropagation();

// the click code..

});

You need to use event.stopPropagation Code $('.download').on('click', function(event){

event.stopPropagation();

// t

...

做这个： $(document).ready(function(){

$(".header").click(function(){

$(this).children(".children").toggle();

});

$(".header a").click(function(e) {

e.stopPropagation();

});

});

如果你想更多地阅读.stopPropagation()，看看这里 。 Do this: $(

...

否 - 您不应该将所有委派的事件处理程序绑定到document对象。 这可能是您可以创建的最糟糕的演示场景。 首先，事件委托并不总是使您的代码更快。 在某些情况下，这是有利的，在某些情况下不是。 当您实际需要事件委托以及受益时，应使用事件委托。 否则，您应该将事件处理程序直接绑定到事件发生的对象，因为这通常会更有效率。 第二次，您不应该在文档级别绑定所有委派的事件。 这就是为什么.live()被弃用，因为当你有很多这样的事件绑定时，这是非常低效的。 对于委托的事件处理，将它们绑定到最接近的不是动态

...

当场地失去焦点(对于大多数输入)时， change只会发生。 如果您想要更实时一些，请使用HTML 5 oninput事件。 这几乎可以捕获输入元素的任何类型的值更改(并且它也会起泡！)。 不过，它在Internet Explorer 8及更低版本中不受支持，但我为这些浏览器编写了映射到onpropertychange 的插件 。 也可以看看： 在JavaScript中有效检测用户输入 对于事物的表现方面，你描述的每个事件都会在不同的时间点燃，所以除非性能不成问题。 change will onl

...

不要使用.remove()使用.detach() button.detach();

演示： 小提琴 。分离() .detach()方法与.remove()相同，除了.detach()保留与删除的元素关联的所有jQuery数据。 当删除的元素稍后要重新插入DOM时，此方法很有用。 。去掉() 与.empty()类似，.remove()方法从DOM中获取元素。 如果要删除元素本身以及其中的所有内容，请使用.remove()。 除了元素本身之外，还删除了与元素关联的所有绑定事件和jQuery数据。 要

...

我会想象使用jquery.on()将是理想的。 $("#divWithHugeAmountsOfChildDiv").on("mousedown",

".childCLASSEStoMouseDown",

function()

{

alert("Booya!");

});

你的html可能看起来像这样：