methods: {
showCardModal: function(e) {
this.modalCard = e.currentTarget.dataset.target
},
hideCardModal: function(e) {
this.modalCard = null
},
showErrorModal: function(e) {
this.modalError = e.currentTarget.dataset.target
},
hideErrorModal: function(e) {
this.modalError = null
},
==================================================
要说清楚这个东西,还不太好阐述呢,所以,先看看下面的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css" rel="stylesheet">
#fa{
width: 100%;
height: 170px;
padding: 20px 0px;
background-color: cadetblue;
}
#son{
width: 100%;
height: 20px;
padding: 30px 0px;
background-color: black;
color: white;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="fa" οnmοusedοwn="getEventTrigger(event)">
<p id="son" οnmοusedοwn="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>
起初我也不太明白这两个概念,不过将上述代码在浏览器上执行以后,结合事件捕获和事件冒泡的概念,e.target与e.currentTarget就不难理解了,我将上述代码执行的结果以截图的方式呈现出来,对比一下:
当我点击id为son的p元素时:
第一次弹出的信息
第二次弹出的信息
通过对比可以看出,当点击p元素时,执行的是p元素上绑定的事件,此时,事件监听的对象是p元素,目标也是p元素,即图一所
示,currentTarget为p元素,target也是p元素;当事件冒泡到它的父级id为fa的元素div,触发了绑定在div上的事件,而这时,事件监
听的对象是div,目标元素依然是p元素,对比图二的信息,也就是说,这时的currentTarget指向div,target依然指向p元素,由此我
们可以得出:
e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象,也是触发这个事件的对象!这么说应该明白
了吧?
————————————————
版权声明:本文为CSDN博主「magic__man」的原创文章,遵循CC 4.0 BY-S[**]版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/magic__man/article/details/51781425