vue事件监听06

最新推荐文章于 2021-07-09 16:00:55 发布

钢铁直女.

最新推荐文章于 2021-07-09 16:00:55 发布

阅读量113

点赞数

分类专栏： Vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_44836362/article/details/114522305

版权

Vue学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

vue事件监听

v-on

v-on传参问题

方法中只有一个形参，调用方法时
- 传一个参数
  方法中的形参值为传入的参数值
- 不传参数（不省略括号）
  方法中的形参为undefined
- 不传参数（省略括号）
  vue默认将浏览器生成的event事件当做对象传入到方法中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1v-on参数问题</title>
</head>
<body>
  <div id="info">
<!--    方法中的形参值为传入的参数值-->
    <button @click="btnClick(123)">按钮1</button>
<!--    方法中的形参为undefined-->
    <button @click="btnClick()">按钮2</button>
<!--    vue默认将浏览器生成的event事件当做对象传入到方法中-->
    <button @click="btnClick">按钮3</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const info = new Vue({
      el : "#info",
      data : {
      },
      methods : {
        btnClick(num){
          console.log(num);
        }
      }
    })
  </script>
</body>
</html>

方法中有多个形参（以两个参数为例）
- 传两个参数
  方法中的形参值为传入的参数值
- 传一个参数
  第一个形参值为传入的参数值，第二个形参值为undefined
- 不传参数（不省略括号）
  两个形参值都为undefined
- 不传参数（省略括号）
  vue默认将浏览器生成的event事件当做对象传入到方法中，赋给第一个形参，之后的参数都为undefined
- 补充：传多个参数的同时想把event事件传入到方法中，则event要用$event传递

在这里插入图片描述

v-on修饰符

stop：阻止事件冒泡
补充：
事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件。
事件冒泡：是自下而上的去触发事件。

xxx.addEventListener("click", function() {
        ……
    }, true/false);

绑定事件方法的第三个参数是控制事件触发顺序是否为事件捕获。true：事件捕获，false（默认）：事件冒泡。故，当你对一个dom节点触发事件时，若外层的节点也设置了相应的事件函数，就会使外层的节点也触发自己的事件函数。

测试事件冒泡，事件捕获
在这里插入图片描述
全为false，点击div：只执行div；点击"点一下"按钮：先执行btn再执行div（事件冒泡，自下而上）

全为true，点击div：只执行div；点击"点一下"按钮：先执行div再执行btn（事件捕获，自上而下）

测试代码

<!--事件捕获，事件冒泡-->
<div id="divdiv">
  divdivdivdiv
  <button id="btnbtn">点一下</button>
</div>
<script>
  // 全为false，即事件冒泡
  document.getElementById('divdiv').addEventListener("click",function () {
    console.log("false:执行divdiv");
  },false)
  document.getElementById('btnbtn').addEventListener("click",function () {
    console.log("false:执行btnbtn");
  },false)

  // 全为true，即事件捕获
  document.getElementById("divdiv").addEventListener("click",function (){
    console.log("true:执行divdiv");
  },true)
  document.getElementById("btnbtn").addEventListener("click",function () {
    console.log("true:执行btnbtn");
  },true)
</script>

测试v-on的stop修饰符
在这里插入图片描述
点击按钮1

点击按钮2，阻止了事件冒泡

点击divdivdivdiv

PS：测试代码在后面

prevent：阻止目标元素的默认行为（元素必须有默认行为才能被取消）。如：

<a></a>标签的默认行为是点击后自动跳转到指定页面
<input type="submit">标签的默认行为是点击后自动提交
……

在这里插入图片描述

点击"CSDN(无prevent)"

点击"提交(无prevent)"

点击prevent修饰的，默认行为被阻止

PS：测试代码在后面

{keyCode.key}：键盘上特定键被触发时调用
navicat：监听组件根元素的原生事件
（学了组件之后再补充）
once：只调用一次

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>2v-on修饰符</title>
</head>
<body>
<!--&lt;!&ndash;事件捕获，事件冒泡&ndash;&gt;-->
<!--<div id="divdiv">-->
<!--  divdivdivdiv-->
<!--  <button id="btnbtn">点一下</button>-->
<!--</div>-->
<!--<script>-->
<!--  // // 全为false，即事件冒泡-->
<!--  // document.getElementById('divdiv').addEventListener("click",function () {-->
<!--  //   console.log("false:执行divdiv");-->
<!--  // },false)-->
<!--  // document.getElementById('btnbtn').addEventListener("click",function () {-->
<!--  //   console.log("false:执行btnbtn");-->
<!--  // },false)-->

<!--  // 全为true，即事件捕获-->
<!--  document.getElementById("divdiv").addEventListener("click",function (){-->
<!--    console.log("true:执行divdiv");-->
<!--  },true)-->
<!--  document.getElementById("btnbtn").addEventListener("click",function () {-->
<!--    console.log("true:执行btnbtn");-->
<!--  },true)-->
<!--</script>-->

  <div id="info">
<!--    stop修饰符，阻止冒泡事件-->
    <div @click="divClick">
      divdivdivdiv
      <button @click="btn1Click">按钮1</button>
      <button @click.stop="btn2Click">按钮2</button>
    </div>

<!--    prevent修饰符，-->
<!--    无prevent修饰-->
    <div>
      <a href="https://www.csdn.net/" @click="aClick">CSDN(无prevent)</a>
      <form action="xxx">
        <input type="text" value="tell">
        <input type="submit" value="提交(无prevent)" @click="subClick">
      </form>
    </div>
<!--    有prevent修饰-->
    <div>
      <a href="https://www.csdn.net/" @click.prevent="aClick">CSDN</a>
      <form action="xxx">
        <input type="text" value="tell">
        <input type="submit" value="提交" @click.prevent="subClick">
      </form>
    </div>

<!--    {keyCode|key}修饰符-->
    <div>
      <input type="text" @keydown.space="onSpace">
      <input type="text" @keyup.h="onH">
    </div>
<!--    once修饰符-->
    <button @click.once="onceClick">once修饰符</button>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const info = new Vue({
      el : "#info",
      data : {
        message : "vue yyds"
      },
      methods : {
        // stop修饰符
        btn1Click(){
          console.log("btn1Clicked");
        },
        btn2Click(){
          console.log("btn2Clicked");
        },
        divClick(){
          console.log("divClicked");
        },

        // prevent修饰符
        aClick(){
          console.log("阻止a标签默认的跳转行为");
        },
        subClick(){
          console.log("阻止submit默认的提交行为");
        },
        <!--    {keyCode|key}修饰符-->
        onSpace(){
          console.log("keydown.space");
        },
        onH(){
          console.log("keyup.h");
        },
        // once修饰符
        onceClick(){
          console.log("once只调用一次");
        }
      }
    })
  </script>
</body>
</html>