4

有时我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 在“委托”或“委托”上的工作方法是如何代表委托的吗？请给我看一下代码对“委托”的简单描述。非常感谢。

4

5 回答 5

3

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

另外，你可以看看源代码！

吸取的教训：

  • 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然后它开始搜索委托事件 -代码非常简单 - 并将它们推送到handlerQueue，然后是直接附加在元素上的正常处理程序。最后，它只是运行handlerQueue, 从委托的处理程序开始。
于 2012-12-21T06:56:42.957 回答
2

当你这样做时：

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

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

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

于 2012-12-21T06:59:50.260 回答
1

随着 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>

jQuerydelegate()方法代码。

$(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。

<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() 方法添加页面上的事件，并监听新元素并向它们添加事件。:)

于 2012-12-21T06:36:50.623 回答
0

单击一个段落以添加另一个段落。请注意， .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（选择器，事件类型，处理程序（事件对象））

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

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

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

添加的版本：1.4.2

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

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

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

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

添加的版本：1.4.3

委托（选择器，事件）

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

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

于 2012-12-21T06:32:47.237 回答
-3 
<!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>
于 2012-12-21T06:24:49.590 回答