Event Handling

Vue@event

// ActionButton.vue
<script setup lang="ts">
function handleClick() {
  alert('Button clicked')
}
</script>

<template>
  <button @click="handleClick">
    Click me
  </button>
</template>

It uses event directives in the template to associate DOM interactions with component functions.

Vue docs

ReactonEvent

// ActionButton.tsx
function ActionButton() {
  function handleClick() {
    alert('Button clicked')
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  )
}

It handles events in JSX with handlers such as onClick or onFocus, associated with component functions.

React docs

Angular(event)

// action-button.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-action-button',
  standalone: true,
  template: `
    <button (click)="handleClick()">
      Click me
    </button>
  `,
})
export class ActionButtonComponent {
  handleClick() {
    alert('Button clicked')
  }
}

It uses event bindings in the template to associate DOM interactions with component methods.

Angular docs