Javascript 我想知道jquery'；代表或在（代表）工作_Javascript_Jquery_Delegates

Javascript 我想知道jquery'；代表或在（代表）工作

javascript jquery

Javascript 我想知道jquery'；代表或在（代表）工作,javascript,jquery,delegates,Javascript,Jquery,Delegates,有时我会在上使用来委派事件 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.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在“委派”或“委派”上的工作方法吗？请给我简单介绍一下“委派”的代码……非常感谢。

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

$（文档）.ready（函数（）{
$（“div”）.delegate（“p”，“click”，function（）{
$（“p”）.css（“背景色”、“粉色”）；
});
});
这是div元素中的一个段落
这是一段
单击一个段落以添加另一个段落。请注意，.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>


p{背景：黄色；字体大小：粗体；光标：指针；
填充：5px；}
p、 超过{背景：#ccc；}
span{颜色：红色；}
点击我
$（“body”）.delegate（“p”，“click”，function（）{
$（此）。在（“另一段！”）之后；
});

另一个例子
              <!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>


p{颜色：红色；}
span{颜色：蓝色；}
具有附加的自定义事件
触发自定义事件
$（“body”）.delegate（“p”，“myCustomEvent”，函数（e，myName，myValue）{
$（this.text（“你好！”）；
$（“span”）.stop（）.css（“不透明度”，1）
.text（“myName=“+myName”）
.fadeIn（30）淡出（1000）；
});
$（“按钮”）。单击（函数（）{
$（“p”）。触发器（“myCustomEvent”）；
});

工作方法
对于添加的版本：1.4.2
.delegate（选择器、事件类型、处理程序（事件对象））
选择器-用于筛选触发事件的元素的选择器
eventType—一个字符串，包含一个或多个空格分隔的JavaScript事件类型，如“单击”或“按键”或自定义事件名称
handler（eventObject）—在触发事件时执行的函数
对于添加的版本：1.4.2
委托（选择器、eventType、eventData、处理程序（eventObject））
选择器-用于筛选触发事件的元素的选择器
eventType—一个字符串，包含一个或多个空格分隔的JavaScript事件类型，如“单击”或“按键”或自定义事件名称。
eventData将传递给事件处理程序的数据映射
handler（eventObject）—在触发事件时执行的函数
对于添加的版本：1.4.3
委托（选择器、事件）
选择器-用于筛选触发事件的元素的选择器
事件—一个或多个事件类型和要为其执行的函数的映射。
在jQuery 1.4.2启动时，引入了一个名为delegate（）
的新方法。此方法将处理程序附加到选定/指定元素的一个或多个事件。让我们举个例子。我已经创建了一个表，并使用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>

它需要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>");
});


$（“#btnAdd”）。单击（函数（）{
$（“表格”）。附加（“第5项第6项”）；
});

现在，当您运行此页面时，将找不到新添加td的单击事件
但是使用delegate（）
，您会发现新添加的td的click事件。delegate（）方法添加页面上的事件，并侦听新元素并向其添加事件。：）
 看一下，他们很好地解释了这个概念
另外，你也可以看一看
经验教训：

只是

上具有不同参数顺序的

的包装器
只执行一些参数规范化和处理one
，但随后将委托给jQuery.event.add（这个、类型、fn、数据、选择器）

执行大量验证，处理多种类型和特殊情况，将参数推送到$.data（“事件”）
上，并调用elem.addEventListener（type，jQuery.event.dispatch，false）
然后再次从$.data（“事件”）
查询句柄，并从本机事件生成一个。然后，它开始搜索委托事件（非常简单），并将它们推送到handlerQueue
，然后直接连接到元素上的普通处理程序。最后，它只是从委托处理程序开始
当您这样做时：
$(selector1).on(event, selector2, function);

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

这就是on（）如何处理添加到dyn中的DOM元素上的事件
$(selector1).on(event, selector2, function);