Vue.js 事件修饰符的使用教程


Posted in Javascript onNovember 01, 2018

 一、前言

熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能。不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作。

仓储地址: https://github.com/Lanesra712/VueTrial/tree/master/Chapter01-Rookie/directives

 二、干货合集

1、 DOM 事件流

有时,当我们需要完成页面中的某些功能时,我们要在需要实现功能的页面元素上使用 v-on 指令去监听 DOM 事件,在 html4 时代浏览器如何确定页面的哪一部分会拥有特定的事件时,IE 和 Netscape 的开发团队提出了两个截然相反的概念。这一差异,也使我们在写代码中需要考虑如何去处理 DOM 的事件细节。为了解决这一问题,vue 给我们提供了事件修饰符这一利器,它使我们的方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

一些涉及到概念:

a)事件:用户设定或者是浏览器自身执行的某种动作。例如click(点击)、load(加载)、mouseover(鼠标悬停)、change(改变)等等

b)事件处理程序:为了实现某个事件的功能而构建的函数方法,也可称为事件监听器

c)DOM 事件流:描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序

在 DOM 事件流中存在着三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。

a)事件捕获(event capture):当鼠标点击或者触发 DOM 事件时,浏览器会从根节点开始 由外到内 进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件

b)事件冒泡(event bubbing):当鼠标点击或者触发 DOM 事件时,浏览器会从根节点开始 由内到外 进行事件传播,即点击了子元素,则先触发子元素绑定的事件,逐步扩散到父元素绑定的事件

之前我们提到的 IE 和 Netscape 的开发团队提出了两个截然相反的事件流概念,IE 采取的是事件冒泡流,而标准的浏览器的事件流则是事件捕获流。所以,为了兼容 IE 我们需要改变某些的写法。

2、 事件修饰符

a).stop:阻止事件冒泡

在下面的示例中,我们分别创建了一个 button 的点击事件和外侧的 div 的点击事件,根据事件的冒泡机制我们可以得知,当我们点击了按钮之后,会扩散到父元素,从而触发父元素的点击事件,具体的结果也如下图所示:

<div id="app" class="divDefault">
  <div id="div1" @click="divHandlerClick">
   <input type="button" value="点击" @click="btnHandlerClick" />
  </div>
 </div> 
 <script>
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    divHandlerClick() {
     alert('我是div的点击事件!')
    },
    btnHandlerClick() {
     alert('我是button的点击事件')
    }
   }
  });
 </script>

这时候,如果我们不希望出现事件冒泡,则可以使用 Vue 内置的修饰符便捷的阻止事件冒泡的产生。因为我们是点击 button 后产生的事件冒泡,我们只需要在 button 的点击事件上加上 stop 修饰符即可,示例代码如下。

<input type="button" value="点击" @click.stop="btnHandlerClick" />

Vue.js 事件修饰符的使用教程

b).prevent:阻止默认事件

阻止默认事件这个也很好理解,有些标签本身会存在事件,例如,a 标签的跳转,form 表单中 submit 按钮的提交事件等等,在某些时候我们只想执行我们自己设置的事件,这时,就需要阻止标签的默认事件的执行,原生的 js 我们可以使用 preventDefault 方法来实现,而在 Vue 中,我们只需要使用 prevent 关键字就可以了。

在下面的示例中,我们为 a 标签添加了一个点击事件,由于 a 标签本身具有默认的跳转事件,此时,当我们点击后,最终还是会执行 a 标签的默认事件。

<a href="http://www.baidu.com" @click="aHandlerClick">链接跳转</a> 
 <script>
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {
    aHandlerClick() {
     alert('我是a标签的点击事件')
    }
   }
  });
 </script>

Vue.js 事件修饰符的使用教程

在 Vue 中,当我们想要阻止元素的默认事件,只需要在绑定的事件后使用 prevent 修饰符即可,示例代码如下。

<a href="http://www.baidu.com" @click.prevent="aHandlerClick">链接跳转</a>

Vue.js 事件修饰符的使用教程

c).capture:添加事件监听器时使用事件捕获模式

在上面的学习中我们了解到,事件捕获模式与事件冒泡模式是一对相反的事件处理流程,当我们想要将页面元素的事件流改为事件捕获模式时,只需要在父级元素的事件上使用 capture 修饰符即可,还是上面的例子的代码,当我们在 div 绑定的点击事件上使用 capture 修饰符后,我们点击按钮首先触发的就是最外侧的 div 的事件。

<div id="app" class="divDefault">
  <div id="div1" @click.capure="divHandlerClick">
   <input type="button" value="点击" @click="btnHandlerClick" />
  </div>
 </div>

Vue.js 事件修饰符的使用教程

d).self:只当在 event.target 是当前元素自身时触发处理函数(比如不是子元素冒泡引起的事件触发)

在上面的例子中,我们为 div 绑定了一个点击事件,而我们的本意可能是只有当我们点击 div 后触发这个事件,而实际情况是事件冒泡还是事件捕获都会触发这个事件,这与我们的本意是不符的。在 Vue 中,我们就可以使用 self 修饰符去修饰事件,让这个事件只在我们想要触发时触发。

<div id="app" class="divDefault">
 <div id="div1" @click.self="divHandlerClick">
  <input type="button" value="点击" @click="btnHandlerClick" />
 </div>
</div>

Vue.js 事件修饰符的使用教程

e).once:事件只触发一次

当我们仅仅想对绑定的事件只在第一次的时候触发,这时我们就可以使用 once 修饰符去修饰绑定的事件。例如在下面的代码中,只有第一次点击时才会触发绑定的事件,之后点击都不会触发。

<input type="button" value="点击" @click.once="btnHandlerClick" />

f).passive:滚动事件的默认行为 (即滚动行为) 将会立即触发

在页面滚动的时候,浏览器会在整个事件处理完毕之后再触发滚动,因为浏览器并不知道这个事件是否在其处理函数中被调用了 event.preventDefault(),而 passive 修饰符用来进一步告诉浏览器这个事件的默认行为不会被取消,即 使用 passive 修饰符后表示绑定的事件永远不会调用 event.preventDefault()。

 三、总结

1、事件修饰符的使用顺序很重要

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2、.passive 和 .prevent不能一起使用

不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

以上所述是小编给大家介绍的Vue.js 事件修饰符的使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
js事件(Event)知识整理
Oct 11 Javascript
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
Dec 27 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
微信小程序实现蒙版弹窗效果
Nov 01 #Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 #Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 #Javascript
微信小程序实现留言板
Oct 31 #Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 #Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 #Javascript
微信小程序实现留言功能
Oct 31 #Javascript
You might like
微信支付开发维权通知实例
2016/07/12 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
javascript 运算数的求值顺序
2011/08/23 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
2014/05/28 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python实现截屏的函数
2015/07/26 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
美国在线珠宝商店:SZUL
2017/02/11 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
日语专业个人的求职信
2013/12/03 职场文书
合同专员岗位职责
2013/12/18 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
烹调加工管理制度
2014/02/04 职场文书
2014年市场部工作总结
2014/11/25 职场文书
圣诞晚会主持词
2015/07/01 职场文书
运动会运动员赞词
2015/07/22 职场文书
Django框架之路由用法
2022/06/10 Python