事件

Events

更多信息，请访问事件处理 - Event Handling、HTML5事件、HTML5事件代理、微信小程序事件

v-on

使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript|事件处理函数

<div v-on:click="doSomething"> ... </div>
<div @click="doSomething"> ... </div>

Classification

包括：鼠标事件、键盘事件

常见事件类型
类型	说明
click	鼠标单击
dbclick	鼠标双击
keyup	按下某键并松开
keydown	某键按下
mouseup	鼠标松开
mousedown	鼠标按下
mousemove	鼠标移动
mouseover	鼠标悬停

Modifier

限制事件特性；如点击事件常见的修饰符有

点击事件常见修饰符
类型	说明
.prevent	阻止默认事件 <form> 的默认提交刷新；<a> 的默认跳转和刷新
.stop	停止事件的传播/冒泡多用于子元素
.self	事件对象 e.target 是自己才触发多用于父元素
.once	只触发一次
.capture	默认是冒泡事件；绑定一个事件捕获从文档的根节点开始，向下传播，直到到达目标元素多用于父元素
.native	使用原生事件；多用于组件定义在组件上的事件默认都是自定义事件系统认为是子组件 $emits 出来的事件；如需使用原生事件，应指定事件修饰符

Bubbling、Capturing

决定事件执行的顺序

事件冒泡 Bubbling - 默认行为；单击 inner，目标 inner 先执行，然后冒泡到 outer 执行

<div class="outer" @click="doOut">
    <div class="inner" @click="doInner"></div>
</div>

事件捕获 Capturing - 单击 inner，先被 outer 捕获执行，再传播到目标 inner执行

<div class="outer" @click.capture="doOut">
    <div class="inner" @click="doInner"></div>
</div>

target、currentTarget

target：触发事件的目标 - 点的谁

currentTarget：当前响应事件的目标；随着事件流的变化，当前目标也在变化

单击 outer：点的是 outer；向上没有父级或者说没有冒泡，响应事件的也是 outer，所以 target 和 currentTarget 都是 outer

单击inner：首先 inner 响应事件，所以 target 和 currentTarget 都是 inner；然后事件冒泡到 outer，outer 响应的是 inner 绑定的事件，所以 target 是 inner，currentTarget 是 outer

更多信息，请访问 event - target

<div class="outer" @click="doOut">
    <div class="inner" @click="doInner"></div>
</div>

如果 inner 指定 stop，事件不会冒泡到 outer

<div class="outer" @click="doOut">
    <div class="inner" @click.stop="doInner"></div>
</div>

如果 outer 指定 self，仅仅响应我自己绑定的事件 - 自嗨模式，不会响应 inner 冒泡的事件：target 是我，事件处理器不来自子元素

<div class="outer" @click.self="doOut">
    <div class="inner" @click="doInner"></div>
</div>

[] 表单默认事件 - 提交时不刷新页面

<form @submit.prevent="submit">
    <input type="text" name="uname" placeholder="your name">
    <button>submit</button>
</form>

Key Modifiers

指定哪个键或哪些触发；多个按键根据先后顺序指定

如果不指定具体的键，任何一个键都可以触发

使用别名代替键，如 enter 代表回车键、space 代表空格键、left 代表左方向键

还可以使用系统按键，如 ctrl、alt、shift等

多用于表单

按键事件修饰符
类型	说明
keyup.enter	按下 enter 键
keyup.alt.enter	按下 alt 键 + enter 键
keyup.ctrl.enter	配合 ctrl 键 + enter 键
keydown.tab	按下 tab 键未释放

[] 按 ctrl + enter 提交留言

事件应用

0. 内联事件

适合简单逻辑

<div @click="console.log('hi')">console log</div>

单击，count 加1；count 要使用才可以响应；否则仅仅利用 vue devTool 数据无法响应

<div @click="count++">do something</div>
<div>使用数据{{count}}</div>

1. 普通事件 - 无参

<div @click="doClick">do something</div>

function doClick() {
    console.log('hello,world');
}

2. 携带参数 - 注意单引号和双引号的配对使用

<div @click="doClickPara('18')">do something with para</div>

function doClickPara(para) {
    console.log(para);
}

3. 使用事件对象对应的 target 获取自定义属性 data-

<div @click="doClickData" data-id="101">do something with data-</div>

function doClickData(e) {
    console.log(e.target.dataset);
}

4. 使用参数且使用自定义属性

结构中需要使用特殊变量 $event 以便和普通参数区分开来

JavaScript 中使用任意形参代替特殊变量 $event

<div @click="doClickParaData('18', $event)" data-id="101">do something with para and data-</div>

function doClickData(para,e) {
    console.logpara(para, e.target.dataset);
}

[] 手动轮播

单击时或定时切换图片

方案1：绑定属性，使用 <img> 配合在线资源

<img :src=" 'https://glpla.github.io/utils/coffee/coffee' + imgInd + '.jpg' " alt="swiper-img">

方案2：绑定样式，使用 background-image 配合在线资源

<div> :style="{ 'background-image': 'url(https://glpla.github.io/utils/coffee/coffee' + imgInd + '.jpg)' }" <div/>

方案3：使用静态资源处理

额外增加一个元素，显示当前图片

图片采用静态资源处理；放在项目 assets 目录下的 imgs 文件夹中

import { ref } from 'vue';
let ind = ref(0)
const chg = () => {
  ind.value++
  ind.value = ind.value % 5
}
const getPic = (ind) => {
  return new URL(`./assets/imgs/${ind}.jpg`, import.meta.url).href
}

<div>{{ ind }}</div>
<img :src='getPic(ind)' alt="">
<button @click="chg">change pic</button>

[] 标签页切换

使用 <nav> 和 <a> 实现

单击标签，对应的标签高亮显示

阻止 <a> 的默认事件

分别使用事件代理、不使用事件代理实现，并体会2者的区别

[] 商品/购物车

商品数量的增加 inc 与减少 dec

商品的删除 del

商品的全选 selAll

商品的结算 totalPrice