vue调函数时参数this的写法

最新推荐文章于 2023-06-30 19:12:55 发布

木辰風

最新推荐文章于 2023-06-30 19:12:55 发布

阅读量386

点赞数 1

分类专栏： vue script 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42277412/article/details/126101591

版权

script 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

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>

木辰風

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue调函数时参数this的写法

通常情况下，target与currentTarget是一致的，但当出现父子嵌套时，target与currentTarget就有差别了！currentTarget触发的是绑定事件的标签（如果点击对象还有子节点，当前事件包括子节点在内）target触发事件源（点击谁，触发谁，当点击父元素时也不会包含子元素）（如果事件绑定的是父元素，点击父元素时，target。...
复制链接

扫一扫

专栏目录