@focus @input @click 事件区别-前端-E先生的博客

作用

1.vue 获取 input 获取焦点事件 @focus

获取input 焦点事件（失去焦点，再次获取焦点时触发）

<el-input @focus='getFocus'> </el-input>
getFocus() {
},

2.@input 用于监听事件只要输入的值变化了就会触发input

<el-input @input='atInput'> </el-input>

3. @click 点击事件点击触发

change	用户确认选定的值时触发
blur	当 input 失去焦点时触发
focus	当 input 获得焦点时触发
input	用于监听事件只要输入的值变化了就会触发input

图片

源码

  <el-time-picker
   v-model="autoTime"
   format="HH:mm"
   value-format="HH:mm"
   :picker-options="{
    selectableRange: '00:00:00 - 23:59:00'
   }"
   placeholder="选择时间"
   @change="changeAutoConfig"
   @blue="changeAutoConfig"
   @focus="changeAutoConfig">
  </el-time-picker>

<template>
  <div>
    <!-- @blur 当元素失去焦点时触发blur事件-->
    <div>
      <input type="text" placeholder="请输入内容" @blur="blur" @change="change" @focus="focus" @input="input"/>
    </div>
 
  </div>
</template>
 
<script>
    export default {
      methods:{
        blur(){
          console.log("blur事件被执行了")
        },
        change(){
              console.log("change事件被执行了")
            },
            focus(){
              console.log("focus事件被执行了")
            },
            input(){
              console.log("input事件被执行了")
            },
      }
    }
</script>

本文来自E先生的博客，如若转载，请注明出处：https://www.javajz.cn