文章目录
- 1.使用事件委托为子节点绑定事件
- 2.e.target和this的区别
- 3.vue中如何获取DOM节点?
- 方法一:通过事件源来获取当前点击的节点
- 方法二:通过ref来获取当前点击的节点
- 方法三:使用自定义指令来获取当前点击的节点
1.使用事件委托为子节点绑定事件
<body><ul onclick="func(event)"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body>
<script>function func(e){console.log(e.target)e.target.style.background="yellow"}
</script>
2.e.target和this的区别
- 形参e是指事件对象,
它是事件的一系列相关数据的集合,由系统自动创建,无需传参,
事件对象只有在事件(比如onclick)存在时在存在
- e.target是返回触发事件的对象
- e.target与this的区别
e.target返回的是 触发 事件的对象或元素,
而this返回的是 绑定/调用 事件的对象或元素
比如:
在事件委托中,把点击事件绑定给父节点(ul)时,
this返回的是绑定点击事件的元素,也就是ul
而e.target返回的是被点击的某个子节点,也就是li
3.vue中如何获取DOM节点?
注:vue无需通过操作DOM节点来更新界面,也不推荐开发者直接操作DOM
方法一:通过事件源来获取当前点击的节点
- 不传参
//html<input type="button" value="点击" v-on:click='fun'/>
//js
methods:{fun:function(event){console.log(event.target);}}
- 传参
//html<input type="button" value="点击" v-on:click='fun($event.target)'/>
//js
methods:{fun:function(e){console.log(e);}}
方法二:通过ref来获取当前点击的节点
//html<input ref='name' type="button" value="点击" v-on:click='fun'/>
//js
methods:{fun(){console.log(this.$refs.name);}}
方法三:使用自定义指令来获取当前点击的节点
//html<input type="button" value="点击" v-get/>
//js(无需点击就能获取)Vue.directive("get",{bind:function(el){console.log(el);}})
本文链接：https://my.lmcjl.com/post/4544.html
展开阅读全文
4 评论