3

我有一个包含大量子 div 的 div（大约 4k-5k！）。每个孩子都有一个'mousedown'和'mouseup'事件附加到它。

我应该将这些事件一次附加到父级并使用选择子级$(e.target)吗？会不会有任何性能优势，如果有，为什么？

谢谢！

4

3 回答 3

6

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

$("#divWithHugeAmountsOfChildDiv").on("mousedown", 
                                      ".childCLASSEStoMouseDown", 
                                      function()
{
  alert("Booya!");
});

您的 html 可能如下所示：

<body>
  <!-- lots of other elements -->
  <div id="divWithHugeAmountsOfChildDiv">
    <!-- lots of different type of elements -->
    <div class="childCLASSEStoMouseDown">Booya?</div>
    <!-- lots of different type of elements -->
  </div>
  <!-- lots of other elements -->
</body>

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

该方法的 jQuery 文档中很好地解释了原因On。

于 2012-04-04T22:21:29.097 回答
4

jQuery 的使用.on()已经为您做到了。它将事件处理程序绑定到某个父级并检测子事件。它具有优于直接事件绑定之类的性能优势.live()，因为：.bind().click()

  • 不像.live(), 它将事件绑定到document, , .on(), 你负责绑定哪个父级。

  • .live()绑定到document哪个是文档的根。冒泡的事件会走得更远。使用.on()，您可以找到最近的公共父级来绑定该事件。泡沫会减少 - 性能优势

  • 使用.on()，您只需将一个处理程序绑定到父处理程序，.bind()这与直接事件绑定不同，后者在每个元素的基础上绑定事件 - 对很多元素不利。

  • .on()更容易记住。

  • 获取目标时，在内部.on()，“this”始终是目标元素。不用担心跨浏览器甚至目标。jQuery 会为您做到这一点。

所以这段代码中的“this”：

$(element).on('click','someElement',function(){
    //the value of "this" in here is the DOM element target of the event
});
于 2012-04-04T22:27:48.140 回答
2

有了这么多子 div，你绝对应该使用 jQuery 的委托事件处理.on()。这将为您在父级上提供一个事件处理程序，而不是在子级上提供 4000 个事件处理程序。安装和初始化也会快得多。

如果您使用 的委托形式.on()，则不必检查e.target自己，因为 jQuery 会为您完成。

以这种方式使用的语法.on()是这样的：

$('parentSelector').on('mousedown', 'child selector', function(e) {
    // code here
    // "this" will be the object that initiated the event
});

更多信息在jQuery 文档中.on()。

于 2012-04-04T22:24:57.197 回答