javascript : event (handler once, passive, keyboard)

handler once / passive

// Handler run only once

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

parentEl.addEventListener(
  'click',
  (event) => {
    console.log('parent');
  },
  {
    once: true,
  }
);

// Separation of default behavior and handler execution
// The execution itself may be slow because there are many actions on the webpage, but the user's manipulation of the webpage proceeds smoothly.
parentEl.addEventListener(
  'wheel',
  () => {
    for (let i = 0; i < 10000; i++) {
      console.log(i);
    }
  },
  {
    passive: true,
  }
);

keyboard

// keydown : press key
// keyup : release key

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

inputEl.addEventListener('keydown', (event) => {
  console.log(event.key);
});

// The following configuration is necessary to prevent double stamping when entering Hangul.
inputEl.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && !event.isComposing) {
    console.log(event.isComposing);
    console.log(event.target.value);
  }
});