1.事件的基本使用

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

欢迎来到{{name}}
点我点我2

2.事件修饰符

2.1 默认事件

欢迎来到{{name}}学习
百度一下

上述代码执行我们点击“百度一下”时，会发现先弹出框，当点击框中的确认按钮后，会自动跳转到百度网站去，这是因为a标签的默认行为href导致的。

场景：链接标签a我设置了点击事件，我想实现只运行点击事件，而不跳转它默认的行为href

2.1.1 使用event的解决方案

欢迎来到{{name}}学习
百度一下

2.1.2 使用vue的事件修饰符：prevent:阻止默认事件

欢迎来到{{name}}学习
百度一下

2.2 冒泡事件

欢迎来到{{name}}学习
百度一下
点我提示信息

当点击“点我提示信息”时，弹出框确认一次后，还会在弹出框一次，是因为“点我提示信息”按钮在蓝色div里，两个都有点击事件，点击“点我提示信息”按钮从而触发了蓝色div的点击事件，这就是冒泡事件。

2.2.1 使用event的解决方案

欢迎来到{{name}}学习
百度一下
点我提示信息

2.2.2 使用vue的事件修饰符：stop:阻止事件冒泡

欢迎来到{{name}}学习
百度一下
点我提示信息

2.3 once:事件只触发一次

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）

2.4 捕获事件

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）
div1
div2

点击橙色div2区域，控制台输出顺序：

点击div2的时候，它先经过的阶段是事件捕获，随后才是冒泡阶段，默认情况下，冒泡事件阶段才是处理事件的，捕获阶段是div1->div2，而冒泡阶段是div2->div1

场景：不想冒泡事件阶段处理事件，想捕获阶段处理事件

2.4.1 capture:使用事件的捕获模式

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）
div1
div2

2.5 event事件

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）
div1
div2
测试event.target

点击“测试event.target”按钮会发现出现了两次的

2.5.1 self:只有event.target是当前操作的元素才触发事件

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）
div1
div2
测试event.target

这里self给的是div元素，只有@click的event是div才会触发点击事件，所以在这里只会弹框一次，且只打印了一次

2.6 滚动事件

2.6.1 使用@scroll：给滚动条加的事件

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）
div1
div2
测试event.target
1
2
3
4

2.6.2 使用@wheel：给鼠标滚轮加的事件

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）
div1
div2
测试event.target
1
2
3
4

2.6.3 @scroll和@wheel区别

@scroll：是给滚动条加的事件

1. 鼠标滚轮将滚动条滚到最下方或者最上方就不会触发@scroll事件
2. 用左边点击滚动条使其滑动是会触发@scroll事件
3. 鼠标滚轮只要可以在滚动条行走，则会触发@scroll事件
4. 使用down，up上下键也会触发@scroll事件

@wheel：是给鼠标滚轮加的事件

1. 用左边点击滚动条使其滑动是不会触发@wheel事件
2. 鼠标滚轮就算将滚动条划到最下方或者最上方，只要鼠标进行了滚轮，就还是会触发@wheel事件
3. 使用down，up上下键不会触发@wheel事件

2.6.4 passive引出

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）
div1
div2
测试event.target
1
2
3
4

在ul容器里使用鼠标滚轮滚动使其滚动条滚动时，会发现使用鼠标滚轮滚动时，会触发@wheel事件的demo函数，demo函数进行了for循环，循环十万次，然后等了几秒后，滚动条才动。它的执行顺序是从鼠标滚轮滚动->demo->滚动条滚动

场景：想让顺序：鼠标滚轮滚动->滚动条滚动（demo异步）

欢迎来到{{name}}学习
百度一下
点我提示信息
事件只触发一次（常用）
div1
div2
测试event.target
1
2
3
4

3.键盘事件

4.总结

    Vue中的事件修饰符：1.prevent:阻止默认事件（常用）2.stop:阻止事件冒泡（常用）3.once:事件只触发一次（常用）4.capture:使用事件的捕获模式5.self:只有event.target是当前操作的元素才触发事件6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕