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

一、前言

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

仓库地址：https://github。com/lanes ra 712/vu etrial/tree/master/chapter 01-菜鸟/指令

二、干货收集

1.DOM事件流

有时，当我们需要在页面上完成一些功能时，需要使用v-on指令来监控需要实现功能的页面元素上的DOM事件。在html4时代，当浏览器决定页面的哪个部分会有特定的事件时，IE和网景的开发团队提出了两个相反的概念。这种差异也使得我们在编写代码时需要考虑如何处理DOM的事件细节。为了解决这个问题，vue为我们提供了一个事件修饰符，使得我们的方法只有纯数据逻辑，而没有处理DOM事件细节。

涉及到一些概念：

a)事件：由用户设置或由浏览器本身执行的动作。例如点击、加载、鼠标悬停、更改等。

b)事件处理程序：为实现事件功能而构建的函数方法，也可以称为事件监听器

C)DOM事件流：描述从页面接收事件的顺序，也可以理解为事件在页面中传播的顺序

DOM事件流分为三个阶段：事件捕获阶段、目标阶段和事件冒泡阶段。

a)事件捕捉):当鼠标点击或触发DOM事件时，浏览器会从根节点由外向内传播事件，即点击一个子元素，如果父元素通过事件捕捉注册了对应的事件，则会先触发父元素绑定的事件。

b)事件bubbing):当鼠标点击或触发DOM事件时，浏览器会将事件从根节点由内向外传播，即点击子元素时，会先触发子元素绑定的事件，并逐渐扩散到父元素绑定的事件。

前面提到的IE和网景的开发团队提出了两个相反的事件流概念。IE采用事件冒泡流，而标准浏览器的事件流是事件捕获流。因此，为了与IE兼容，我们需要改变一些编写方法。

2.事件修饰符

a)。停止：防止事件冒泡

在下面的例子中，我们分别创建了一个按钮点击事件和一个外部div点击事件。根据事件的冒泡机制，我们可以知道当我们点击按钮时，它会扩散到父元素，从而触发父元素的click事件。具体结果也如下图所示：

Div id=' app ' class=' div default ' div id=' div 1 ' @ click=' div handlerclick '输入类型=' button '值=' click ' @ click=' btnHandlerClick '/div/div script var VM=new vue({ El : ' # app '，data: {}，methods : { div handlerclick(){ alert('我是div的click事件！')}，btnHandlerClick() {alert('我是button ')} })；/script此时，如果我们不想让事件冒泡，可以使用Vue内置的修饰符，方便地防止事件冒泡。因为我们在点击按钮后会冒泡，所以我们只需要在按钮的点击事件中添加stop修饰符。示例代码如下。

输入类型='button '值=' click ' @ click . stop=' btnHandlerClick '/

b)。阻止：阻止默认事件

很容易理解如何预防默认事件。有些标签有事件，比如A标签的跳转，表单中提交按钮的提交事件等。有时候我们只想执行自己设定的事件。此时，我们需要防止标签的默认事件被执行。我们可以使用preventdefault方法来实现本机js，但是在Vue中，我们只需要使用preventkeyword。

在下面的示例中，我们向A标记添加了一个点击事件。由于A标签本身有一个默认的跳转事件，此时，我们点击后，A标签的默认事件最终会被执行。

A href=' http://www . Baidu.com ' @ click=' ahahandlercick '链接跳转/A script var VM=new vue({ El : ' # app }，data: {}，methods 3360 { ahahandlercick(){ alert('我是A tag的点击事件')/script

在Vue中，当我们想要阻塞一个元素的默认事件时，我们只需要在绑定事件之后使用prevent修饰符，示例代码如下。

a href=' http://www . Baidu.com ' @ click . prevent=' a handler click '链接跳转/a

c)。捕获：添加事件侦听器时使用事件捕获模式

在上面的研究中，我们了解到事件捕获模式和事件冒泡模式是一对相反的事件处理流程。当我们想要将页面元素的事件流更改为事件捕获模式时，我们只需要对父元素的事件使用capture修饰符，这就是上面示例的代码。当我们在div绑定的click事件上使用capture修饰符时，我们首先单击按钮来触发最外层div的事件。

div id=' app ' class=' div default ' div id=' div 1 ' @ click . capure=' div handlerclick '输入类型=' button '值=' click ' @ click=' btnhandrclick '//div/div

d)。self:仅当event.target是当前元素本身时触发处理函数(例如，事件触发器不是由子元素冒泡引起的)

在上面的例子中，我们为div绑定了一个click事件，但是我们的初衷可能是我们点击div之后才会触发这个事件，但是实际情况是事件冒泡或者事件抓取会触发这个事件，这和我们的初衷是不一致的。在Vue中，我们可以使用self修饰符来修改事件，这样事件只会在我们想要触发它的时候才会触发。

div id=' app ' class=' div default ' div id=' div 1 ' @ click . self=' div handlerclick '输入类型=' button '值=' click ' @ click=' btnhandrclick '//div/div

e)。一次：事件仅触发一次

当我们只想第一次触发绑定事件时，可以使用once修饰符来修改绑定事件。例如，在下面的代码中，只有第一次单击会触发绑定事件，然后单击不会触发。

输入类型='button '值=' click ' @ click . once=' btnHandlerClick '/

f)。被动：滚动事件的默认行为(即滚动行为)将立即被触发

当页面滚动时，浏览器会在整个事件处理完毕后触发滚动，因为浏览器不知道该事件在其处理程序中是否被调用过event.preventDefault()，被动修饰符用于进一步告诉浏览器该事件的默认行为不会被取消，也就是说，使用被动修饰符意味着绑定的事件永远不会调用event.preventDefault()。

三.摘要

1.使用事件修饰符的顺序非常重要

使用修饰语时，顺序很重要；相应的代码以相同的顺序生成。因此，使用v-: click . prevent . self将阻止所有点击，而v-: click . self . prevent将只阻止对元素本身的点击。

2.被动和预防不能一起使用

不要用。对…被动。预防，因为。阻止将被忽略，浏览器可能会显示警告。记住。passive告诉浏览器，您不想阻止事件的默认行为。

以上是边肖介绍的使用Vue.js事件修饰符的教程，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！