在实际开发中，不可避免的要用到事件的操作。如何处理DOM事件流已经成为我们必须掌握的技能。本文主要介绍Vue.js的事件修饰符使用教程，有需要的朋友可以参考一下。
一、前言
熟悉了Vue的指令系统后，在实际开发中难免要用到事件的操作。如何处理DOM事件流已经成为我们必须掌握的技能。不同于传统的前端开发，Vue为我们提供了事件修改器的工具，使我们能够方便地处理DOM事件。在本章中，让我们学习如何使用事件修饰符来操作DOM事件流。
存储地址：3359 github . com/lanes ra 712/vuetrial/tree/master/chapter 01-菜鸟/方向
二、干货合集
1、 DOM 事件流
有时候，当我们需要完成一个页面中的一些功能时，我们需要使用v-on指令来监听需要实现功能的页面元素上的DOM事件。在html4时代，IE和Netscape的开发团队在浏览器决定页面的哪个部分会有特定事件时，提出了两个完全相反的概念。这种差异也让我们在编写代码时需要考虑如何处理DOM的事件细节。为了解决这个问题，vue为我们提供了事件修改器这个工具，使得我们的方法只有纯数据逻辑，而不是处理DOM事件细节。
涉及到一些概念：
a)事件：由用户设置或由浏览器本身执行的动作。例如，单击、加载、鼠标悬停、更改等。
b)事件处理程序：为实现事件的功能而构建的函数方法，也可以称为事件监听器。
C)DOM事件流：描述了从页面接收事件的顺序，也可以理解为事件在页面中传播的顺序。
DOM事件流有三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。
a)事件捕获：当鼠标点击或触发DOM事件时，浏览器会将事件从根节点由外向内传播，即点击子元素。如果父元素通过事件捕获注册了相应的事件，则父元素绑定的事件将首先被触发。
b)事件bubbing:当鼠标点击或触发DOM事件时，浏览器会由内而外从根节点开始事件传播，即当点击子元素时，首先触发子元素绑定的事件，并逐渐传播到父元素绑定的事件。
前面提到的IE和网景的开发团队提出了两个完全相反的事件流概念。IE采用的是事件冒泡流，而标准浏览器的事件流是事件捕获流。所以，为了兼容IE，我们需要改变一些书写方式。
2、 事件修饰符
a)。停止：防止事件冒泡。
在下面的例子中，我们分别在外部创建了一个button click事件和一个div click事件。根据事件的冒泡机制，我们可以知道，当我们点击按钮时，会扩散到父元素，从而触发父元素的点击事件。具体结果也如下图所示：
div id='app' class='divDefault '
div id=' div 1 ' @ click=' divlhandlerclick '
type=' button ' value=' click ' @ click=' btnhandrlclick '/
/div
/div
脚本
var vm=new Vue({
埃尔：' #app '，
数据：{}，
方法：{
divlhandlerclick(){
Alert('我是div的点击事件！')
},
btnhandrlclick(){
Alert(“我是按钮的点击事件”)
}
}
});
/脚本
这时，如果我们不希望事件冒泡的发生，可以使用Vue内置的修饰符，方便地阻止事件冒泡的发生。因为我们是点击按钮后冒泡的事件，所以只需要给按钮的click事件加上stop修饰符。示例代码如下。
input=' button ' value=' click ' @ click . stop=' btnhandrlclick '/
b)。阻止：阻止默认事件。
阻止违约也很容易理解。有些标签本身会有事件，比如A标签的跳转，表单form中提交按钮的提交事件等。在某些时候，我们只想执行自己设置的事件。这时，我们需要阻止标签的默认事件的执行。原生js可以使用preventDefault方法实现，而在Vue中，我们只需要使用Preventkeyword。
在下面的例子中，我们向A标签添加了一个点击事件。由于A标签本身有一个默认的跳转事件，此时，我们点击之后，最终会执行A标签的默认事件。
a href=' 3358 www . Baidu . com ' @ click=' a handler click '链接跳转/a
脚本
var vm=new Vue({
埃尔：' #app '，
数据：{}，
方法：{
ahandrelclick(){
Alert(“我是A标签的点击事件”)
}
}
});
/脚本
在Vue中，当我们想要阻止一个元素的默认事件时，我们只需要在绑定事件之后使用prevent修饰符。示例代码如下。
a href=' 3358 www . Baidu . com ' @ click . prevent=' a handler click '链接跳转/a
c)。捕获：添加事件侦听器时使用事件捕获模式。
在上面的研究中，我们了解到事件捕获模式和事件冒泡模式是一对相反的事件处理过程。当我们想要将页面元素的事件流更改为事件捕获模式时，我们只需要对父元素的事件使用capture修饰符。也是上面例子的代码。当我们在div绑定的click事件上使用capture修饰符时，当我们单击按钮时，最外层div的事件首先被触发。
div id='app' class='divDefault '
div id=' div 1 ' @ click . capure=' divHandlerClick '
type=' button ' value=' click ' @ click=' btnhandrlclick '/
/div
/div
d)。self:仅当event.target是当前元素本身时才触发处理函数(例如，不是由子元素冒泡引起的事件触发器)
在上面的例子中，我们为div绑定了一个click事件，我们的初衷可能是只有点击div才会触发这个事件，但实际情况是无论是事件冒泡还是事件捕获都会触发这个事件，这与我们的初衷不符。在Vue中，我们可以使用self修饰符来修改事件，这样事件只会在我们想要的时候被触发。
div id='app' class='divDefault '
div id=' div 1 ' @ click . self=' divHandlerClick '
type=' button ' value=' click ' @ click=' btnhandrlclick '/
/div
/div
e)。once:事件仅触发一次。
当我们只想第一次触发绑定事件时，我们可以使用once修饰符来修改绑定事件。例如，在下面的代码中，只有第一次单击会触发绑定事件，后续的单击都不会触发。
input=' button ' value=' click ' @ click . once=' btnhandrlclick '/
f)。被动：滚动事件的默认行为(即滚动行为)会被立即触发。
当页面滚动时，浏览器会在整个事件处理完毕后触发滚动，因为浏览器不知道该事件在其处理函数中是否已经调用了event.preventDefault()，被动修饰符用来进一步告诉浏览器该事件的默认行为不会被取消，即使用被动修饰符后，意味着绑定的事件永远不会调用event.preventDefault()。
三、总结
1.事件修饰符的使用顺序非常重要。
使用修饰语时，顺序很重要；相应的代码将以相同的顺序生成。因此，使用v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素本身的点击。
2.被动和。预防不能一起使用。
不要用。被动的。预防，因为。prevent将被忽略，浏览器可能会向您显示警告。记住，passive会告诉浏览器你不想屏蔽事件的默认行为。
以上是边肖介绍的使用Vue.js事件修改器的教程。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对我们网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。