javascript事件代理（事件委托）

发表于 | 分类于

工作三年了，最近一年半一直处于混吃等死的状态，感觉整个人就要废掉了，专业的很多知识都快忘完了，这两天突然意识到不能再这个样子了，必须为新生活好好奋斗了！日后会不定期经常更新博客，一方面监督自己把专业再一点一点捡起来，另一方面巩固知识。fighting!

今天主要写一下javascript中的事件代理。

事件代理，即事件委托，主要是为了解决 事件处理程序过多而占用内存，影响性能的问题

事件代理利用事件冒泡，通过指定一个事件处理程序去管理某一类型的所有的事件，减少DOM操作。
以以下代码为例：

1
2
3
4
5
<ul id="list">
	<li id="li1">弹出1</li>
	<li id="li2">跳转到百度</li>
	<li id="li3">刷新一下</li>
</ul>

按照传统做法，我们一般会给三个li分别绑定click事件从而实现想要的功能，如：

1
2
3
4
5
6
7
8
9
10
11
12
var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
var li3 = document.getElementById("li3");
li1.onclick = function(){
	alert(1);
}
li2.onclick = function(){
	window.location.href = "http://www.baidu.com";
}
li3.onclick = function(){
	window.location.reload();
}

如果使用事件代理的话，就可以把click事件绑定到ul上面，只绑定一次就可以了，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var list = document.getElementById("list");
list.onclick = function(event){
	var target = event.target || event.srcElement;   //ie浏览器读取目标事件的方法是：event.srcElement
	switch(target.id){
		case "li1":
			alert(1);
			break;
		
		case "li2":
			window.location.href="http://www.baidu.com";
			break;
		case "li3":
			window.location.reload();
			break;
	}
}

以上。