我想知道jquery’委托或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

看看on()的jQuery文档 ，他们很好地解释了这个概念。

另外，您可以查看源代码 ！

经验教训：

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

Answer 2

随着jQuery 1.4.2的推出，引入了一种名为delegate()的新方法。 此方法将处理程序附加到选定/指定元素的一个或多个事件。 我们来举个例子吧。 我创建了一个表并使用委托方法，我将click事件处理程序附加到每个td元素。

 
 
 
Item 1
 
Item 2
 
 
 
Item 3
 
Item 4
 
  

jQuery delegate()方法代码。

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

这需要3个参数。

1. 选择
2. 事件类型
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。

  $("#btnAdd").click(function(){ $("table").append("Item 5Item 6"); }); 

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

但是使用delegate() ，您会发现新添加的td的click事件。 delegate（）方法添加页面上的事件，并且还侦听新元素并向其添加事件。 🙂

Answer 3

当你这样做时：

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

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

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

Answer 4

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

         
Click me!
     

另一个例子

         
Has an attached custom event.
 Trigger custom event     

添加版本的方法的工作：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

        
 
This is a paragraph inside a div element.
 
 
This is a paragraph.