$event对象总结

时间：2025-01-21 07:03:39

在 Vue 中，v-on 可以用来绑定事件处理函数，通过 $event 参数可以访问原生事件对象，其中包含了事件发生时的所有信息和参数，方便我们对事件进行处理和调用，下面详细讲解 $event 对象的相关信息，并给出 10 个常见的使用示例：

$event 对象的属性：

  • target：触发事件的 DOM 元素；
  • currentTarget：绑定事件处理函数的 DOM 元素（事件冒泡到该元素时触发）；
  • type：事件类型；
  • keyCode、key：由按键事件（如 keyup、keydown）触发时的按键的键码和键名；
  • button、buttons：由鼠标事件（如 click、mousedown、mouseup）触发时的鼠标按钮的标识码和状态码；
  • clientX、clientY、pageX、pageY、screenX、screenY：由鼠标事件触发时的鼠标相对于浏览器窗口、文档、屏幕的坐标；
  • preventDefault()：阻止默认行为；
  • stopPropagation()：停止事件冒泡；
  • shiftKey、ctrlKey、altKey、metaKey：由按键事件触发时的 Shift、Ctrl、Alt、Meta 键的状态。
    10 个常见的 $event 使用示例：

监听 input 输入框的值变化并限制输入非数字字符

<template>
  <div>
    <input type="text" v-model="value" v-on:input="handleInput($event)" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods: {
    handleInput(event) {
      this.value = event.target.value.replace(/[^\d]/g, "");
    },
  },
};
</script>

监听 keydown 事件并判断是否按下回车键

<template>
  <div v-on:keydown.enter="handleEnter"></div>
</template>

<script>
export default {
  methods: {
    handleEnter(event) {
      console.log("按下了回车键");
    },
  },
};
</script>

监听 button 按钮的点击并获取鼠标点击坐标

<template>
  <div>
    <button v-on:click="handleClick">Click me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(`(${event.pageX}, ${event.pageY})`);
    },
  },
};
</script>

监听 a 标签的点击并阻止默认行为

<template>
  <div>
    <a href="" v-on:click.prevent="handleClick">Link</a>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.target.href);
    },
  },
};
</script>

监听鼠标移动并实时改变元素位置

<template>
  <div v-on:mousedown="handleMouseDown" v-on:mousemove="handleMouseMove" v-on:mouseup="handleMouseUp"></div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      translateX: 0,
      translateY: 0,
    };
  },
  methods: {
    handleMouseDown(event) {
      this.isDragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
    },
    handleMouseMove(event) {
      if (this.isDragging) {
        const dx = event.clientX - this.startX;
        const dy = event.clientY - this.startY;
        this.translateX += dx;
        this.translateY += dy;
        event.target.style.transform = `translate(${this.translateX}px, ${this.translateY}px)`;
        this.startX = event.clientX;
        this.startY = event.clientY;
      }
    },
    handleMouseUp(event) {
      this.isDragging = false;
    },
  },
};
</script>

监听 touchmove 事件并实时改变元素位置

<template>
  <div v-on:touchstart="handleTouchStart" v-on:touchmove="handleTouchMove" v-on:touchend="handleTouchEnd"></div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      startY: 0,
      translateX: 0,
      translateY: 0,
    };
  },
  methods: {
    handleTouchStart(event) {
      this.isDragging = true;
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
    },
    handleTouchMove(event) {
      if (this.isDragging) {
        const dx = event.touches[0].clientX - this.startX;
        const dy = event.touches[0].clientY - this.startY;
        this.translateX += dx;
        this.translateY += dy;
        event.target.style.transform = `translate(${this.translateX}px, ${this.translateY}px)`;
        this.startX = event.touches[0].clientX;
        this.startY = event.touches[0].clientY;
      }
    },
    handleTouchEnd(event) {
      this.isDragging = false;
    },
  },
};
</script>

监听 scroll 事件并实时更新滚动进度

<template>
  <div ref="scrollContainer" v-on:scroll="handleScroll">
    <div ref="scrollContent"></div>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll(event) {
      const scrollContainer = this.$refs.scrollContainer;
      const scrollContent = this.$refs.scrollContent;
      const scrollTop = scrollContainer.scrollTop;
      const scrollHeight = scrollContainer.scrollHeight;
      const clientHeight = scrollContainer.clientHeight;
      const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100;
      console.log(`滚动进度：${scrollPercent.toFixed(2)}%`);
    },
  },
};
</script>

监听 input 输入框的 focus 和 blur 事件并切换类名

<template>
  <div>
    <input type="text" v-model="value" v-on:focus="handleFocus" v-on:blur="handleBlur" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      hasFocus: false,
    };
  },
  methods: {
    handleFocus(event) {
      this.hasFocus = true;
    },
    handleBlur(event) {
      this.hasFocus = false;
    },
  },
  computed: {
    inputClass() {
      return {
        "input-with-focus": this.hasFocus,
      };
    },
  },
};
</script>

<style>
.input-with-focus {
  border-color: red;
}
</style>

监听 form 表单的 submit 事件并发送数据

<template>
  <form v-on:submit.prevent="handleSubmit">
    <input type="text" v-model="username" />
    <input type="password" v-model="password" />
    <button type="submit">Log In</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    handleSubmit(event) {
      const data = {
        username: this.username,
        password: this.password,
      };
      console.log(data);
    },
  },
};
</script>

监听 window 的 resize 事件并实时更新元素宽度

<template>
  <div ref="element"></div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize(event) {
      const element = this.$refs.element;
      element.style.width = `${window.innerWidth}px`;
    },
  },
};
</script>

相关文章