在我的另外一篇文章 解析Javascript事件冒泡机制里的最后，从冒泡机制的角度谈了一点对Javascript 事件托付的理解。如今单独把事件托付 拿出来和大家探讨一下。
什么是托付？
所谓的托付，现实意义上讲是指将自己的事务嘱托他人代为处理。比方说甲托付乙去做某些事儿，那么，甲则是托付人，乙是被托付人。
真正做事情的是乙，即被托付人，而托付人甲 则是把对应的信息传递给被托付人乙。自己本该做的事情交给了乙来做。例如以下图这个样例：
那么在我们javascript 里，什么是事件托付呢？
事件托付
事件托付
同意我们不必为某些特定的节点加入事件监听器，而是将事件监听器加入到（这些节点的）某个 parent节点上。事件监听器分析冒泡事件，去找到匹配的子节点元素，然后做出对应的事件响应。
事件托付详细是怎么工作的呢？ 我们从以下的简单的样例開始。给大家展示事件托付的工作原理。
先看以下一段代码：
<div id="box1" class="box1"> <p id="para1">Paragraph 1</p> <p id="para2">Paragraph 2</p> <p id="para3">Paragraph 3</p> <p id="para4">Paragraph 4</p> <p id="para5">Paragraph 5</p> </div>
我如今想每点击一次div1 下的 p 元素时，弹出 "paraX is clicked." 的提示框，为此。我们一般的做法就是给每个p元素添加 对应的事件监听：
<script type="text/javascript">
window.onload = function() {
//加入事件监听
document.getElementById("para1").addEventListener("click",eventPerformed);
document.getElementById("para2").addEventListener("click",eventPerformed);
document.getElementById("para3").addEventListener("click",eventPerformed);
document.getElementById("para4").addEventListener("click",eventPerformed);
document.getElementById("para5").addEventListener("click",eventPerformed);
}
//事件对应函数
function eventPerformed(event){
alert(event.target.id+" is clicked.");
}
</script>
是的，上述的代码全然能够实现上的功能。
我们思考这个问题，假设这个div1 下有非常多个 p元素，我们总不能每个都写上形如document.getElementById("paraX").addEventListener("click",eventPerformed);的代码片段吧，这种话就太机械了！另外。假设在实际的应用中。非常有可能同过js在 div1下动态生成p 元素。这时候，我们对应地还要加入事件处理函数，像这种动态加入的动作非常有可能分散在我们 应用的非常多个角落，这样动态加入处理函数将是一个非常蛋疼的事儿！
解决方法： 利用 事件冒泡传递的机制。将本来本元素要完毕的事件处理逻辑，托付给 父类节点，父类节点依据触发事件的节点信息，运行相应的事件处理逻辑。
<script type="text/javascript">
window.onload = function() {
//加入事件监听
document.getElementById("box1").addEventListener("click",eventPerformed);
}
//事件对应函数
function eventPerformed(event){
if(event.target.nodeName == ‘P‘)
{
alert(event.target.id+" is clicked.");
}
}
</script>
通过上述的代码。就能够轻松搞定P 元素的事件处理函数绑定了，动态加入元素的时候，不须要再手动地绑定处理函数了。
能够看出，使用事件托付，能够简化了事件的处理逻辑，避免了多余的事件处理函数，进而节约了一定的内存。
可是，事件托付也是有缺点的： 假设如今的dom 元素分为非常多非常多层，对于底层事件的托付，有可能在事件冒泡的过程中。中途被某个节点 终止冒泡了，这样事件就传递不到上层，则托付就会失败了。
jquery 对事件托付的支持
在jQuery里对事件托付的支持，有下面几个函数：
当中。live() 和die()、delegate()和undelegate() 是成对出现的，各自是绑定和解绑的过程。
delegate(selector,[type],[data],fn)
jquery 的delegate 方法是典型的为事件托付准备的。
看一下对应的定义：
delegate(selector,[type],[data],fn)
selector:选择器字符串，用于过滤器触发事件的元素。
type: 附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data: 传递到函数的额外数据
fn: 当事件发生时执行的函数
概述：
指定的元素（属于被选元素的子元素）加入一个或多个事件处理程序，并规定当这些事件发生时执行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比方由脚本创建的新元素）。
比如，我们将上面的样例用jquery实现：
<script type="text/javascript">
$(function() {
//让box1 处理来自 子元素P的click事件托付
$("#box1").delegate("p", "click", function(event) {
alert(event.target.id + " is clicked.");
});
})
</script>
上述的代码实现了对box1 的子元素P 的click事件的托付处理。假设我们在js中动态地给box1 添加子元素P，对应的处理函数也会对其有效。
undelegate([selector,[type],fn])
相应地，假设想取消相应的事件托付，能够使用下面代码：
$("#box1").undelegate("p","click");
delegate的使用方式是对某个元素的子元素进行事件托付处理，即形如：$("parentElement").delegate("siblings","eventType",function); parentElement元素作为一个冒泡事件处理的被托付者。
jQuery还有第二种方式：将元素的事件处理托付给DOM根节点来处理。这样的方式是live()方式：
live(type, [data], fn)
type :
事件类型
data ：附加的额外数据
fn : 对应的处理函数
描写叙述：jQuery 给全部匹配的元素附加一个事件处理函数，即使这个元素是以后再加入进来的也有效。
备注： 自jQuery1.9后 就废除这个函数，仅仅能在jQuery1.9曾经的版本号中使用。
将上述的功能用此方法实现：
<script type="text/javascript">
$(function() {
$("p").live("click",function(event) {
alert(event.target.id + " is clicked.");
});
})
</script>
die(type, [fn])
备注： 自jQuery1.9后 就废除这个函数，仅仅能在jQuery1.9曾经的版本号中使用。
从元素中删除先前用.live()绑定的全部事件.(此方法与live正好全然相反。)假设不带參数。则全部绑定的live事件都会被移除。
与live() 相相应。取消绑定，则用下列代码：
$("p").die();
在事件绑定上，jQuery 提供了一种更通用的函数：
on(events,[selector],[data],fn)
參数：
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。假设选择的< null或省略。当它到达选定的元素。事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时运行的函数。 false 值也能够做一个函数的简写，返回false。
将上述的功能改用on函数实现：
<script type="text/javascript">
$(function() {
$("#box1").on("click","p",function(event) {
alert(event.target.id + " is clicked.");
});
})
</script>
off(events,[selector],[fn])
在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序。
移除上面on 绑定的托付:
$("#box1").off("click","p");
在网上看到了关于 事件托付的总结，感觉挺不错的，就翻译一下贴在这里。跟大家分享一下，如有错误或纰漏，请指出。 点击我查看原文。
总结：
先决条件是要有一个容器，同意通用的事件处理函数。
算法：
- 将事件处理函数绑定到容器上，
在事件处理函数内获取 event.target，- 依据不同的event.target作对应的处理
应用场景：
- 须要为子元素用一个事件处理函数 处理同样的动作；
- 简化不同动作间的结构
长处：
- 简化了初始化的过程。降低了多余的事件处理函数，进而节省了内存。
- 简化了dom节点更新时。对应事件的更新
- Allows to use
innerHTMLwithout additional processing.
缺点：
- 第一，要求事件在IE中必须冒泡. 大多数的事件会冒泡。可是并非全部的。
对于其它的浏览器而言。捕获阶段也会相同适用。 - 第二，理论上托付会导致浏览器额外的载入，由于在容器内的随意一个地方事件的发生，都会执行事件处理函数，所以多数情况下事件处理函数都是在空循环（没有意义的动作）。通常不是什么大不了的事儿。