Event Sequence

Test the Event Sequence

by _sir

HTML

<input placeholder="Enter some text" name="name"/>
<div id="log"></div>

CSS

#log p {
  margin: 0.1em 1em;
}

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keydown', updateValue);
input.addEventListener('keyup', updateValue);
input.addEventListener('change', updateValue);
input.addEventListener('input', updateValue);
input.addEventListener('blur', updateValue);
input.addEventListener('focusout', updateValue);

function updateValue(e) {
	var record = document.createElement('p');
  record.textContent = `${e.type} - ${e.srcElement.value}`;
  log.appendChild(record);
}