Event

`InputEvent`

Creates a new InputEvent representing an edit to the content of an editable element

Syntax

JavaScript

new InputEvent(type, options?)

Parameters

Parameter	Type	Description
type	string	The type of input event (input, beforeinput)
options	InputEventInit	Options including data, inputType, isComposing, dataTransfer

Return Value

A new InputEvent object

Examples

Basic Usage

const input = document.querySelector('input')!
input.addEventListener('input', (e) => {
  const ie = e as InputEvent
  console.log('Input type:', ie.inputType, 'Data:', ie.data)
})

Practical Example

const editor = document.querySelector('[contenteditable]')!
editor.addEventListener('beforeinput', (e) => {
  const ie = e as InputEvent
  if (ie.inputType === 'insertFromPaste') {
    e.preventDefault()
    console.log('Paste blocked')
  }
})

Advanced Usage

const textarea = document.querySelector('textarea')!
textarea.addEventListener('input', (e) => {
  const ie = e as InputEvent
  console.log(`Type: ${ie.inputType}, New value: ${(e.target as HTMLTextAreaElement).value}`)
})

Understanding InputEvent

The InputEvent method in JavaScript creates a new InputEvent representing an edit to the content of an editable element. 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 InputEvent(type, options?). It accepts 2 parameters: type, options. When called, it returns a new inputevent object. Understanding when and how to use InputEvent() helps you write more expressive, readable code.

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

Browser support for InputEvent 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.