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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
JavaScript中reduce()的用法
May 11 Javascript
微信小程序实现蒙版弹窗效果
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
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
JavaScript Array扩展实现代码
2009/10/14 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python全局变量用法实例分析
2016/07/19 Python
python使用RNN实现文本分类
2018/05/24 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
售房协议书范本2014
2014/10/23 职场文书
丽江古城导游词
2015/02/03 职场文书
联谊会开场白
2015/06/01 职场文书
学校教师培训工作总结
2015/10/14 职场文书
小学体育课教学反思
2016/02/16 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python