target指的是你当前触发(点击的对象),currentTarget指的是绑定该事件的对象,
也就是说,如果你把一个点击事件绑定在父元素上,然后你再点击子元素,这时的target是子元素,currentTarget是父元素。如果你
这时点击的是父元素,那么target和currentTarget都是父元素。
例如:在button上绑定一个事件,当点击button时,弹出框显示这次事件的target和currentTarget的id
<html>
<head>
<title>target和currentTarget</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="demo">
<button id="mybtn">click</button>
</div>
<script type="text/javascript">
$("#mybtn").bind("click", function(ev){
var target = $(ev.target);
var currentTarget = $(ev.currentTarget);
alert("target = " + target.attr("id") + ", currentTarget = " + currentTarget.attr("id"));
});
</script>
</body>
</html>
结果如下:
由于此时该点击事件是绑定在button上的,此时点击的又是button,所以这时的target和currentTarget都是button。
又例如:这次把事件绑定到父元素上,然后点击button,
<html>
<head>
<title>target和currentTarget</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="demo">
<button id="mybtn">click</button>
</div>
<script type="text/javascript">
$("#demo").bind("click", function(ev){
var target = $(ev.target);
var currentTarget = $(ev.currentTarget);
alert("target = " + target.attr("id") + ", currentTarget = " + currentTarget.attr("id"));
});
</script>
</body>
</html>
结果是:
这时点击事件是绑定在div上,而我们点击的是button,所以target是button,而currentTarget是div