从Vue中事件处理到页面响应过程到修饰符学习

bigegpt 2024-10-11 10:54 8 浏览

基础

学习VUE,百分百用完双向绑定之后，就用到了事件绑定 v-on指令，简写 @，触发之后就产生页面响应。

<div id="example-1">
 <button v-on:click="counter += 1">Add 1</button>
 <p>The button above has been clicked {{ counter }} times.</p>
</div>

在绑定事件后面可以直接进行数据的更新，或者里面放一个函数方法。

<div id="example-2">
 <!-- `greet` 是在下面定义的方法名 -->
 <button @click="greet">Greet</button>
</div>

里面对应的函数方法，默认会将原生dom事件也默认的带上。当然，也可以自己增加参数，使用 $event 作为原生dom事件的参数传入。

<button v-on:click="warn('Form cannot be submitted yet.'，$event)">
 Submit
</button>

捕获与冒泡

在使用事件修饰符之前，先说下事件流的响应过程。举例下面

<html>
 <body>
 <div id="外层元素" onclick="alert('我在外面')">
 <div id="中层元素" onclick="alert('我在中间')">
 <div id="内层元素" onclick="alert('我在里面')">这里面有内容</div>
 </div>
 </div>
 </body>
</html>

对应的浏览器中的DOM结构是

最开始浏览器只是一个事件对应一个元素。比如点了内层元素就内层元素响应，点了外层就外层元素响应。后来认为仅仅支持一个单一事件是不够的，到IE4之后提出了事件流的概念，一个元素支持多个事件，执行过程如下：

而且这个事件流还按照执行当前执行的状态起了好几个名字：事件捕获阶段、处于目标阶段、事件冒泡阶段。就好像我要吃箱子里面的苹果，原来说吃第二层箱子里面的苹果，就只吃第二层箱子里面的苹果。

关于事件流处理的过程，世纪初最开始是分两派的，网景主张捕获流：我打开最外层发现苹果我就吃，打开第二层发现苹果我在吃，打开最内层发现有苹果我再吃。

微软主张冒泡流：我先逐层打开，数清楚苹果我在从里到外吃（举例不恰当哈）。

（最开始阶段网景捕获只是向下查找事件的过程，微软只有向上查找的过程。）

不过在DOM2之后，W3C统一了标准，同时支持了捕获流和冒泡流，在增加事件监听的时候，addEventListener的第三个参数就是为捕获流和冒泡流准备的，默认是false,在冒泡阶段处理事件，参数变成true的意思就是在捕获阶段就处理该事件。

目前浏览器默认都采用了冒泡流，上面举例内容中，点击这里面有内容的部分，会一次弹框“我在里面”，“我在中间”，“我在外面”跟你实际显示在哪里没关系，跟dom树结果有关系。

元素默认行为

DOM中很多事件都存在默认行为，列举一些常用的：

a :点击后会跳转页面
submit: 点击form中的提交表单
右键点击：会产生菜单
鼠标滚轮：网页会滚动，滚动条会动
button: PC版本不做任何事情，手机浏览器中在form里就变成submit
……

事件修饰符

了解冒泡流、捕获流、默认行为之后，vue事件流相关事件修饰就好理解了。正常事件处理程序中，event.preventDefault() 来阻止默认行为，使用event.stopPropagation()来阻止事件传播，在捕获阶段就阻止向下，冒泡阶段就阻止向上。

VUE为了解决上面问题，提供了事件修饰符，目前有的有以下.stop .prevent .capture .self .once .passive,具体的含义如下：

<!-- .stop阻止单击事件继续冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- .capture 点击事件实在捕获阶段执行 -->
<div v-on:click.capture="doThis">...</div>
<!-- .self 只有点击当前自己的时候才执行，捕获和冒泡经过他都不执行，不过他本身产生的捕获和冒泡还是存在的-->
<div v-on:click.self="doThat">...</div>
<!-- .once点击事件将只会触发一次,触发一次之后，后面事件就不存在了。类似于事件使用addEventListener增加的，执行过一次之后，自动removeEventListener了 -->
<form v-on:submit.once="onSubmit"></form>
<!-- .prevent 阻止默认行为。比如提交不在重载，右键不产生菜单 --> 
<form v-on:submit.prevent="onSubmit"></form>
<!-- .passive 表示默认行为立即执行，不用看prevent了 -->
<div v-on:scroll.passive="onScroll">...</div>

上面的这些事件修饰符是可以连用的。

拦截默认.prevent和执行默认.passive

这里有疑惑，既然默认会执行，为啥还要来个.passive的默认执行呢？

这是因为浏览器每次在执行默认事件之前，都会等监听事件开始执行才能看到有没有拦截，如果没拦截，我再执行，即使监听事件是个空函数，也是需要事件的。针对单次的行为，体现不出来差别。如果是那种短时间内执行很多次的话，就可能会造成页面卡顿。比如，页面滚动，移动手机浏览器上的手指滑动。在实际运行中，90%的默认事件其实都是不阻止的，也就是说，大部分事件，浏览器都白等监听器了。所以，passive监听器诞生了。（这个监听器是在chrome51版本之后添加的）

知道作用发现他们是相反的，也就是说他们不能同时使用，浏览器会报错哦。

按键修饰符

看名字就知道了，vue的监听键盘鼠标事件的修饰符了。很简单，如下

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

对应支持的事件是 .enter .tab .delete .esc .space .up .down .left .right

上述按键在组合键点击的时候也会触发，想要单纯一点的话，就再来一个修饰符 .exact。

鼠标点击的话也可以进一步限制为：.left .right .middle

原生修饰符.native

这个修饰符主要使用在自定义组件上，例如给组件添加一个@click事件，默认会当作一个绑定事件，等待组件内部一个 this.$emit(“click”)的方法向外传递的时候使用。如果我们单纯的就只是想单击这个组件的话，就可以加上 .native来将组件变成一个普通的html。这个熟悉在其他地方就没什么大用了好像，毕竟其他地方本来就是普通的html,是可以响应这些事件的。举例：

<div id = "app">
 <my-component @click="say"></my-component>
</div>
Vue.component('my-component', {
 template: "<button>按钮</button>",
})
new Vue({
 el:"#app",
 methods:{
 i_said(){
 say("点了按钮");
 }
 }
})

这里点击就组件，就没有什么用，对于组件来说，@click不是一个点击事件。

如果将点击事件直接放在组件内部，本身普通html元素就是可以响应的。

<div id = "app">
<my-component @click.native="say"></my-component>
</div>
Vue.component('my-component', {
 template: "<button>按钮</button>",
})
new Vue({
 el:"#app",
 methods:{
 say(){
 alert("点了按钮");
 }
 }
})

文末

那天在看一个事件修饰符的面试题的时候，觉得恍惚，所以重新复习记录下，供后续学习。

vue阻止冒泡

上一篇：「Vue基础」-事件监听(v-on) vue监听数据变化的事件怎么写
下一篇：Vue数据及事件绑定、filter过滤器

从Vue中事件处理到页面响应过程到修饰符学习

基础

捕获与冒泡

元素默认行为

事件修饰符

拦截默认.prevent和执行默认.passive

按键修饰符

原生修饰符.native

文末

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解