Vue.js 事件处理器

1. 基本用法

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

<template>
  <button @click="handleClick">点击我</button>
</template>

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

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

2. 传递参数

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

<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. 防止父元素事件处理：

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

2. 避免重复处理：

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

<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 修饰符。

2. 控制链接行为：

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

3.3 capture

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

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

捕获阶段与冒泡阶段

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

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

<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事件修饰符的确是用于确保事件处理器仅在事件发生在当前元素上时才被调用，而不会响应子元素的事件。这对于避免意外触发父元素的事件处理器非常有用。

<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 等。以下是一些示例和用法说明。

<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：向右箭头键

组合键

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

<input @keydown.ctrl.enter="save" />

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

5. 使用 $event 对象

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

<template>
  <button @click="handleClick($event)">点击我</button>
</template>

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

6. 自定义事件

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

子组件

<template>
  <button @click="notifyParent">通知父组件</button>
</template>

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

父组件

<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：右键点击事件

<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 用于处理按钮的单击事件。

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

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

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

3. 鼠标移动事件：

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

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

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

8 总结

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