Question

有时候我使用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在委托'委托'或'在'上的工作方法吗？请告诉我代码'委托'的简单说明..非常感谢。

Answer 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，从委派的处理程序开始。

Answer 2

随着jQuery 1.4.2的推出，引入了一种名为delegate()的新方法。此方法将处理程序附加到选定/指定元素的一个或多个事件。我们来举个例子吧。我创建了一个表并使用委托方法，我将click事件处理程序附加到每个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（）方法添加页面上的事件，并且还侦听新元素并向其添加事件。：）

Answer 3

当你这样做时：

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

jQuery将处理程序绑定到与selector1匹配的DOM元素上的事件。当此处理程序运行时，它将DOM层次结构从最特定的元素移动到匹配selector1的元素，并检查是否有任何元素与selector2匹配。如果找到匹配项，则使用适当的执行上下文调用function。

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

Answer 4

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

            <!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））

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

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

handler（eventObject） - 触发事件时执行的函数。

添加版本：1.4.2

委托（selector，eventType，eventData，handler（eventObject））

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

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

handler（eventObject） - 触发事件时执行的函数。

添加版本：1.4.3

委托（选择器，事件）

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

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

Answer 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>

我想知道jquery'委托或on（代表）是如何工作的

5 个答案: