-
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;这个是触发对象