Vue.js事件修饰符的使用教程_事件修饰符资源-CSDN文库

7 浏览量 2020-12-07 05:33:49 上传评论收藏 157KB PDF 举报

资源详情

资源评论

资源推荐

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

一、前言一、前言

熟悉了 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" />

b）.prevent：阻止默认事件

阻止默认事件这个也很好理解，有些标签本身会存在事件，例如，a 标签的跳转，form 表单中 submit 按钮的提交事件等等，在某些时候我们只想执行我们自己设置的事件，这时，就需要阻止

标签的默认事件的执行，原生的 js 我们可以使用 preventDefault 方法来实现，而在 Vue 中，我们只需要使用 prevent 关键字就可以了。

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

内容反馈

weixin_38733875

粉丝: 7
资源: 976

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip