技术

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

微信扫一扫,分享到朋友圈

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

基础

学习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("点了按钮");
    }
  }
})

文末

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

 

半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

前端性能优化之Performance API

上一篇

智能写诗云开发小程序开发流程

下一篇

你也可能喜欢

1 条评论

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

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

      长按储存图像,分享给朋友

      微信扫一扫

      微信扫一扫