vue事件修饰符的实现

在 Vue.js 中，事件修饰符用于简化事件处理逻辑。常见的事件修饰符包括 .stop、.prevent、.capture、.self、.once 和 .passive。它们通过修饰符语法实现，Vue 在编译模板时会将这些修饰符转换为相应的事件处理代码。

在 Vue.js 中，事件修饰符用于简化事件处理逻辑。常见的事件修饰符包括 .stop、.prevent、.capture、.self、.once 和 .passive。它们通过修饰符语法实现，Vue 在编译模板时会将这些修饰符转换为相应的事件处理代码。

常见事件修饰符及其实现

.stop

作用：阻止事件冒泡。实现：调用 event.stopPropagation()。示例：  

<button @click.stop="handleClick">Click me</button>

编译后：  

_vm.$el.querySelector('button').addEventListener('click', function(event) { event.stopPropagation(); _vm.handleClick(event); });

.prevent

作用：阻止默认行为。实现：调用 event.preventDefault()。示例：  

<form @submit.prevent="handleSubmit">Submit</form>

编译后：  

_vm.$el.querySelector('form').addEventListener('submit', function(event) { event.preventDefault(); _vm.handleSubmit(event); });

.capture

作用：使用捕获模式监听事件。实现：在 addEventListener 中设置 { capture: true }。示例：  

<div @click.capture="handleClick">Click me</div>

编译后：  

_vm.$el.querySelector('div').addEventListener('click', function(event) { _vm.handleClick(event); }, { capture: true });

.self

作用：只在事件目标自身触发时调用。实现：检查 event.target 是否等于当前元素。示例：  

<div @click.self="handleClick">Click me</div>

编译后：  

_vm.$el.querySelector('div').addEventListener('click', function(event) { if (event.target === this) { _vm.handleClick(event); } });

.once

作用：事件只触发一次。实现：触发后移除事件监听器。示例：  

<button @click.once="handleClick">Click me</button>

编译后：  

_vm.$el.querySelector('button').addEventListener('click', function(event) { _vm.handleClick(event); event.currentTarget.removeEventListener('click', arguments.callee); });

.passive

作用：提升滚动性能，不阻止默认行为。实现：在 addEventListener 中设置 { passive: true }。示例：  

<div @touchmove.passive="handleTouchMove">Touch me</div>

编译后：  

_vm.$el.querySelector('div').addEventListener('touchmove', function(event) { _vm.handleTouchMove(event); }, { passive: true });

总结

Vue 的事件修饰符通过编译模板时生成相应的事件处理代码来实现，简化了事件处理的逻辑。