事件处理

事件的基本使用

1. 使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
5. @click="demo" 和 @click="demo($event)"效果一致，但后者可以传参

demo(event){
    // 当前点击的元素整个
    console.log(event.target)
    // 当前元素的文本内容
    console.log(event.innnerText)
}

事件修饰符

1.阻止默认行为

• e.preventDefault()或者@click.prevent

2. 阻止冒泡

事件冒泡：当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序。

• 这里在这个元素内部加@click.stop或者event.stopProgation()

3. 事件只触发一次

@click.once

4. 事件的捕获模式

@click.capture

• 事件一般先捕获再冒泡，加上这个之后就可优先让那个事件处理

5. 另一种阻止事件冒泡的方式

• 只有event.target是当前操作的元素时才触发事件

@click.self加到父元素身上阻止冒泡

6. 事件的默认行为立即执行无需等待回调函数

• 例如在@wheel滚轮事件里写一个函数执行，要等函数执行完毕滚轮才能让滚动条向下走

因此要@wheel.passive

键盘事件

1. @keydown 键盘按下去
2. @keyup 键盘按下去再抬起来

常见修饰符

• enter 回车
• delete 删除
• esc 退出
• space 空格
• tab 换行
• up 上
• down 下
• left 左
• right 右

e.key是按下的键名称，e.keyCode是按键的编码,e.target.value当前元素的值

• 一些不常用的按键也可以通过这种方法获取

  

  就可以这样用：

  

3. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意要转为xxx-xxx(短横线命名)
4. 系统修饰符（用法特殊）：ctrl、alt、shift、meta

• 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
• 配合keydown使用：正常触发事件(tab)

5. 也可以使用keyCode去指定具体的按键（不推荐，以后就不支持了）

6. Vue.config.keyCode.自定义键名 = 键码，可以去定制按键别名

7. 开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情