e.target与e.currentTarget对比
复制以下代码，即可查看效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css" rel="stylesheet">
#father{
width: 200px;
height: 120px;
padding: 20px;
background-color: #ccc;
}
#son{
width: 100%;
height: 20px;
padding: 30px 0px;
background-color: #000;
color: white;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="father" onmousedown="getEventTrigger(event)">
<p id="son" onmousedown="getEventTrigger(event)">点击查看效果</p>
</div>
</body>
<script type="text/javascript">
var fa = document.getElementById('fa');
var son = document.getElementById('son');
function getEventTrigger(event)
{
x=event.currentTarget;
y=event.target;
alert("currentTarget 指向： " + x.id + "， target指向：" + y.id);
}
</script>
</html>
灰色为父盒子，黑色为子元素
点击子元素，弹出：
事件经过：点击子元素p标签，事件监听对象为p标签，目标元素也是p标签，所以e.target和e.currentTarget都是p标签
由于没有阻止事件冒泡，会在父元素上再次捕捉到事件，这时事件监听对象为父元素，目标是p标签，正如上图所示
由此给出定义
- e.currentTarget指的是注册了监听事件的对象
- e.target指的是触发事件的对象（父元素里的子元素）
======================================= END ========================================
