我想知道 jquery 的委托或 on(for delegate) 是如何工作的答案

【问题标题】：i want to know how jquery' delegate or on(for delegate) works我想知道 jquery 的委托或 on(for delegate) 是如何工作的
【发布时间】：2012-12-21 06:21:54
【问题描述】：

有时我使用on 来委托事件，

dom.addEventListener("click",function(e){
  e.target for hander.
}
instead:
dom.on("click",'a'，function(){
  $(this).handler..
}

所以，我想我可以这样写代码：

function delegate(dom,event,selector,handler){
   target = event.target;
   while selector.dom.not_match event.target
       target = target.parentNode
       recheck until match the selector and do handler;
   end
}

我以前写过这个：

function delegate(dom,event,selector,handler){
    dom.addEvent event function(){
      target_arr = dom.find(selector);
      if(event.target in_array target_arr){
        do handler
      }else{
         target = target.parentNode until dom.
         recheck in target_arr;
      }
    }

}

有人知道 jquery 在 'delegate' 或 'on' 上为 delegate 的工作方法吗？请给我看一下'delegate' 的代码简单描述......非常感谢。

【问题讨论】：

你可以从jqeury获取开发代码，并从那里的代码学习。

标签： javascript jquery delegates

【解决方案1】：

看看jQuery docs for on()，他们很好地解释了这个概念。

另外，你可以看看source code！

经验教训：

delegate 只是 on 的包装器，具有不同的参数顺序
on 只进行一些参数规范化并处理 one，但随后委托给 jQuery.event.add( this, types, fn, data, selector );
event.add 确实做了很多验证，处理多种类型和特殊情况，将参数推送到 $.data("events") 并调用 elem.addEventListener(type, jQuery.event.dispatch, false)
event.dispatch 然后再次从$.data("events") 查询句柄并从本机事件构建jqEvent。然后它开始搜索委托事件 - the code for that 非常简单 - 并将它们推送到 handlerQueue，之后直接附加在元素上的普通处理程序。最后，它只是runs the handlerQueue，从委托处理程序开始。

【讨论】：

明白这一点，我不明白为什么 jquery.event.add 会那样做，那么为什么 jquery 会这样做？我想像中这么复杂..
还在写解释……你可以跳过大部分。如果您有兴趣查找委托事件元素，请查看line 350 to 380
非常感谢，我发现，jquery 也使用匹配 dom 和传播查找..maby 我认为与 jq 在同一行，使用 parentNode 来检查当前 dom 是给定选择器中的委托.

【解决方案2】：

当你这样做时：

$(selector1).on(event, selector2, function);

jQuery 将处理程序绑定到与selector1 匹配的 DOM 元素上的事件。当这个处理程序运行时，它会遍历 DOM 层次结构，从最具体的元素一直到匹配 selector1 的元素，并检查是否有任何元素匹配 selector2。如果找到匹配项，它会使用适当的执行上下文调用 function。

这就是on() 能够处理在创建委托后动态添加的 DOM 元素上的事件的方式。

【讨论】：

【解决方案3】：

随着 jQuery 1.4.2 的发布，引入了一个名为 delegate() 的新方法。此方法将处理程序附加到选定/指定元素的一个或多个事件。让我们举个例子。我已经创建了一个表并使用委托方法，我会将点击事件处理程序附加到每个 td 元素。

<table border="1" width="200px" cellspacing="5" cellpadding="5">
   <tr>
       <td>Item 1</td>
       <td>Item 2</td>
   </tr>
   <tr>
       <td>Item 3</td>
       <td>Item 4</td>
   </tr>
</table>

jQuery delegate() 方法代码。

$(document).ready(function(){
  $("table").delegate("td","click",function(){
         alert('I am' + $(this).text());
  });
});

它需要 3 个参数。

选择器
事件类型
事件处理程序

你会说这很可能使用bind() 方法。下面的代码将达到目的。

$(document).ready(function(){         
  $("table td").bind("click",function(){
      alert('I am' + $(this).text());
  });
});

那么delegate() 方法有什么新变化？

bind() 方法将在调用时将事件添加到页面上的元素。例如，调用 bind() 时页面上只有 4 个 td。稍后，当您动态在表中添加更多 td 时，bind() 不会将 click 事件处理程序附加到这些 td。让我们扩展我们的演示并在页面上放置一个按钮，它将动态添加 td。

<input type="button" value="Add TD" id="btnAdd" />

$("#btnAdd").click(function(){
   $("table").append("<tr><td>Item 5</td><td>Item 6</td></tr>");
});

现在，当您运行此页面时，您将找不到新添加的 td 的点击事件。

但是使用delegate()，您会发现新添加的td 的点击事件。 delegate() 方法添加页面上的事件，并监听新元素并向它们添加事件。 :)

【讨论】：

【解决方案4】：

单击一个段落以添加另一个段落。请注意，.delegate() 将单击事件处理程序附加到所有段落 - 甚至是新段落。

            <!DOCTYPE html>
            <html>
            <head>
              <style>
              p { background:yellow; font-weight:bold; cursor:pointer; 
                  padding:5px; }
              p.over { background: #ccc; }
              span { color:red; }
              </style>
              <script src="http://code.jquery.com/jquery-latest.js"></script>
            </head>
            <body>
              <p>Click me!</p>

              <span></span>
            <script>
                $("body").delegate("p", "click", function(){
                  $(this).after("<p>Another paragraph!</p>");
                });
            </script>

            </body>
            </html>

另一个例子

              <!DOCTYPE html>
            <html>
            <head>
              <style>
              p { color:red; }
              span { color:blue; }
              </style>
              <script src="http://code.jquery.com/jquery-latest.js"></script>
            </head>
            <body>
              <p>Has an attached custom event.</p>
              <button>Trigger custom event</button>
              <span style="display:none;"></span>
            <script>

                $("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
                  $(this).text("Hi there!");
                  $("span").stop().css("opacity", 1)
                           .text("myName = " + myName)
                           .fadeIn(30).fadeOut(1000);
                });
                $("button").click(function () {
                  $("p").trigger("myCustomEvent");
                });

            </script>

            </body>
            </html>

方法的工作添加的版本：1.4.2

.delegate(selector, eventType, handler(eventObject))

选择器- 一个选择器，用于过滤触发事件的元素。

eventType- 包含一个或多个以空格分隔的 JavaScript 事件类型的字符串，例如“click”或“keydown”或自定义事件名称。

handler(eventObject)- 在事件触发时执行的函数。

添加的版本：1.4.2

委托（选择器，事件类型，事件数据，处理程序（事件对象））

选择器- 一个选择器，用于过滤触发事件的元素。

eventType- 包含一个或多个以空格分隔的 JavaScript 事件类型的字符串，例如“click”或“keydown”或自定义事件名称。 eventData 将传递给事件处理程序的数据映射。

handler(eventObject)- 在事件触发时执行的函数。

添加的版本：1.4.3

委托（选择器，事件）

选择器- 一个选择器，用于过滤触发事件的元素。

events- 一个或多个事件类型的映射和为其执行的函数。

【讨论】：

这只是 jQuery 文档的副本。
igaves 你必须通过 jquery.com 它会解决你的问题

【解决方案5】：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
  });
});
</script>
</head>
<body>

<div style="background-color:yellow">
<p>This is a paragraph inside a div element.</p>
</div>
<p>This is a paragraph.</p>

</body>
</html>

【讨论】：