Vue.js 事件处理器

＆白帝＆2024-10-03 11:12

1. 基本用法

在 Vue.js 中，事件处理器可以通过 v-on 指令来绑定。你可以使用简写形式 @ 来简化代码。

javascript 复制代码 
<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了!');
    }
  }
}
</script>

当用户点击按钮时，handleClick 方法会被调用。

2. 传递参数

有时候需要将参数传递给事件处理器，你可以直接在事件处理器中传递参数。

javascript 复制代码 
<template>
  <button @click="handleClick('Hello')">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(message) {
      alert(message);
    }
  }
}
</script>

这里，当按钮被点击时，会弹出传递的字符串 'Hello'。

3. 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

修饰符 功能
.stop 调用 event.stopPropagation()，阻止事件冒泡。
.prevent 调用 event.preventDefault()，阻止默认行为。
.self 只当事件是从该元素自身触发时才执行回调。
.once 确保事件只被触发一次。
.capture 阻止捕获
.left 左键事件
.right 右键事件
.middle 中间滚轮事件

3.1 .stop

.stop 是 Vue.js 中的事件修饰符，用于调用 JavaScript 的 event.stopPropagation()

方法。这意味着当你在一个元素上使用 .stop 修饰符时，点击或触发事件不会继续向上传播到其父元素或祖先元素。

使用场景

  1. 防止父元素事件处理：

在某些情况下，你可能希望子元素的点击事件不影响父元素的事件。例如，当你有一个按钮在一个可点击的区域内时，你可能只想处理按钮的点击，而不想触发父元素的点击事件。

  1. 避免重复处理：

如果你有多个嵌套的元素，并且每个元素都有自己的事件处理方法，使用 .stop 可以确保只有最内层的事件被触发，避免意外的多次触发。

javascript 复制代码 
<template>
  <div @click="parentMethod">
    <button @click.stop="childMethod">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      alert('父元素被点击');
    },
    childMethod() {
      alert('子元素被点击');
    }
  }
}
</script>

行为分析：

  • 如果用户点击按钮，会弹出"子元素被点击"，而不会弹出"父元素被点击"。这是因为 .stop 阻止了事件的冒泡。
  • 如果用户点击 <div> 的其他部分（不点击按钮），则只会触发 parentMethod，弹出"父元素被点击"。

3.2 prevent

在 Vue.js 中，.prevent 是一个事件修饰符，用于调用 JavaScript 的 event.preventDefault()

方法。这个修饰符主要用于防止默认事件的发生，比如表单提交、链接跳转等。

使用场景

  1. 防止表单提交：

当你想要拦截表单的提交行为时，可以使用 .prevent 修饰符。

  1. 控制链接行为：

如果你有一个链接（<a> 标签），并且希望在点击时不导航到链接地址，可以使用 .prevent。

3.3 capture

在 Vue.js 中，.capture 是一个事件修饰符，用于指定事件处理程序的捕获阶段。事件在 DOM

中传播时，会经历两个阶段：捕获阶段和冒泡阶段。使用 .capture 修饰符可以让你在捕获阶段处理事件。

捕获阶段与冒泡阶段

捕获阶段：事件从根节点向目标元素传播。

冒泡阶段：事件从目标元素向根节点传播。

javascript 复制代码 
<template>
  <div @click.capture="handleCapture" class="outer">
    外层容器
    <div @click="handleClick" class="inner">
      内层容器
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleCapture() {
      alert('捕获阶段：外层容器被点击');
    },
    handleClick() {
      alert('冒泡阶段：内层容器被点击');
    }
  }
}
</script>

<style>
.outer {
  padding: 20px;
  background-color: lightblue;
}

.inner {
  padding: 20px;
  background-color: lightcoral;
}
</style>

行为分析：

  • 当用户点击内层 <div> 时，首先会触发 handleCapture，显示"捕获阶段：外层容器被点击"，然后再触发 handleClick，显示"冒泡阶段：内层容器被点击"。
  • 如果没有使用 .capture 修饰符，点击内层 <div> 时只会触发 handleClick。

3.4 self

在 Vue.js 中，.self事件修饰符的确是用于确保事件处理器仅在事件发生在当前元素上时才被调用，而不会响应子元素的事件。这对于避免意外触发父元素的事件处理器非常有用。

javascript 复制代码 
<template>
  <div @click.self="handleDivClick">
    Click here (only this div)
    <button @click="handleButtonClick">Click me (inside button)</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleDivClick() {
      console.log('Div clicked!'); // 只有点击 div 本身时才会执行
    },
    handleButtonClick() {
      console.log('Button clicked!'); // 点击按钮时会执行
    }
  }
}
</script>

行为说明

  • 当你点击空白区域的 div：handleDivClick 方法会被调用，控制台输出 "Div clicked!"。
  • 当你点击按钮：handleDivClick 方法不会被调用，只有 handleButtonClick 被调用，控制台输出 "Button clicked!"。

4 按键修饰符

在 Vue.js 中，按键修饰符是用于处理键盘事件的一种便利方式。你可以通过特定的修饰符来指定响应的键。例如，常用的按键修饰符包括 .enter、.esc、.space 等。以下是一些示例和用法说明。

javascript 复制代码 
<template>
  <div>
    <input
      type="text"
      @keyup.enter="submit"
      @keyup.esc="clearInput"
      @keyup.space.prevent="addSpace"
      v-model="inputValue"
    />
    <p>Input Value: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    submit() {
      alert(`Submitted: ${this.inputValue}`);
    },
    clearInput() {
      this.inputValue = '';
    },
    addSpace() {
      this.inputValue += ' ';
    }
  }
}
</script>

<style>
/* 样式可以根据需要添加 */
</style>

代码说明

  • @keyup.enter：当按下 Enter 键时，调用 submit 方法。
  • @keyup.esc：当按下 Esc 键时，调用 clearInput 方法以清空输入框。
  • @keyup.space.prevent：当按下 Space 键时，调用 addSpace 方法，并阻止默认行为（例如，防止页面滚动）。

常用按键修饰符

  1. .enter：Enter 键
  2. .esc：Esc 键
  3. .tab：Tab 键
  4. .backspace：Backspace 键
  5. .delete：Delete 键
  6. .space：Space 键
  7. .up：向上箭头键
  8. .down：向下箭头键
  9. .left：向左箭头键
  10. .right：向右箭头键

组合键

可以结合使用多个修饰符，例如：

javascript 复制代码 
<input @keydown.ctrl.enter="save" />

这表示在按下 Ctrl + Enter 时会调用 save 方法。

5. 使用 $event 对象

在事件处理器中，你可以访问原生事件对象 $event，这样可以获取事件的更多信息。

javascript 复制代码 
<template>
  <button @click="handleClick($event)">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event); // 输出原生事件对象
      alert('按钮被点击了!');
    }
  }
}
</script>

6. 自定义事件

在 Vue.js 中，子组件可以使用 $emit() 方法向父组件发出自定义事件。父组件可以通过监听这些事件来进行响应。

子组件

javascript 复制代码 
<template>
  <button @click="notifyParent">通知父组件</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('custom-event', '数据');
    }
  }
}
</script>

父组件

javascript 复制代码 
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 输出 '数据'
    }
  }
}
</script>

在这个示例中，子组件发出了一个名为 custom-event 的事件，父组件则通过 @custom-event 监听这个事件，并在 handleCustomEvent 方法中处理。

7 鼠标事件

常用鼠标事件

  1. click：单击事件
  2. dblclick：双击事件
  3. mouseenter：鼠标进入事件
  4. mouseleave：鼠标离开事件
  5. mousemove：鼠标移动事件
  6. mousedown：鼠标按下事件
  7. mouseup：鼠标释放事件
  8. contextmenu：右键点击事件
javascript 复制代码 
<template>
  <div>
    <button @click="handleClick">Click Me</button>
    <div 
      class="box" 
      @mouseenter="handleMouseEnter" 
      @mouseleave="handleMouseLeave"
      @mousemove="handleMouseMove"
      @mousedown="handleMouseDown"
      @mouseup="handleMouseUp"
    >
      Hover over me or click!
    </div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hover or click the box!'
    };
  },
  methods: {
    handleClick() {
      alert('Button clicked!');
    },
    handleMouseEnter() {
      this.message = 'Mouse entered the box!';
    },
    handleMouseLeave() {
      this.message = 'Mouse left the box!';
    },
    handleMouseMove(event) {
      this.message = `Mouse is at (${event.clientX}, ${event.clientY})`;
    },
    handleMouseDown() {
      this.message = 'Mouse button down!';
    },
    handleMouseUp() {
      this.message = 'Mouse button released!';
    },
  }
}
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  border: 1px solid #000;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

说明

  1. 点击事件：

@click 用于处理按钮的单击事件。

  1. 鼠标进入和离开事件：

@mouseenter 在鼠标进入元素时触发。

@mouseleave 在鼠标离开元素时触发。

  1. 鼠标移动事件：

@mousemove 用于获取鼠标在元素上的位置，可以通过 event.clientX 和 event.clientY 获取鼠标坐标。

  1. 鼠标按下和释放事件：

@mousedown 和 @mouseup 分别在鼠标按下和释放时触发。

8 总结

通过以上内容，你可以看到 Vue.js 的事件处理器非常灵活，能够满足各种用户交互的需求。无论是基本的点击事件，还是复杂的自定义事件，都可以通过 Vue 的事件系统轻松实现

相关推荐
Cachel wood15 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端16 分钟前
0基础学前端-----CSS DAY9
前端·css
joan_8520 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特43 分钟前
什么是尾调用，使用尾调用有什么好处？
javascript·大剑师·尾调用
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列（11）-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML（三）
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目，该不该用 Pinia 、Vuex呢？
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play