event对象中的target，currentTarget的区别，以及应用_事件委托

一、 event对象中的target，currentTarget的区别

在使用event对象时，event对象有两个属性target和currentTarget，这两属性都代表事件源，由于事件冒泡和捕获（如果想知道事件冒泡和事件捕获请点击）的原因，会出现直接的事件源（发生事件的DOM元素）和当前事件源（经过冒泡或者捕获后，触发的父级对应事件的事件源）。

1）、target：而直接的事件源（真正的事件源）是target。

2）、currentTarget：经过冒泡或者捕获触发的父级的DOM元素是currentTarget。冒泡到哪个父元素，那么currentTarget就是哪个父元素。

3）、this：在事件处理函数中，this就是currentTarget。

以下代码经过运行，在谷歌浏览器中的控制台就可以打印的内容，根据打印的内容就知道target和currentTarget分别是谁了？

看看如下示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#grandpaDiv{
				width:400px;
				height:400px;
				background-color:red;
			}	
			#fatherDiv{
				width:300px;
				height:300px;
				background-color:yellow;
			}	
			#meDiv{
				width:200px;
				height:200px;
				background-color:pink;
			}	
		</style>
	</head>
	<body>
		<div id="grandpaDiv">
			<div id="fatherDiv">
				<div id="meDiv">
				</div>
			</div>
		</div>
		
	</body>
</html>
<script type="text/javascript">

function $(id){
	return document.getElementById(id);
}

//target:真正的事件源，不会因为冒泡或者捕获而改变
//currentTarget:当前事件源，冒泡冒到（捕获捕到）哪个元素，就是哪个元素

window.onload = function(){


	$("grandpaDiv").addEventListener("click",function(event){
		var evt = event || window.event;
		console.log("爷爷被点了");
		console.log("currentTarget:",evt.currentTarget);
		console.log("target:",evt.target);
		
	},false);
	
	$("fatherDiv").addEventListener("click",function(event){
		var evt = event || window.event;
		console.log("爸爸被点了");
		console.log("currentTarget:",evt.currentTarget);
		console.log("target:",evt.target);
	},false);
	
	$("meDiv").addEventListener("click",function(event){
		var evt = event || window.event;
		console.log("我被点了");
		console.log("currentTarget:",evt.currentTarget);
		console.log("target:",evt.target);
	},false);

}
</script>

二、应用_事件委托

事件委托：把本该属于某个DOM对象的事件，委托给它的父（级）元素。这样做的好处是：对于动态添加的元素，事件依然会有效。

如：在<ul>标签下有若干个<li>标签，如果希望给每个<li>标签增加一个onclick事件，而且希望，动态添加<li>元素后，新添加的<li>标签依然有onclick事件，就可以使用事件委托。

事件委托中需要使用到event对象的target属性。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	ul{
		list-style:none;
		position:absolute;
		left:100px;
		top:100px;
		width:200px;
		border:1px solid black;
	}
	
</style>
</head>
<body>
	<ul id="menuBox">
		<li>收藏本网站</li>
		<li>qq聊天</li>
		<li>微信聊天</li>
		<li>网页聊天</li>
	</ul>
	<input id="btnAdd" type="button" value="添加一个li" />
</body>
</html>
<script type="text/javascript" src="js/eventTools.js"></script>
<script type="text/javascript">
function $(id){
	return document.getElementById(id);
}

//事件委托：
//把本该属于某个DOM对象的事件，委托给它的父（级）元素。

window.onload = function(){
	//使用事件委托，把本该属于li的onclick事件，委托它的父元素ul
	//使用事件冒泡的特性，点击子元素，就会触发父元素的点击事件。
	$("menuBox").onclick = function(event){
		var evt = event || window.event;
		if(evt.target.tagName.toLowerCase()=="li"){//只针对li元素进行处理
			alert(evt.target.innerHTML);
		}
	}
	
	//以下为动态添加li标签
	var ord = 4;
	$("btnAdd").onclick = function(){
		ord++;
		var liObj = document.createElement("li");
		liObj.innerHTML = "第"+ord+"个li";
		$("menuBox").appendChild(liObj);
	}	
}

</script>