jquery - jQuery 的这两部分有何不同以及直接事件模型和委托(delegate)事件模型

Question

所以，这可能是一个非常简单的问题，但我还是会问。这显然只是为了在我的脑海中澄清这两个语句是如何工作的。

场景我通过 Ajax 调用拉取一些 JSON，然后将其插入到具有一些选择器的 html 中。像这样:

$.each(r, function(k,v){
  str+='location: <div class=\'loc-to-select\' data-location-id=\'' + v.id +  '\'>';
  str+= v.name + '</div>';
});
$('#event-search-locations').html(str);

基本上写出:

<div class='loc-to-select' data-location-id='2'>Joe's</div>

我有这两段 jQuery:

// doesn't work
$('.loc-to-select').on('click',function(){
  alert('here you go');
});

// does work
$(document).on('click','.loc-to-select', function(){
  alert('here you go');
});

所有这一切显然都发生在 jQuery 的 $(document).ready 完成触发之后。据我了解，这是 jQuery 提供的主要功能。我熟悉事件冒泡的概念。我还在这里阅读了文档 http://api.jquery.com/on/其中讨论委托(delegate)事件。我内部不理解 jQuery 如何通过后代元素做到这一点。其中一些讨论了它如何从用户空间 pov 进行处理:Direct vs. Delegated - jQuery .on()

此外，出于性能原因，似乎首选后代元素技术。后代元素模型基本上是说，如果我们将新内容添加到 DOM，请检查它是否符合“委托(delegate)元素”模型，而直接事件会绕过这个模型？

在更简单的层面上，jQuery“运行时”本质上是监视 DOM 的更改，然后检查还是提前检查 html 函数(本质上是通过 html 解析它所知道的项目)？

最后，为什么他们不将第二种语法(委托(delegate)语法)设为默认语法？它似乎提供了更大的特异性和更好的性能(如文档中提到的)

谢谢

Answer 1

我不能 100% 确定您想知道什么，因为您链接到的问题 (Direct vs. Delegated - jQuery .on()) 似乎包含您所问问题的答案。

这里再次解释差异:

$('.loc-to-select').on('click',function(){
  alert('here you go');
});

将搜索当时存在的所有 .loc-to-select 元素，并将事件处理程序绑定(bind)到每个元素。

使用 DOM API 的等效内容是:

var elements = document.getElementsByClassName('loc-to-select');
for(var i = 0, l = elements.length; i < l; i++) {
    elements[i].onclick = handler;
}

现在考虑

$(document).on('click','.loc-to-select', function(){
  alert('here you go');
});

仅将一个事件处理程序绑定(bind)到 document 。它会检查每个点击事件，并测试它是否源自或位于类为 loc-to-select 的元素内。

同样，DOM 等效项(简化):

document.body.onclick = function(event) {
    if(event.target.className === 'loc-to-select') {
         handler.call(this);
    }
}

<小时/>

jQuery 不会监视 DOM 的更改，它只是利用事件在树中冒泡的事实。

Finally, why don't they just make the second syntax (the delegated syntax) the default? It would seem to provide greater specificity and better performance (as mentioned in the docs)

让我们再次回顾一下事件委托(delegate)中发生的情况:单个事件处理程序绑定(bind)到一个元素以处理多个(相似)元素。这意味着您只需搜索并触摸 x 元素即可处理 y 元素，其中 x << y ，即设置速度更快。

但它需要权衡:由于事件首先遍历树并且必须评估原点，无论它是否匹配，因此在事件发生时处理事件需要更多时间。
想一想，如果您对页面上的所有点击事件使用事件委托(delegate)，并将处理程序绑定(bind)到 document ，会发生什么情况。您最终会得到绑定(bind)到 n 的 document 事件处理程序，并且每个事件处理程序都将通过一次点击执行。但在这些 n 中，只有一个需要执行。这似乎性能不太好。

使用直接事件处理，设置速度会更慢，因为您必须找到所有元素并将事件处理程序绑定(bind)到每个元素。如果元素不多，那不是问题，但如果元素很多，那就有问题了。显然，绑定(bind)的事件处理程序越多，浏览器的性能就越差，但这可能会改变或已经改变了。

这是将许多事件处理程序绑定(bind)到许多执行较少次数的元素与将少数事件处理程序绑定(bind)到少数执行多次的元素之间的权衡。