Vue.js-03:第三章 - 事件修饰符的使用
一、前言
熟悉了 Vue 的指令系统后,在实际开发中,不可避免的会使用到对于事件的操作,如何处理 DOM 事件流,成为我们必须要掌握的技能。不同于传统的前端开发,在 Vue 中给我们提供了事件修饰符这一利器,使我们可以便捷的处理 DOM 事件,本章,一起来学习如何使用事件修饰符来实现对于 DOM 事件流的操作。
学习系列目录地址:https://www.cnblogs.com/danvic712/p/9549100.html
仓储地址:https://github.com/Lanesra712/VueTrial/blob/master/Chapter01-Rookie/modifiers/event.html
二、干货合集
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" />
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 中,当我们想要阻止元素的默认事件,只需要在绑定的事件后使用 prevent 修饰符即可,示例代码如下。
<a href="http://www.baidu.com" @click.prevent="aHandlerClick">链接跳转</a>
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>
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>
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 会告诉浏览器你不想阻止事件的默认行为。
四、参考
4、JavaScript 详说事件机制之冒泡、捕获、传播、委托
Vue.js-03:第三章 - 事件修饰符的使用的更多相关文章
- Vue.js-06:第六章 - 按键修饰符的使用
一.前言 上周末的时候,准备试试将 ASP.NET Core 的项目部署到 CentOS 服务器上,结果在一个接一个坑里面跳,最后 Supervisor 守护程序还是有问题,于是,采用重装系统大招, ...
- Vue学习笔记【6】——事件修饰符
.stop 阻止冒泡(阻止事件向外层冒泡) .prevent 阻止默认事件(链接跳转.表单提交) .capture 添加事件侦听器时使用事件捕获模式(从外到里触发事件) .self 只当事件在该元素本 ...
- Vue—事件修饰符
Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...
- VueJS 事件修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更 ...
- VueJS事件处理器v-on:事件修饰符&按键修饰符
事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通 ...
- Vue.js学习 Item8 -- 方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...
- Vue--事件处理(逐个学习事件修饰符)
.capture .self .once 主要学习这三个事件修饰符的用法先来看看capture capture即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则 ...
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue.js(5)--事件修饰符
vue中的事件修饰符(.stop..prevent..self..capture..once) (1)实例代码 <!DOCTYPE html> <html lang="en ...
随机推荐
- VMware下对Ubuntu进行扩充磁盘大小
今天用虚拟机的时候,发现虚拟机快满了,提示磁盘空间小,不得不扩充虚拟机空间.经过百度搜索,终于搞定了,记录如下 平台:VMware(10.0.3)+Ubuntu 14.04(32bit) 1.选择VM ...
- 学习ASP.NET Core Razor 编程系列十——添加新字段
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- 使用ASIFormDataRequest完成用户的登录操作
ASIFormDataRequest是用于向表单post数据或get数据,可以用于用户向服务器端发送请求完成登录注册,上传下载数据的操作. 之前写过一篇文章是介绍使用ios内置的功能完成登录操作(NS ...
- python中的异常
Python提供了两个非常重要的功能来处理异常和错误: 1) 异常处理try-.except 2) 断言assert 异常和断言,可以用于我们调试python程序,跟踪程序执行状态,尽快排查问题. 3 ...
- appium在android 7.0真机上运行报错command failed shell:............ps:'uiautomator"的解决方式
appium版本:1_4_16 在CSDN中找到相关解决的方案,根据此解决方案顺利的解决了让人惆怅的问题,再次记录. 1.找到appium安装目录下的adb.js文件,目录为:Appium\node_ ...
- Navicat:实现两个数据库结构同步和数据库对比
Navicat版本:Navicat Premium 12 选择 工具 ——> 结构同步 选择源数据库和目标数据库,选择完成后点击右下角对比按钮 要修改的对象:源数据库和目标数据库中都有的 ...
- Vue 进阶之路(七)
之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...
- Redis 缓存失效和回收机制续
二.Redis Key失效机制 Redis的Key失效机制,主要借助借助EXPIRE命令: EXPIRE key 30 上面的命令即为key设置30秒的过期时间,超过这个时间,我们应该就访问不到这个值 ...
- 【极简版】SpringBoot+SpringData JPA 管理系统
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在上一篇中已经讲解了如何从零搭建一个SpringBo ...
- 入门rocketmq从浅到深
目录 一.引言 二.介绍 三.Rocketmq关键概念 1.主题与标签 2.发送与订阅群组 3.Broker与NameServer 4.广播消费与集群消费 5.消息队列 6.集群方式 7.顺序消息 8 ...