jQuery.on（）如何起作用？ [英] How does jQuery.on() function?

问题描述

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

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

1. 通过其选择器选择元素


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


3. 在该选择器上运行 setInterval 并不断取消委派，然后重新委派同一事件

1. Selects element(s) by their selectors
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 级别。

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 元素。由于跨度在 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进行功能测试。目标|| 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屋！