Undo typing
Tags: dom, addeventlistener
Published: 2020-02-06 12:37:12

---
title: Undo typing
published: true
description: But what actually happens in the DOM when you undo typing?
tags: DOM, addEventListener
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/es8twpekfgirb55jnhpg.png
---


Did you drop your phone again while typing? You cannot undo dropping your phone, but at least you can undo the typing you’ve done on your phone before breaking the back glass.

![Undo Typing popup on iOS](https://dev-to-uploads.s3.amazonaws.com/i/es8twpekfgirb55jnhpg.png)


But what actually happens in the DOM when you undo typing?

## Test setup

Let's create a textarea and capture **all** events to see what events are actually triggered on undo. Creating a textarea is easy enough, but how do we capture all events? There isn't a <code>addEventListener("*")</code> for any event.

After some googling, some suggest iterating over all properties that start with `on`: `onkeydown`, `onkeyup`, etc. Let's try that!

```js
const textarea = document.createElement("textarea");
document.body.appendChild(textarea);
const pre = document.createElement("pre");
document.body.appendChild(pre);
const eventNames = [];
for (const key in textarea) {
  if (key.substr(0, 2) === "on") {
    eventNames.push(key.substr(2));
  }
}
console.log(eventNames); /* ["copy", "cut", "paste", "abort", "blur", "cancel", "canplay",
  "canplaythrough", "change", "click", "close", "contextmenu", "cuechange",
  "dblclick", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart",
  "drop", "durationchange", "emptied", "ended", "error", "focus", "input", "invalid",
  "keydown", "keypress", "keyup", "load", "loadeddata", "loadedmetadata", "loadstart",
  "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup",
  "mousewheel", "pause", "play", "playing", "progress", "ratechange", "reset", "resize",
  "scroll", "seeked", "seeking", "select", "stalled", "submit", "suspend", "timeupdate",
  "toggle", "volumechange", "waiting", "wheel", "auxclick", "gotpointercapture",
  "lostpointercapture", "pointerdown", "pointermove", "pointerup", "pointercancel",
  "pointerover", "pointerout", "pointerenter", "pointerleave", "selectstart", "selectionchange",
  "animationend", "animationiteration", "animationstart", "transitionend", "formdata",
  "pointerrawupdate", "beforecopy", "beforecut", "beforepaste", "search", "fullscreenchange",
  "fullscreenerror", "webkitfullscreenchange", "webkitfullscreenerror"] */

const eventCounts = {};
for (const eventName of eventNames) {
  textarea.addEventListener(eventName, (event) => {
    if (!eventCounts[eventName]) {
      eventCounts[eventName] = 0;
    }
    console.log(eventName, event);
    eventCounts[eventName]++;
    pre.textContent = JSON.stringify(eventCounts, null, 2);
  });
}
```

That's a LOT of events. I never actually realised there were so many!

Testing this in my desktop browser, there seems to be an `input` event I didn't know about. The input event is triggered (together with keyboard events) when using <kbd>Ctrl</kbd> + <kbd>Z</kbd>. Even when using the **Cut** feature from the **Edit** toolbar of the browser (I mean, who does that?), an `input` event is triggered, together with a `cut` event.

Now let's try the **undo** feature on my phone: I enter some text, shake the phone, and press **undo**. Only an `input` event is triggered!

So what's this InputEvent? Let's see what Mozzila has to say:

- [https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
- [https://developer.mozilla.org/en-US/docs/Web/API/InputEvent](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent)

Looks like there is all kinds of interesting data on the InputEvent interface.

Most notably: `event.inputType` is `"historyUndo"`. Is this even a documented standard somewhere? Looking at InputEvent's inputType specification at w3c, there is an editor's draft containing a list of inputType values:

- [https://w3c.github.io/input-events/#overview](https://w3c.github.io/input-events/#overview)

Both `"historyUndo"` and `"historyRedo"` are there. Cool.

So there's that: When you undo typing on your browser, a special `input` event is triggered, with `inputType = "historyUndo"`. Now you know.

Thank you for reading! And if you want to know more or have any other questions, please get in touch with us via info@bonaroo.nl