javascript 事件委托

我想先的告诉你，事件委托是依赖事件冒泡的，因为事件有冒泡，可以做作用到上一级，所以事件可以委托。

Javascript 正常的事件操作

<div id="box1" class="box1">
	<p id="id1">Paragraph 1</p>
	<p id="id2">Paragraph 2</p>
	<p id="id3">Paragraph 3</p>
</div>

<script type="text/javascript">
	window.onload = function() {
		//添加事件监听
		document.getElementById("id1").addEventListener("click",eventPerformed);
        document.getElementById("id2").addEventListener("click",eventPerformed);
        document.getElementById("id3").addEventListener("click",eventPerformed);
	}
       //事件相应函数
	function eventPerformed(event){
		alert(event.target.id+" is clicked.");
	}
</script>
首先肯定这样写没问题，但是  但是  但是
如果这个div1 下有非常多个 p元素，我们每一个都写获取id 然后再addEventListener事件
这样是不是把我们累死了......
这样的话就太机械了！

Javascript 优化后操作

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

  分析方法的原理： 利用 事件冒泡传递的机制，将本来本元素要完成的事件处理逻辑，委托给 父类节点，父类节点根据触发事件的节点信息，执行对应的事件处理逻辑。

Jquery  事件委托

Live 委派 Deleget是代理 On是绑定

<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 处理来自 子元素P的click事件委托
		$("#box1").delegate("p", "click", function(event) {
			alert(event.target.id + " is clicked.");
		});
	})
</script>
上述的代码实现了对box1 的子元素P 的click事件的委托处理。
如果我们在js中动态地给box1 增加子元素P，相应的处理函数也会对其有效。

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

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

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

1. 减少事件注册，节省内存。比如，
   • 在table上代理所有td的click事件。
   • 在ul上代理所有li的click事件。
2. 简化了dom节点更新时，相应事件的更新。比如
   • 不用在新添加的li上绑定click事件。
   • 当删除某个li时，不用移解绑上面的click事件。

缺点

1. 事件委托基于冒泡，对于不冒泡的事件不支持。
2. 层级过多，冒泡过程中，可能会被某层阻止掉。
3. 理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
4. 把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。