vue事件

系统管理员 2023-06-29 10:53 103阅读 0赞

声明**：** 本文主要是照着官网教学自己敲了一遍，纯属动手练习，没什么技术含量。

事件：

事件监听(事件绑定)：使用v-on:监听事件，v-on:可简写为@。

示例：

  • html中的代码：
    在这里插入图片描述
  • script中的代码：
    在这里插入图片描述
  • 效果演示：
    在这里插入图片描述

事件的处理：简单逻辑可以直接写在指令中，复杂一点的逻辑需要写在方法里。

示例：

  • html中的代码：
    在这里插入图片描述
  • script中的代码：
    在这里插入图片描述
  • 效果演示：
    在这里插入图片描述

事件触发方法时的参数传递：可以传递普通参数，也可以传递事件对象$event。

示例：

  • html中的代码：
    在这里插入图片描述
  • script中的代码：
    在这里插入图片描述
  • 效果演示：
    在这里插入图片描述

  • 注：事件对象包含的信息非常多，下面给出一个事件的组成结构(部分节点未作展开)：
    在这里插入图片描述

    • 注：我们除了才可以从事件对象中获取信息外，我们还可以使用事件对象调用方法。

事件修饰符：Vue认为方法应只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。所以引入了事件修饰符来处理DOM事件。

事件修饰符及说明































事件修饰符 具体说明
.stop 阻止事件冒泡。
举例说明：若元素A中有元素B，元素B中有元素C；且A元素有点击事件methodA,B元素有点击事件methodB,C元素有点击事件methodC;正常来讲，点击C元素，那么会触发methodC,methodC的逻辑处理完后会触发methodB，methodB的逻辑处理完后会触发methodA，这就是事件冒泡。如果使用了.stop，那么冒泡会在当前方法执行完毕后结束，不会再往上冒泡了。
.capture 调整冒泡顺序；将冒泡中的(启用了.capture的事件)节点的执行顺序提升到最前面。
注：若冒泡的各节点中，同时存在多个启用了.capture的节点，那么会优先执行范围较大的那个capture节点，然后执行剩下的范围较小的那个capture节点，然后执行剩下的范围较小的那个普通节点，然后执行剩下的范围较大的那个普通节点。
举例说明：若正常的冒泡顺序为C-> B-> A。假设在B处加了.capture，那么当触发C时，冒泡顺序就变为了B-> C-> A。假设在C处和A处都加了.capture，那么当触发C时，冒泡顺序就变为了A-> C-> B。
.prevent .prevent使标签本身的默认方法不执行。 .passive使浏览器不检查js中是否设置了event.preventDefault()，直接认定需要执行默认方法。
注：所谓默认事件，指的是html标签本身自带的事件，如：<a href=“…”>标签中，点击跳转至href指向的地址，就是a标签的默认事件；再如： 表单<form …><button type=”submit” …></form>中的 submit，点击跳转至form指向的地址，就是表单的默认事件。
注：.prevent等价于在js中调用事件对象的preventDefault方法，达到执行完js逻辑后，不执行默认事件的目的。
注：对于是否需要执行默认事件，浏览器需要先判断js中是否有执行事件对象的preventDefault方法，如果有执行的话，那么就不会走默认事件，没有执行的话，会走默认事件。而.passive的功能是直接告诉浏览器(压根儿不需要检查js中是否有执行事件对象的preventDefault方法，)需要走默认事件。
注：.passive的好处是，对于一些会被频繁触发的事件(如：滚动事件等)，不需要浏览器频繁的作preventDefault检查，进而提升性能。
.passive
.self 当且仅当事件起始于自身时，才触发。
注：当里面的事件往外冒泡时，是不会触发带有.self的事件的，因为事件并不起始于自身。
.once 事件只会触发一下。

示例：

  • 代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>事件修饰符</title>
    10.     <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    11.     <script> window.onload = function () { // 允许chrome的扩展程序【vue-devtools】进行调试 // 建议: 开发时，设置为true; 生产时, 设置为false Vue.config.devtools = true // ****************************************************** .stop ****************************************************** new Vue( { el: '#myId', methods: { // 自定义形参名即可 myAlert(param) { alert(param); }, myAlert2(abc) { this.$options.methods.myAlert(abc); } } } ); } </script>
    12. </head>
    14. <body>
    15.     <span id='myId'>
    17.         <!-- ****************************************************** .stop ****************************************************** -->
    18.         <h3>事件修饰符之.stop</h3>
    19.         <b>说明：divA中有divB,divB中有button</b><br />
    20.         <div @click="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
    21.             <div @click="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
    22.                 <button @click="myAlert('我是最里面的button的事件')">使用事件修饰符.stop之前</button>
    23.             </div>
    24.         </div>
    26.         <br />
    28.         <div @click="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
    29.             <div @click.stop="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
    30.                 <button @click="myAlert2('我是最里面的button的事件')">divB使用@click.stop之后</button>
    31.             </div>
    32.         </div>
    34.         <hr />
    36.         <!-- ****************************************************** .capture ****************************************************** -->
    37.         <h3>事件修饰符之.capture</h3>
    38.         <b>说明：divA中有divB,divB中有button</b><br />
    39.         <div @click="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
    40.             <div @click="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
    41.                 <button @click="myAlert('我是最里面的button的事件')">使用事件修饰符.capture之前</button>
    42.             </div>
    43.         </div>
    45.         <br />
    47.         <div @click="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
    48.             <div @click.capture="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
    49.                 <button @click="myAlert2('我是最里面的button的事件')">divB使用@click.capture之后</button>
    50.             </div>
    51.         </div>
    53.         <br />
    55.         <div @click.capture="myAlert2('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
    56.             <div @click="myAlert2('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
    57.                 <button @click.capture="myAlert2('我是最里面的button的事件')">divA和button都使用了@click.capture之后</button>
    58.             </div>
    59.         </div>
    61.         <hr />
    63.         <!-- ****************************************************** .prevent与.passive ****************************************************** -->
    64.         <h3>事件修饰符之.prevent与.passive</h3>
    65.         <!-- 执行完myAlert方法对应的逻辑后，会 执行a标签的默认方法跳转至http://www.baidu.com -->
    66.         <a href="http://www.baidu.com" target="blank" @click="myAlert('未加.prevent或.passive')">未加.prevent或.passive
    67.             点击跳转</a>
    68.         <br /><br />
    70.         <!-- 执行完myAlert方法对应的逻辑后，不会 执行a标签的默认方法跳转至http://www.baidu.com -->
    71.         <a href="http://www.baidu.com" target="blank" @click.prevent="myAlert('加了.prevent')">@click.prevent点击跳转</a>
    72.         <br /><br />
    73.         <!-- 执行完methodOne方法对应的逻辑后，会 执行a标签的默认方法跳转至http://www.baidu.com 。 即便methodOne方法中有e.preventDefault(); -->
    74.         <a href="http://www.baidu.com" target="blank" @click.passive="myAlert('加了.passive')">@click.passive点击跳转</a>
    76.         <hr />
  1.             <!-- ****************************************************** .self ****************************************************** -->
  2.             <h3>事件修饰符之.self</h3>
  3.             <b>说明：divA中有divB,divB中有button</b><br />
  4.             <div @click="myAlert('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
  5.                 <div @click="myAlert('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
  6.                     <button @click="myAlert('我是最里面的button的事件')">使用事件修饰符.self之前</button>
  7.                 </div>
  8.             </div>
  10.             <br />
  12.             <div @click.self="myAlert('我是divA的事件')" style="width: 400px; height: 50px; background-color: green;">
  13.                 <div @click="myAlert('我是divB的事件')" style="width: 300px; height: 40px; background-color: yellow;">
  14.                     <button @click="myAlert('我是最里面的button的事件')">divA使用@click.self之后</button>
  15.                 </div>
  16.             </div>
  18.             <hr />
  20.             <!-- ****************************************************** .once ****************************************************** -->
  21.             <h3>事件修饰符之.once</h3>
  22.             <button @click="myAlert('我弹出来了~')">(没加once的)@click</button>
  23.             <br /> <br />
  24.             <button @click.once="myAlert('我弹出来了~')">@click.once</button>
  25.             <hr />
  26.         </span id='myId'>
  27.     </body>
  29.     </html>
  • 效果演示：
    在这里插入图片描述

按键修饰符：

  1.     在监听事件时，我们常常会用到类似于【当按下enter键时触发事件】这样的需求，在以往js中，需要主动逻辑中进行判断，如：

在这里插入图片描述 Vue的按键修饰符为我们简化了上述操作，直接使用v-on:xxx1.xxx2即可，其中xxx1为按键事件，xxx2为键码或键码别名，如v-on:keydown.13或v-on:keydown.enter就表示：当且仅当按下回车键时才触发keydown方法。

注：Vue2.x为我们内置了一些常用的键码别名：
在这里插入图片描述
注：有一些按键(.esc 以及所有的方向键)在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

注：如果上述别名不满足你的需求，那么也可通过Vue.config.keyCodes.别名 = 键码来自定义按键修饰符别名。
示例：

  • html中的代码：
    在这里插入图片描述
  • script中的代码：
    在这里插入图片描述
  • 效果演示：
    在这里插入图片描述

提示**： Vue还有一些系统修饰键等，可用于控制组合触发事件(如：按住ctrl的同时点击鼠标左键进行事件触发就属于组合触发事件)，这里就不一一示例了，可详见[vue官网**]vue。

^_^ 如有不当之处，欢迎指正

^_^ 学习整理自
https://cn.vuejs.org/v2/guide/events.html
https://cn.vuejs.org/v2/api/

^_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng

发表评论

表情：
评论列表 （有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue事件

    声明： 本文主要是照着官网教学自己敲了一遍，纯属动手练习，没什么技术含量。 -------------------- 事件： 事件监听(事件绑定)：使用v-on:监

    系统管理员系统管理员/ 0 赞/ 104 阅读

    相关 vue @scroll 事件

    vue 的 scroll 事件 做首页按需加载的时候  滚动条滚动到底部之后加载 由于如果绑定在window上，那么路由切换之后，事件依然会被触发，所以在div元素上绑定

    一时失言乱红尘一时失言乱红尘/ 0 赞/ 313 阅读