target与currentTarget区别 ( html是弹窗居中的例子)

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{height:2000px;}
div#outer{
background:rgba(0,0,0,0.8);
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
div#inner{position: absolute;left: 50%;top: 50%;margin: -200px 0 0 -200px; width: 400px; height: 400px;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">inner</div>
</div>
<script type="text/javascript">
var oOuter= document.getElementById("outer");
oDiv.onclick = function(ev){
debugger;//ev.target==div#inner--------ev.currentTarget==div#outer
}
</script>
</body>
</html>

target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。

上一篇:学习中的错误——ubuntu 14.04 LTS 启动eclipse报错


下一篇:babel 无法解析jsx (webpack react )