jQuery.on（）如何工作？ [英] How does jQuery.on() work?

问题描述

我还没有看到这个函数的来源，但我想知道，它的工作原理如下：

I have not seen the source of this function, but I wonder, does it work like this:

1. 选择元素by selecotrs


2. 将提供的事件处理程序委托给他们


3. 运行 setInterval on那个选择器并且经常取消委托，然后重新委派相同的事件

1. Selects element(s) by their selecotrs
2. Delegates the provided event-handlers to them
3. Runs a setInterval on that selector and constantly un-delegating, and then re-delegating that same event all over

或者有一个纯JavaScript DOM解释对此？

Or there is a pure-JavaScript DOM explanation to this?

推荐答案

我假设您的问题是关于事件委派版本 .on 。

I assume your question is about the Event Delegation version of .on.

在JavaScript中，大多数事件在DOM层次结构中冒泡。这意味着，当一个可以为一个元素触发的事件触发时，它将冒泡到DOM，直到 document level。

In JavaScript, most events bubble up in the DOM hierarchy. That means, when an event that can bubble fires for an element, it will bubble up to the DOM until document level.

考虑这个基本标记：

<div>
   <span>1</span>
   <span>2</span>
</div>

现在我们申请活动授权：

Now we apply event delegation:

$('div').on('click', 'span', fn);

事件处理程序仅附加到<​​code> div 元素。由于 span 位于 div 内，所以跨度中的任何点击都会冒泡到 div ，触发 div 的点击处理程序。在那一刻，剩下的就是检查 event.target （或目标与 delegateTarget ）与委托目标选择器匹配。

The event handler is attached solely to the div element. As the span are inside of the div, any click in the spans will bubble up to the div, firing the div's click handler. At that moment, all that is left is checking whether the event.target (or any of the elements between the target and the delegateTarget) matches the delegation target selector.

让我们做一个更复杂：

<div id="parent">
    <span>1</span>
    <span>2 <b>another nested element inside span</b></span>
    <p>paragraph won't fire delegated handler</p>
</div>

基本逻辑如下：

//attach handler to an ancestor
document.getElementById('parent').addEventListener('click', function(e) {
    //filter out the event target
    if (e.target.tagName.toLowerCase() === 'span') {
        console.log('span inside parent clicked');
    }
});

虽然 event.target 嵌套在您的过滤器中。我们需要一些迭代逻辑：

Though the above will not match when event.target is nested inside your filter. We need some iteration logic:

document.getElementById('parent').addEventListener('click', function(e) {
    var failsFilter = true,
        el = e.target;
    while (el !== this && (failsFilter = el.tagName.toLowerCase() !== 'span') && (el = el.parentNode));
    if (!failsFilter) {
        console.log('span inside parent clicked');
    }
});

小提琴

编辑：更新代码以仅将后代元素匹配为jQuery的 .on 确实。

edit: Updated code to match only descendant elements as jQuery's .on does.

注意：这些片段仅供参考，不能在现实世界中使用。当然，除非你不打算支持旧的IE。对于旧的IE，您需要针对 addEventListener / attachEvent 以及事件进行测试。目标|| event.srcElement ，可能还有一些其他的怪癖，例如检查事件对象是传递给处理函数还是在全局范围内可用。值得庆幸的是，jQuery为我们无缝地完成了所有这些工作。 =]

Note: These snippets are for explanatory purposes, not be used in real world. Unless you don't plan to support old IE, of course. For old IE you would need to feature test against addEventListener/attachEvent as well as event.target || event.srcElement, and possibly some other quirks such as checking whether the event object is passed to handler function or available in the global scope. Thankfully jQuery does all that seamlessly behind the scenes for us. =]

这篇关于jQuery.on（）如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！