扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
如何在Vue.js中使用事件修饰符？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
成都创新互联公司是一家专业从事做网站、网站建设的网络公司。作为专业的建站公司,成都创新互联公司依托的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、成都营销网站建设及网站设计开发服务！
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 的点击事件，根据事件的冒泡机制我们可以得知，当我们点击了按钮之后，会扩散到父元素，从而触发父元素的点击事件，具体的结果也如下图所示：