Event

`FocusEvent`

Creates a new FocusEvent representing a focus or blur interaction

Syntax

JavaScript

new FocusEvent(type, options?)

Parameters

Parameter	Type	Description
type	string	The type of focus event (focus, blur, focusin, focusout)
options	FocusEventInit	Options including relatedTarget, bubbles, cancelable

Return Value

A new FocusEvent object

Examples

Basic Usage

const input = document.querySelector('input')!
input.addEventListener('focus', () => {
  console.log('Input focused')
})
input.addEventListener('blur', () => {
  console.log('Input blurred')
})

Practical Example

document.addEventListener('focusin', (e: FocusEvent) => {
  const target = e.target as HTMLElement
  console.log('Focused:', target.tagName, target.id)
})

Advanced Usage

const input = document.querySelector('input')!
input.addEventListener('blur', (e: FocusEvent) => {
  const next = e.relatedTarget as HTMLElement | null
  console.log('Focus moved to:', next?.tagName)
})

Understanding FocusEvent

The FocusEvent method in JavaScript creates a new FocusEvent representing a focus or blur interaction. It belongs to the Event object and is one of the most widely used methods for working with event values in modern JavaScript and TypeScript applications.

The method signature is new FocusEvent(type, options?). It accepts 2 parameters: type, options. When called, it returns a new focusevent object. Understanding when and how to use FocusEvent() helps you write more expressive, readable code.

Common use cases for FocusEvent include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like event-addeventlistener, dom-focus, dom-blur, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for FocusEvent is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.