javascript : event (event obj, focus form event)

event obj

// The event object contains event information that has occurred in the target.

const parentEl = document.querySelector('.parent');

parentEl.addEventListener('click', (event) => {
  console.log(event.target, event.currentTarget); // The target of the (selected) event, the target where the event is registered
  console.log(event); // You can get information about an event that has occurred.
});

parentEl.addEventListener('wheel', (event) => {
  console.log(event);
});

const inputEl = document.querySelector('input');

inputEl.addEventListener('keydown', (event) => {
  console.log(event.key); // You can see which key was entered.
});

focus form event

// focus : when an element gets focus
// blur : When an element loses focus
// input : when value is changed
// change : when status is changed
// submit : When the submit button is selected
// reset : When the reset button is selected

/* html */ `
<form>
    <input type="text" placeholder="ID"/>
    <input type="password" placeholder="PW"/>
    <button type="submit">submit</button>
    <button type="reset">reset</button>
</form>
`;

const formEl = document.querySelector('form');
const inputEl = document.querySelector('input');

inputEls.forEach((el) => {
  el.addEventListener('focus', () => {
    formEl.classList.add('active');
  });
  el.addEventListener('blur', () => {
    formEl.classList.remove('active');
  });
  el.addEventListener('input', (event) => {
    console.log(event.target.value);
  });
  el.addEventListener('change', (event) => 
// ex) Make it work when the tab key is pressed
    console.log(event.target.value);
  });
});

formEl.addEventListener('submit', (event) => {
  event.preventDefault(); // Since it is default to initialize when submitting, you need to put this part in.
  const data = {
    id: event.target[0].value, 
    pw: event.target[1].value, 
  };
  console.log('submit', data);
});

//! reset
formEl.addEventListener('reset', (event) => {
  console.log('reset');
});