Accessing the native event object in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the native event object in a Vue 3 component.

Vue

<template>
  <button @click="handleClick([1])">Click me</button>
</template>

<script setup>
function handleClick(event) {
  console.log(event);
}
</script>

Drag options to blanks, or click blank then click option'

AnativeEvent

Bevent

Ce

D$event

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'event' or 'e' directly in the template without passing it.

Trying to use 'nativeEvent' which is not a Vue template variable.

In Vue templates, the native event object is accessed using $event.

2fill in blank

medium

Complete the code to log the native event's type inside the handler.

Vue

<script setup>
function handleClick(event) {
  console.log(event.[1]);
}
</script>

Drag options to blanks, or click blank then click option'

Atarget

BcurrentTarget

Ctype

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'target' or 'currentTarget' which refer to elements, not event type.

Using 'value' which is not a property of the event object.

The type property of the event object tells you the kind of event triggered, like 'click'.

3fill in blank

hard

Fix the error in the code to correctly prevent the default action using the native event object.

Vue

<template>
  <a href="#" @click="handleClick([1])">Link</a>
</template>

<script setup>
function handleClick(event) {
  event.[1]();
}
</script>

Drag options to blanks, or click blank then click option'

ApreventDefault

BdefaultPrevented

CstopImmediatePropagation

DstopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'stopPropagation' which only stops event bubbling.

Using 'defaultPrevented' which is a property, not a method.

To stop the browser's default action (like following a link), call event.preventDefault().

4fill in blank

hard

Fill both blanks to create a Vue 3 component that logs the native event's target tag name and prevents default action.

Vue

<template>
  <form @submit="handleSubmit([1])">
    <button type="submit">Submit</button>
  </form>
</template>

<script setup>
function handleSubmit(event) {
  event.[2]();
  console.log(event.target.tagName);
}
</script>

Drag options to blanks, or click blank then click option'

A$event

BpreventDefault

CstopPropagation

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'event' or 'dollarEvent' instead of '$event' in the template.

Calling 'stopPropagation' instead of 'preventDefault' to stop form submission.

Use $event in the template to pass the native event object, and call preventDefault() to stop the form from submitting normally.

5fill in blank

hard

Fill all three blanks to create a Vue 3 component that listens for a keydown event, logs the key pressed, and prevents default behavior.

Vue

<template>
  <input @keydown="handleKeydown([1])" />
</template>

<script setup>
function handleKeydown(event) {
  event.[2]();
  console.log(event.[3]);
}
</script>

Drag options to blanks, or click blank then click option'

A$event

BpreventDefault

Ckey

DstopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'event' instead of '$event' in the template.

Calling 'stopPropagation' instead of 'preventDefault'.

Logging 'event.code' instead of 'event.key' which gives the actual character.

Pass the native event with $event, call preventDefault() to stop default key actions, and log the pressed key with event.key.