1. js的事件,如点击事件,可以直接用this获取事件对象,
2. 而jQuery可以使用$(this)来获取事件对象。
3. vue必须借助事件的 event 对象 的 currentTarget 才能获取事件对象
v-on:click="onClick( $event)"
onClick(e){
$(e.currentTarget)
console.log(e)
# 获得点击元素的前一个元素
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
}
实际的一次应用
鼠标移入 会有一个样式变化
//模板
<template>
<div class="nav_bar">
<span
@mouseover="mouseOver($event)"
@mouseleave="mouseLeave($event)"
v-for="(item, i) in navigationBar"
:key="i"
>{
{
item }}</span
>
<!-- :class="active == true ? 'spanItem' : ''" -->
</div>
</template>
//逻辑
data() {
return {
navigationBar: [
"综合能力",
"软件能力",
"业务能力",
"技能能力",
"文化能力",
"爱好能力",
],
};
},
methods: {
mouseOver(e) {
console.log("e", e.currentTarget);
console.log("e", e.target);
console.log("e", e.currentTarget.innerHTML);
e.currentTarget.className = "spanItem";
},
mouseLeave(e) {
e.currentTarget.className = "";
},
},
//样式
.spanItem {
width: 16.666%;
height: 34px;
text-align: center;
line-height: 34px;
margin-top: -3px;
background: linear-gradient(-26deg, #56b1ff, #48fffd);
border-radius: 20px;
font-size: 20px;
font-family: AliHYAiHei;
font-weight: 400;
font-style: italic;
color: #ffffff;
text-shadow: 0px 1px 3px rgba(9, 26, 41, 0.32);
}