有时我使用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的工作方法委托？请很多展示我要“代表”的代码只是说明..谢谢。
有一个看看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 ，开始与委托处理程序。
使用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（）方法将活动添加到元件，其是在页面上，当它被调用。 例如，有4只在页面上TD时绑定（）被调用。 后来，当你动态地在表中添加更多的TD然后绑定（）将不会附着单击事件处理程序的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。 委托（）方法添加事件，这是在页面上，还监听新的元素，并添加事件给他们。 :)
当你这样做：
$(selector1).on(event, selector2, function);
jQuery的结合的处理程序，以在符合的DOM元素事件selector1 。 当这个处理程序运行时，它遍历从最具体元素的DOM层次到元件匹配selector1 ，并检查是否有任何元素匹配selector2 。 如果找到匹配，它调用function与适当的执行上下文。
这是怎样on()能够处理的动态添加创建代表团后的DOM元素的事件。
点击一个段落添加另一个。 需要注意的是.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（选择器，事件类型，处理程序（eventObject）传递）
selector-选择器，以过滤触发事件中的元素。
eventType-含有一个或多个空格分隔的JavaScript事件类型，如“点击”或“的keydown”，或自定义事件名称的字符串。
处理器（eventObject）传递 - 一个函数在事件触发时执行。
对于版新增：1.4.2
委托（选择器，事件类型，EVENTDATA，处理程序（eventObject）传递）
selector-选择器，以过滤触发事件中的元素。
eventType-含有一个或多个空格分隔的JavaScript事件类型，如“点击”或“的keydown”，或自定义事件名称的字符串。 EVENTDATA数据的地图将被传递给事件处理程序。
处理器（eventObject）传递 - 一个函数在事件触发时执行。
对于版新增：1.4.3
委托（选择器，事件）
selector-选择器，以过滤触发事件中的元素。
事件 - 一个或多个事件的类型和函数的映射来执行它们。
<!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>
