JavaScript 事件托付 以及jQuery对事件托付的支持

      在我的另外一篇文章 解析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>

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

    能够看出，使用事件托付，能够简化了事件的处理逻辑，避免了多余的事件处理函数，进而节约了一定的内存。

    可是，事件托付也是有缺点的： 假设如今的dom 元素分为非常多非常多层，对于底层事件的托付，有可能在事件冒泡的过程中。中途被某个节点 终止冒泡了，这样事件就传递不到上层，则托付就会失败了。

jquery 对事件托付的支持

在jQuery里对事件托付的支持，有下面几个函数：

当中。live() 和die()、delegate()和undelegate() 是成对出现的，各自是绑定和解绑的过程。

delegate(selector,[type],[data],fn)

jquery 的delegate 方法是典型的为事件托付准备的。

看一下对应的定义：

          delegate(selector,[type],[data],fn)

     selector:选择器字符串，用于过滤器触发事件的元素。

     type:     附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

     data:   传递到函数的额外数据

     fn:       当事件发生时执行的函数

比如，我们将上面的样例用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");

<script type="text/javascript">
	$(function() {
		$("p").live("click",function(event) {
			alert(event.target.id + " is clicked.");
		});
	})
</script>

$("p").die();

<script type="text/javascript">
	$(function() {
		$("#box1").on("click","p",function(event) {
			alert(event.target.id + " is clicked.");
		});
	})
</script>

$("#box1").off("click","p");