| 类型 | 说明 |
|---|---|
| click | 鼠标单击 |
| dbclick | 鼠标双击 |
| keyup | 按下某键并松开 |
| keydown | 某键按下 |
| mouseup | 鼠标松开 |
| mousedown | 鼠标按下 |
| mousemove | 鼠标移动 |
| mouseover | 鼠标悬停 |
| ... | ... |
<div onclick="alert('hi,there.')">点击我</div>
let el = document.querySelector('div')
el.onclick = function (e) {
console.log(e);
console.log(this);
}
el.addEventListener(event-type, event-handle, capture)
el.removeEventListener(event-type, event-handle, capture)
<div v-on:click="doSomething"> ... </div>
<div @click="doSomething"> ... </div>
<div @click="console.log('hi')">console log</div>
<div @click="count++">do something</div>
<div>使用数据{{count}}</div>
<div @click="doClick">do something</div>
function doClick() {
console.log('hello,world');
}
const doClick = () => {
console.log('hello,world');
}
<div @click="doClickPara('18')">do something with para</div>
function doClickPara(para) {
console.log(para);
}
<div @click="doClickData" data-id="101">do something with data-</div>
function doClickData(e) {
console.log(e.target.dataset);
}
<div
@click="doClickParaData('18', $event)"
data-id="101"
>do something with para and data- </div>
function doClickParaData(para,e) {
console.log(para, e.target.dataset);
}
<div v-for="item in goods" :key="item.id">
<div>{{ item.name }}</div>
<button @click="getItem(item.id, $event)">More</button>
</div>
const getItem = (id, e) => {
console.log(id, e);
}
<div class="fa" @click="doFa"> <div class="son" @click="doSon"></div> </div>
<div class="fa" @click.capture="doFa"> <div class="son" @click="doSon"></div> </div>
<div class="fa" @click="doFa"> <div class="son" @click="doSon"></div> </div>
<div class="fa" @click="doFa"> <div class="son" @click.stop="doSon"></div> </div>
<div class="fa" @click.self="doFa"> <div class="son" @click="doSon"></div> </div>
<div @click.stop="num++">inc</div>
<div @click.stop="inc">inc</div>
function inc() {
num.value++
}
<div @click.stop="inc">inc</div>
const inc = () => {
num.value++
}
<footer>
<div class="price">
<div class="total">¥100</div>
<div class="nums">
<button>-</button>
<span class="num">1</span>
<button class="inc">+</button>
</div>
</div>
<div class="btns">
<button>立即购买</button>
<button class="cart">加入购物车</button>
</div>
</footer>
footer {
line-height: 40px;
}
.price {
display: flex;
justify-content: space-between;
}
.nums {
display: flex;
align-items: center;
gap: 10px;
}
.nums button {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #f40;
}
.nums .num {
width: 30px;
text-align: center;
}
.nums button.inc {
background-color: #f40;
color: #fff;
}
.btns {
display: flex;
gap: 10px;
}
.btns button {
flex: 1;
border-radius: 20px;
border: 1px solid #f40;
}
.btns button.cart {
background-color: #f40;
color: #fff;
}