-
event.target返回触发事件的元素
-
event.currentTarget返回绑定事件的元素,即DOM对象
想要更具体了解这两个属性的朋友可以打开这个链接查看 https://www.cnblogs.com/yewenxiang/p/6171411.html
在下面的例子中,我们来看这个问题:
<body>
<div id="ips" style="border:1px solid red">
<p>点我</p>
<p>点我</p>
<p>点我</p>
<p>点我</p>
</div>
<div id="clicks" style="border:1px solid black;margin-top: 50px;">
点我触发上面div的点击事件
</div>
</body>
<script src="http://www.jq22.com/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript">
$("#ips").click(function(event) {
var tar = event.target.nodeName.toLowerCase();
var tagName = event.currentTarget.nodeName.toLowerCase();
console.log("你点击了:" + tar);
console.log("点击事件的DOM对象:" + tagName);
//如果是点击#ips这个div 打印出来的结果为:
//你点击了:p
//点击事件的DOM对象:div
//和
//你点击了:div
//点击事件的DOM对象:div
//这两种情况(第二种情况出现在点击了div中的margin区域,又没有点击到p标签的时候)
//
//如果是点击#clicks调用这个点击函数会打印:
//你点击了:div
//点击事件的DOM对象:div
//只有这一种情况
});
$("#clicks").click(function(enent) {
$("#ips").click();
});
</script>
通过例子我们可以看出,通过对比currentarget和target是否相等,我们可以判断出点击事件是被调用还是被点击
//el1 = event.currentTarget; 这个是事件的DOM对象
//el2 = event.target;这个是触发对象