• 事件处理、事件修饰符（详细）

    目录

    一、事件处理

    二、事件修饰符

        1.prevent 阻止默认事件（常用）

        2.stop：阻止事件冒泡（常用）

        3.once：事件只触发一次（常用）

      

        4.capture：使用事件的捕获模式

        5.self：只有event.target是当前操作的元素时才出发的事件

        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

    三、键盘事件

    事例

    ​编辑

    1.Vue中最常用的案件别名：

    一、事件处理

    事件的基本使用：

          使用v-on：xxx 或 @xxx绑定事件，其中xxx是事件名

          事件的回调需要配置在methods对象中，最终会在vm上

          methods中配置的函数，不用箭头函数！否则this就不是vm了

         methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

         @click="demo" 和 @click=“demo（$event）”效果一致，但后者可以传入参数

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <h2>欢迎来到{{name}}学习h2>
    12.             
    13.             <button v-on:click="showInfo1">点我提示信息1(不传参)button>
    14.             
    15.             <button @click="showInfo2($event,66)">点我提示信息2（传参）button>
    16.         div>
    17.  
    18.  
    19.         <script type="text/javascript">
    20.             //阻止vue在启动时生成生产提示
    21.             Vue.config.productionTip=false 
    22.  
    23.             new Vue({
    24.                 el:'#root',
    25.                 data:{
    26.                     name:'尚硅谷'
    27.                 },
    28.                 methods:{
    29.                     showInfo1(event){
    30.                         // 打印标签中的文字
    31.                         console.log(event.target.innerText)
    32.                         alert('同学你好!')
    33.                     },
    34.                     showInfo2(event,number){
    35.                         console.log(event,number)
    36.                         alert('同学你好!!')
    37.                         
    38.                     }
    39.                 }
    40.             })
    41.         script>   
    42.     body>
    43. html>
    44.

    二、事件修饰符

       1.prevent 阻止默认事件（常用）

    1.         <div id="root">
    2.             <h2>欢迎来到{{name}}学习h2>
    3.             <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息a>
    4.         div>

       在我们之前学过的标签中，如果我们在页面中点击a标签所呈现出来的效果，我们的页面立马会跳转到href页面，但是我们可以阻止其页面跳转

     出现下面这个页面，当我们点击确定之后，发现页面并没有跳转

      2.stop：阻止事件冒泡（常用）

    1.             
    2.             <div class="demo1" @click="showInfo">
    3.                 <button @click.stop="showInfo">点我提示信息button>
    4.             div>

       正常情况下，当我们点击按钮的时候会出现两次弹窗（就我们上面这个代码而言），但是在实际操作中并没有出现两次弹窗（冒泡）  ，原因就是@click.stop。当我们使用时，就阻止事件冒泡，我们点击按钮时，仅仅会出发按钮的弹窗，并不会触发div的弹窗。

        3.once：事件只触发一次（常用）

    1.  
    2.             
    3.             <button @click.once="showInfo">点我提示信息button>

              我们单击按钮的时候，通常情况下不论我们点击几次，都会出现弹框，但是当我们加了@click.once之后，这个按钮只能单击一次，第二次及其以后不再出现弹窗

      

      4.capture：使用事件的捕获模式

    1.         
    2.             <div class="box1" @click.capture="shwoMsg(1)">
    3.                 div1
    4.                 <div class="box2" @click="showMsg(2)">
    5.                     div2
    6.                 div>
    7.             div>

         正常情况下，  是先捕获再冒泡，例如上面正常的代码中先捕获box1再捕获box2，之后box2冒泡再box1冒泡，控制台上先输出2再输出1

       但是我们添加了@click.capture之后，我们会发现当我们在捕获box1的时候，也完成了box1的冒泡，最终控制台上的输出内容是先1再2

      5.self：只有event.target是当前操作的元素时才出发的事件

    1.     <div class="demo1" @click.self="showInfo">
    2.          <button @click="showInfo">点我提示信息button>
    3.      div>

      正常情况下不加.self的时候，当我们单击按钮，会打印出两个

      当我们添加.self的，我们再点击按钮，只会出现一个，那就是按钮所绑定的函数运行，上面那个div便不会再运行（这个.self也可以说变相的阻止了冒泡）

        6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

    下面这个，只要滚动条动，就能触发函数

    下面这个，只要鼠标的滚轮动，就能触发函数

    触发流程：先滚动滚轮-->触发demo函数--->demo函数完成后再触发滚动条滚动效果

    在我们下面这个代码后加了passive，当我们的demo函数没有执行完时，滚轮也会滑动

    三、键盘事件

    事例

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <h2>欢迎来到{{name}}学习h2>
    12.             
    13.             <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">input>
    14.         div>
    15.  
    16.         <script type="text/javascript">
    17.             //阻止vue在启动时生成生产提示
    18.             Vue.config.productionTip=false
    19.             
    20.             new Vue({
    21.                 el:'#root',
    22.                 data:{
    23.                     name:'尚硅谷'
    24.                 },
    25.                 methods:{
    26.                     showInfo(e){
    27.                         // 为了不是每一个案件都能触发，我们规定只有回车才能触发
    28.                         // 回车的键盘码是13，当不是13的时候，就结束函数，不运行console
    29.                         // if(e.keyCode!==13)
    30.                         // return
    31.                         //但是我们一般不使用这种方式了 
    32.                         console.log(e.target.value)
    33.                     }
    34.                 }
    35.             })
    36.  
    37.         script>   
    38.     body>
    39. html>

    1.Vue中最常用的案件别名：

          回车  enter

          删除   delete（捕获“删除delete”和“退格backspace”键）

          退出    esc

          空格    space

          换行     tab （特殊，必须配合keydown去使用，@keydown.tab）

          上        up

          下        down

           左        left

           右        right

    Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转化为kebab-case（短横线命名，两个不同的单词之间用短横线连接）

    系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）

          ①配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

          ②配合keydown使用：正常触发事件

  • 相关阅读:
    Centos内网服务器搭建NTP时间同步服务
    【一起读技术书】为什么开始，怎么开始，我们一起开始
    【Java设计模式】第6讲--代理模式
    纯纯小白~学习python记录~用Django创建第一个项目
    8应用服务与领域服务
    Linux下安装部署Tomcat8_图解_保姆级教程
    Python图像处理丨认识图像锐化和边缘提取的4个算子
    SQLMAP注入参数-其他参数介绍
    知识蒸馏（Knowledge Distillation）
    【无标题】
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126571549