Keyboard & Input Events

keydown

- <input var>.addEventListener('keydown', <event func>);

keyup

- <input var>.addEventListener('keyup', <event func>);

keypress

- <input var>.addEventListener('keypress', <event func>);

focus

- <input var>.addEventListener('focus', <event func>);

- fires off when the input field is clicked

blur

- <input var>.addEventListener('blur', <event func>);

- fires off when we click out of input field 

cut

- <input var>.addEventListener('cut', <event func>);

- fires off when we cut the text from input field

- ctrl + x

paste

- <input var>.addEventListener('paste', <event func>);

- fires off when we paste text into input field

- ctrl + v

input

- <input var>.addEventListener('input', <event func>);

- general of input events besides focus & blur from the above

change

- <select var>.addEventListener('change', <event func>);

- this event works for 'select tag'

- it fires off as we select different options from select menu bar

예제

const form = document.querySelector('form');
const taskInput = document.getElementById('task');
const heading = document.querySelector('h5');
const select = document.querySelector('select');

// clear input
taskInput.value = '';

// submit event of 'form tag' button
form.addEventListener('submit', runEvent);

// key down
taskInput.addEventListener('keydown', runEvent);

// key up
taskInput.addEventListener('keyup', runEvent);

// key press
taskInput.addEventListener('keypress', runEvent);

// focus
taskInput.addEventListener('focus', runEvent);

// blur
taskInput.addEventListener('blur', runEvent);

// cut
taskInput.addEventListener('cut', runEvent);

// paste
taskInput.addEventListener('paste', runEvent);

// input(general of inputs)
taskInput.addEventListener('input', runEvent);

// change event of 'select tag'
select.addEventListener('change', runEvent);

function runEvent(e) {
  console.log(`EVENT TYPE: ${e.type}`);

  console.log(e.target.value)

  // show the value to heading element
  // heading.innerText = e.target.value;

  // get input value
  // console.log(taskInput.value);

  // prevent default behavior of the selected element
  // e.preventDefault();
}