Event Handling

<template>
  <div>
    <!-- Full syntax -->
    <button v-on:click="count++">Increment</button>
    
    <!-- Shorthand -->
    <button @click="count++">Increment</button>
    
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

function decrement() {
  count.value--
}
</script>

<template>
  <div>
    <button @click="greet('Hello')">Say Hello</button>
    <button @click="greet('Goodbye')">Say Goodbye</button>
  </div>
</template>

<script setup>
function greet(message) {
  alert(message)
}
</script>

<template>
  <!-- Stop event propagation -->
  <div @click="parentHandler">
    <button @click.stop="childHandler">Click me</button>
  </div>
</template>

<template>
  <!-- Prevent default behavior -->
  <form @submit.prevent="onSubmit">
    <button type="submit">Submit</button>
  </form>
  
  <!-- Modifier only -->
  <form @submit.prevent>
    <!-- Form won't submit -->
  </form>
</template>

<template>
  <!-- Modifiers can be chained -->
  <a @click.stop.prevent="doThat">Link</a>
</template>

<template>
  <!-- Only trigger if event.target is the element itself -->
  <div @click.self="handleClick">
    <button>Won't trigger parent handler</button>
  </div>
</template>

<template>
  <!-- Use capture mode when adding event listener -->
  <div @click.capture="doThis">
    <!-- Inner element clicks handled by outer handler first -->
  </div>
</template>

<template>
  <!-- Event will be triggered at most once -->
  <button @click.once="handleClick">Click once</button>
</template>

<template>
  <!-- Improves scrolling performance on mobile -->
  <div @scroll.passive="onScroll">
    <!-- ... -->
  </div>
</template>

<template>
  <div>
    <!-- Only call when Enter is pressed -->
    <input @keyup.enter="submit" />
    
    <!-- Only call when PageDown is pressed -->
    <input @keyup.page-down="onPageDown" />
  </div>
</template>

<template>
  <input @keyup.enter="submit" />
  <input @keyup.tab="handleTab" />
  <input @keyup.delete="handleDelete" />
  <input @keyup.esc="handleEscape" />
  <input @keyup.space="handleSpace" />
  <input @keyup.up="handleUp" />
  <input @keyup.down="handleDown" />
  <input @keyup.left="handleLeft" />
  <input @keyup.right="handleRight" />
</template>

const keyNames: Record<string, string> = {
  esc: 'escape',
  space: ' ',
  up: 'arrow-up',
  left: 'arrow-left',
  right: 'arrow-right',
  down: 'arrow-down',
  delete: 'backspace'
}

<template>
  <input @keyup.page-down="onPageDown" />
</template>

<template>
  <div>
    <!-- Ctrl + Click -->
    <button @click.ctrl="onClick">Ctrl+Click</button>
    
    <!-- Alt + Enter -->
    <input @keyup.alt.enter="clear" />
    
    <!-- Shift + Click -->
    <div @click.shift="handleShiftClick">Shift+Click</div>
    
    <!-- Cmd on Mac, Ctrl on Windows/Linux -->
    <button @click.meta="handleMetaClick">Cmd/Ctrl+Click</button>
  </div>
</template>

<template>
  <div>
    <!-- Triggers even if Alt or Shift is also pressed -->
    <button @click.ctrl="onClick">Click</button>
    
    <!-- Only triggers when Ctrl and no other keys are pressed -->
    <button @click.ctrl.exact="onCtrlClick">Ctrl only</button>
    
    <!-- Only triggers when no system modifiers are pressed -->
    <button @click.exact="onClick">Click only</button>
  </div>
</template>

<template>
  <div>
    <!-- Left click only -->
    <button @click.left="handleLeftClick">Left</button>
    
    <!-- Right click only -->
    <button @click.right="handleRightClick">Right</button>
    
    <!-- Middle click only -->
    <button @click.middle="handleMiddleClick">Middle</button>
  </div>
</template>

const modifierGuards = {
  left: (e: Event) => 'button' in e && (e as MouseEvent).button !== 0,
  middle: (e: Event) => 'button' in e && (e as MouseEvent).button !== 1,
  right: (e: Event) => 'button' in e && (e as MouseEvent).button !== 2,
}

import { withModifiers } from 'vue'

const handler = withModifiers(
  (event) => {
    // Handler code
  },
  ['stop', 'prevent']
)

import { withKeys } from 'vue'

const handler = withKeys(
  (event) => {
    // Handler code
  },
  ['enter', 'space']
)

<template>
  <button @click="handler1(), handler2()">Click</button>
</template>

<script setup>
function handler1() {
  console.log('Handler 1')
}

function handler2() {
  console.log('Handler 2')
}
</script>

<template>
  <div>
    <!-- Dynamic event name -->
    <button @[eventName]="handleEvent">Click or Hover</button>
    
    <select v-model="eventName">
      <option value="click">Click</option>
      <option value="mouseenter">Hover</option>
    </select>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const eventName = ref('click')

function handleEvent() {
  console.log(`${eventName.value} event triggered`)
}
</script>

<template>
  <input @input="debouncedSearch" placeholder="Search..." />
</template>

<script setup>
import { ref } from 'vue'

const searchQuery = ref('')
let debounceTimer = null

function debouncedSearch(event) {
  clearTimeout(debounceTimer)
  debounceTimer = setTimeout(() => {
    searchQuery.value = event.target.value
    performSearch(searchQuery.value)
  }, 300)
}

function performSearch(query) {
  console.log('Searching for:', query)
}
</script>

<script setup>
let lastCall = 0
const throttleDelay = 100

function throttledHandler(event) {
  const now = Date.now()
  if (now - lastCall < throttleDelay) return
  
  lastCall = now
  // Handle event
  console.log('Throttled handler called')
}
</script>

<template>
  <button @click="handleClick" :disabled="isLoading">
    {{ isLoading ? 'Loading...' : 'Submit' }}
  </button>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(false)

function handleClick() {
  if (isLoading.value) return
  
  isLoading.value = true
  // Perform async operation
  setTimeout(() => {
    isLoading.value = false
  }, 2000)
}
</script>