一,常用方式:input中获取当前内容
$event.target.value
示例:
<body>
<div id="app">
<input type="text" @click="abc($event)" value="123" />
</div>
<script>
var vm = new Vue({
el: "#app",
data: {},
methods: {
abc(event) {
console.log(event.target.value);
}
}
});
</script>
</body>
二,$event.target获取触发事件的元素
当我们输出打印event这个参数的时候,我们可以看到很多属性。其中target就表示触发事件的元素。
在target中里面有许多属性,我们可以进行查找。比如当需要获取id的时候可以event.target.id,获取p标签的文本内容也可以为 event.target.innerText,还有常见的是获取事件元素的高度$event.target.offsetHeight
三,$event.currentTarget获取绑定事件的元素
触发事件的元素和绑定事件的元素,这是两个不同的概念,需要理解事件冒泡,事件目标和事件捕获,还要会明白事件委托的概念,可以看这篇文章:
https://blog.csdn.net/weixin_42349568/article/details/109019097
对于这里的应用,可以用这个例子来理解:
这里有三个二维码,是通过v-for循环出来的:
<!-- 二维码区域 -->
<div class="qrCode">
<div class="image" v-for="(item,index) in QR" :key="index">
<span>{{item.title}}</span>
<div class="maskbox">
<img :src="item.src" alt="">
<div class="mask">
<button @click="getNewQR(index)">重新生成</button>
<button @click="down($event)">下载二维码</button>
</div>
</div>
</div>
</div>
可以看到,我为了区分点击重新生成按钮,是在哪个二维码区域生成的,把index做为参数传入了。另一个下载二维码的按钮,我就是使用$event来处理:
//下载图片
down(e) { // 保存二维码
var oQrcode = e.currentTarget.parentElement.previousElementSibling
var url = oQrcode.src
this.downloadIamge(url, '二维码') //这是封装的下载图片的函数,可忽略
},
我想要下载对应的二维码,就需要点击这个按钮时,获取到它对应的img元素,但是我现在事件是绑定在button上的,为了获取到这个img标签元素,就可以利用这个来获取。
有的人又说,可以通过设置$ref属性来获取对应的dom元素,但是这里是v-for循环出来的,三个二维码区域都是有这个一样的ref属性的。不能直接获取到我点击的哪个二维码图片。
也就是说,可以使用原生的parentElement这些东西,来获取和你事件绑定相关的元素节点。
常用的有:
#获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
#获得点击元素的第一个子元素
e.currentTarget.firstElementChild
# 获得点击元素的下一个元素
e.currentTarget.nextElementSibling
# 获得点击元素中id为string的元素
e.currentTarget.getElementById("string")
# 获得点击元素的string属性
e.currentTarget.getAttributeNode('string')
# 获得点击元素的父级元素
e.currentTarget.parentElement
# 获得点击元素的前一个元素的第一个子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML