vue之事件处理

Posted 2022-07-11 shenjianping

一、事件处理方法

1、格式

• 完整格式：v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)"

　　　　  缩写格式：@事件名="函数名" 或 @事件名="函数名(参数……)"

　　　　 注意：@后面没有冒号

• event ：函数中的默认形参，代表原生 DOM 事件

　　　　  当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入作用：用于监听 DOM 事件

2、实例

<div id="app">
    
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">无参数事件</button>
    <button v-on:click="greet2(‘hellogreet2‘)">有参数事件</button>
    <button v-on:click="greet3">无参数event</button>
    <button v-on:click="greet4(‘hello‘,$event)">有参数event</button>

</div>

<script>

  var vm = new Vue(
      el: ‘#app‘,
      data: ,

      // 在 `methods` 对象中定义方法
      methods: 

        greet: function () 
          alert("无参数")
        ,

        greet2: function (arg) 
          console.log(arg)
          alert(arg)
        ,

        // `event` 是默认原生 DOM 事件
        greet3: function (event) 
          console.log(event.target.tagName)
          console.log(event.target.innerhtml)

        ,
        // `event` 是默认原生 DOM 事件，如果有多个参数，event要以$event传入
        greet4: function (arg, event) 
          console.log(arg)
          console.log(event.target.tagName)
          console.log(event.target.innerHTML)
        

      

    
  )


</script>

二、事件修饰符

1、.stop  阻止单击事件继续传播  event.stopPropagation()

<div id="app">

    <div @click="doThis">
        <!--点击后会调用doWhat再调用doThis-->
        <button @click="doWhat">单击事件会继续传播</button>
    </div>

    <!-- 阻止单击事件继续传播，-->
    <div @click="doThis">
        <!--点击后只调用doWhat-->
        <button @click.stop="doWhat">阻止单击事件会继续传播</button>
    </div>

</div>

 // 在 `methods` 对象中定义方法
      methods: 

        doThis: function () 
          alert("doThis....");
        ,
        doWhat:function()
          alert("doWhat....");
        ,

2、.prevent  阻止事件默认行为  event.preventDefault()

<div id="app">

    <!-- 阻止事件默认行为 -->
    <a href="http://www.baidu.com" @click.prevent="stopDefault">百度</a>

</div>

      // 在 `methods` 对象中定义方法
      methods: 
        stopDefault() 
          alert("href默认跳转被阻止....")
        ,

3、.once  点击事件将只会触发一次

<div id="app">

    <!-- 点击事件将只会触发一次 -->
    <button @click.once="doOnce">点击事件将只会触发一次</button>

</div>

// 在 `methods` 对象中定义方法
      methods: 
        doOnce() 
          alert("只触发一次")
        ,

4、.self只会触发自己范围内的事件，不会包含子元素

    <div @click.self="outer" style="width: 200px;height:100px;background: antiquewhite">　　
        　　　　
        <button @click.stop="inner">inner</button>
        　　　　
    </div>

 // 在 `methods` 对象中定义方法
      methods: 
        outer() 
          alert("outer")
        ,

        inner() 
          alert("inner")
        ,

5、.capture 捕获事件

嵌套多层父子关系，所有父子层都有点击事件，点击子节点，就会触发从外至内  父节点-》子节点的点击事件

    <div class="outeer" @click.capture="outer" style="width: 200px;height:100px;background: antiquewhite">
        　　　　 　　　　　　
        <button @click.capture="inner">inner</button>
        　　　　
    </div>

      // 在 `methods` 对象中定义方法
      methods: 
        outer() 
          alert("outer")
        ,

        inner() 
          alert("inner")
        ,

先出现：

再出现：

三、按键修饰符

1、格式

• 格式：v-on:keyup.按键名 或 @keyup.按键名
• 常用按键名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

2、实例

<div id="app">

    <label>
        <!--进入输入框按回车时调用keyEnter-->
        <input @keyup.enter="keyEnter">
    </label>

</div>

      // 在 `methods` 对象中定义方法
      methods: 
        keyEnter()
          alert("enter...")
        ,

四、鼠标修饰符

1、使用方式

.left
.right
.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

• @click.left="事件名"   点击鼠标左键触发事件
• @click.right="事件名"  点击鼠标右键触发事件
• @click.middle="事件名" 点击鼠标滚轮触发事件

2、实例

<div id="app">

    <div @click.left="mouseLeft">点击鼠标左键触发事件</div>

</div>

 // 在 `methods` 对象中定义方法
      methods: 
        mouseLeft()
          alert("点击鼠标左键触发事件")
        ,

详情：https://cn.vuejs.org/v2/guide/events.html