jq写法
<div onclick="test(this)"> </div>
然后jq部分:
function test(obj){
$(obj).addClass("on").siblings().removeClass("on");
}
vue写法
<div @click="test($event)"> </div>
然后Vue部分:
methods:{
test:function(e){
$(e.target).addClass("on").siblings().removeClass("on");
}
}
通常情况下,target与currentTarget是一致的,但当出现父子嵌套时,target与currentTarget就有差别了!
在父子嵌套的关系中:
target触发事件源(点击谁,触发谁,当点击父元素时也不会包含子元素)(如果事件绑定的是父元素,点击父元素时,target会带上子元素)
currentTarget触发的是绑定事件的标签(如果点击对象还有子节点,当前事件包括子节点在内)
<body>
<div id="app1">
父元素,点我啊!!
<div id="app2">
子元素,点我啊!!
</div>
</div>
<script type="text/javascript">
let app1 = document.getElementById('app1'),
app2 = document.getElementById('app2');
app1.addEventListener('click', e => {
console.log('e.target结果是:', e.target)
console.log('e.currentTarget结果是:', e.currentTarget)
})
</script>
</body>