Event Listener

1. Mouse Event 👩‍💻

1. Click

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 10px solid;
  background-color: red;
  overflow: auto;
}
.child {
  width: 200px;
  height: 100px;
  border: 10px solid;
  background-color: orange;
}

const childEl = document.querySelector('.child');

childEl.addEventListener('click', (event) => {
  console.log(`Alt(Option): ${event.altKey}`);
  console.log(`Ctrl(Control): ${event.ctrlKey}`);
});

Alt(Option)키 또는 Ctrl(Control)키를 함께 눌렀는지 알 수 있다.

2. Double Click

.child.active {
  background-color: yellowgreen;
}

const childEl = document.querySelector('.child');

childEl.addEventListener('dblclick', () => {
  childEl.classList.toggle('active');
});

3. Mouse Down & Mouse Up

const childEl = document.querySelector('.child');

childEl.addEventListener('mousedown', () => {
  childEl.classList.add('active');
});

childEl.addEventListener('mouseup', () => {
  childEl.classList.remove('active');
});

mousedown 이벤트와 mouseup 이벤트를 나눠 등록하면 마우스를 클릭중일 때와 클릭에서 손을 뗄 때를 나눠 처리할 수 있다.

4. Mouse Enter & Mouse Leave

const childEl = document.querySelector('.child');

childEl.addEventListener('mouseenter', () => {
  childEl.classList.add('active');
});

childEl.addEventListener('mouseleave', () => {
  childEl.classList.remove('active');
});

마찬가지로, mouseenter 이벤트와 mouseleave 이벤트를 나눠 등록하면 마우스가 들어가 있을 때와 나올 때를 나눠 처리할 수 있다.

단순히 마우스가 들어가 있을 때와 나올 때 CSS 만 처리하는 것이라면, 그냥 CSS hover 선택자를 사용하면 된다.
하지만 JavaScript 에서 들어가고 나올때 무언가 구분해서 처리할 비즈니스 로직이 존재한다면, 위와 같이 mouseenter 이벤트와 mouseleave 이벤트를 나눠 처리해야한다.

5. Mose Move

const childEl = document.querySelector('.child');

childEl.addEventListener('mousemove', (event) => {
  console.log(event.offsetX, event.offsetY);
});

6. Context Menu

const childEl = document.querySelector('.child');

childEl.addEventListener('contextmenu', (event) => {
  console.log(event);
});

마우스 우클릭을 감시한다.

7. Wheel

<div class="parent">
  <div class="child" style="height:1000px;"></div>
</div>

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

childEl.addEventListener('wheel', (event) => {
  event.deltaY > 0
    ? console.log(`⬇ 위치: ${parentEl.scrollTop}`)
    : console.log(`⬆ 위치: ${parentEl.scrollTop}`);
});

deltaY를 사용해 휠의 방향을 알 수 있고, parentEl.scrollTop을 사용해 부모의 컨테이너 안에서 자신의 Y축의 Top 위치를 알 수 있다.

---

2. Keyboard Event 👩‍💻

1. Key Down

<input type="text" />

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

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

입력하세요:

출력되는 특수키의 결과는 다음과 같다.

• Command: Meta
• Option: Alt
• Control: Control
• Shift: Shift
• Backspace: Backspace
• Delete: Delete
• Return: Enter
• Tab: Tab
• ESC: Escape
• ⬆: ArrowUp
• ⬇: ArrowDown
• ⬅: ArrowLeft
• ➡: ArrowRight
• Space: ` `

2. Key Up

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

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

keyup은 keydown과 달리 키보드를 누르고 있어도 반복 입력을 인식하지 않는다. 키에서 손을 뗄 때 반응하기 때문이다.

입력하세요:

키보드의 반복 입력을 인식하지 않기 때문에 과도한 이벤트 호출을 방지하려면 keydown 이벤트 보다 keyup 이벤트를 사용하는 것이 더 좋다. 하지만 keyup은 CJK 문자의 Return(Enter) 입력시 문제가 있어 한글 입력시 Return(Enter)를 인식할 필요가 있는 이벤트를 등록할 때는 keyup가 아닌 keydown 이벤트를 사용해야한다.

3. CJK

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

inputEl.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log(event.isComposing, event.target.value);
  }
});

안녕하세요~ Hello를 입력한 상태에서 Return키를 누르면 콘솔에 출력되는 결과는 다음과 같다.

fasle '안녕하세요~ Hello'

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

inputEl.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log(event.isComposing, event.target.value);
  }
});

Hello~ 안녕하세요를 입력한 상태에서 Return키를 누르면 콘솔에 출력되는 결과는 다음과 같다.

true 'Hello~ 안녕하세요'
false 'Hello~ 안녕하세요'

마지막 글자가 한글일 때 Return키를 누르면 문자를 결합해야 하기 때문에 Return키 입력에 문자 결합 전/후로 2번의 트리거가 발생이 된다. 만약 이걸 고려하지 않고 서버로 요청을 보낼 경우 한글이 마지막에 입력되었다면 중복 요청을 보내는 셈이 되는 것이다.

그런데 문제는 keyup 이벤트를 연결했을 경우다.

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

inputEl.addEventListener('keyup', (event) => {
  if (event.key === 'Enter') {
    console.log(event.isComposing, event.target.value);
  }
});

Hello~ 안녕하세요를 입력했지만 결과는 다음과 같다.

false 'Hello~ 안녕하세요'
false 'Hello~ 안녕하세요'

isComposing이 둘 다 false가 출력되어 구분할 수 없어지게 된 것이다. Return키 입력이 들어가는 순간이 아닌 Return키 입력이 들어갔다 떼지는 순간 트리거가 발생하기 때문에 문자 결합 전/후로 2번의 트리거가 발생하지만, 함수가 실행되는 시점에는 이미 문자 결합이 되어버린 것이다.

브라우저의 콘솔이 자동으로 문자를 결합해서 보여주어서 차이가 없어 보이지만

# keydown
true 'Hello~ 안녕하세ㅇㅛ'
false 'Hello~ 안녕하세요'

# keyup
false 'Hello~ 안녕하세요'
false 'Hello~ 안녕하세요'

실제로는 이렇게 출력되는 것이라 생각하면 된다.

따라서 이 문제를 해결하기 위해서는 isComposing의 구별이 필요하고, 이를 위해 keydown 이벤트를 사용해야한다.

keydown event

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

inputEl.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && !event.isComposing) {
    console.log(event.target.value);
  }
});

event.isComposing의 구분이 불가능해 로직이 2번 실행되어, 텍스트 입력과 동시에 적용된 색상이 한 번 더 변경되는 것을 확인할 수 있다.

입력하세요:

keyup event

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

inputEl.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && !event.isComposing) {
    console.log(event.target.value);
  }
});

event.isComposing의 구분이 가능해 1번만 실행되므로, 텍스트 입력과 동시에 적용된 색상이 변하지 않는 것을 확인할 수 있다.

입력하세요:

---

3. Form and Focus Event 👩‍💻

1. Input

<form>
  <div>
    <input type="text" />
    <input type="password" />
  </div>
  <div>
    <input type="radio" id="male" name="sex" value="M" />
    <label for="male">Male</label>
    <input type="radio" id="female" name="sex" value="F" />
    <label for="female">Female</label>
  </div>
  <div>
    <input type="checkbox" id="sms" name="sms" value="SMS" />
    <label for="sms">SMS</label>
    <input type="checkbox" id="email" name="email" value="Email" />
    <label for="email">Email</label>
  </div>
  <button type="submit">제출</button>
  <button type="reset">초기화</button>
</form>

form {
  max-width: 200px;
  padding: 10px;
  background-color: darkgreen;
  border: 4px solid transparent;
  box-sizing: border-box;
}
form div {
  box-sizing: border-box;
  border: 4px solid transparent;
  padding: 5px;
}
form input {
  outline: none;
  margin-bottom: 8px;
}

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

formEl.addEventListener('input', (event) => {
  console.log(event.target.value);
});

input에서는 keydown, keyup 이벤트 외에도 input 이벤트를 사용할 수 있다. 이것은 input에서 매우 유용한 이벤트인데, input에 change 이벤트를 사용하면, input:radio나 input:checkbox는 변경 즉시 이벤트 트리거가 되지만, input:text는 입력을 마치고 다른 곳으로 이동해 focus를 잃어야 값이 변경되므로 타이핑 도중에는 트리거가 발생하지 않는다.

따라서, input:text나 input:password 등은 keydown이나 keyup 이벤트를 사용하고, input:radio나 input:checkbox는 change 이벤트를 사용해 이원화 시켜야한다.

하지만! input 이벤트는 모든 input 이벤트에 대해 즉시 트리거를 발생시킨다.

Male Female

SMS Email

2. Focus & Blur

form div.active {
  border-color: orange;
}

const inputEls = document.querySelectorAll('input');

inputEls.forEach((el) => {
  el.addEventListener('focus', () => {
    el.closest('div').classList.add('active');
  });
  el.addEventListener('blur', () => {
    el.closest('div').classList.remove('active');
  });
});

input에 focus가 발생되면, 상위 엘리먼트 div 컨테이너의 border 를 주황색으로 바꾼다.

Male Female

SMS Email

그런데 위와 같은 코드는 불필요하게 많은 이벤트를 등록한다.

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

formEl.addEventListener('focus', (event) =>
  event.target.closest('div').classList.add('active')
);
formEl.addEventListener('blur', (event) =>
  event.target.closest('div').classList.remove('active')
);

Male Female

SMS Email

이벤트를 등록했지만 작동이 되지 않는다. focus와 blur는 Event Propagation 에 의해 트리거가 작동하지 않기 때문이다. 전파된 이벤트가 아닌 오직 엘리먼트 자기 자신에게 발생한 이벤트에 대해서만 트리러가 작동한다.

3. Focus In & Focus Out

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

formEl.addEventListener('focusin', (event) =>
  event.target.closest('div').classList.add('active')
);
formEl.addEventListener('focusout', (event) =>
  event.target.closest('div').classList.remove('active')
);

이번에는 focus, blur 이벤트를 focusin, focusout 이벤트로 바꿔보자.

Male Female

SMS Email

이제 정상적으로 작동한다. focus, blur에서는 사용할 수 없었던 Bubbling 에 의해 이벤트 트리거가 작동하는 것이다.

focus는 focusin + if(event.target === event.currentTarget)와 같다

el.addEventListener('focus', (event) => {
  // closure's body goes here
})

el.addEventListener('focusin', (event) => {
  (event.target === event.currentTarget) &&
  // closure's body goes here
})

blur는 focusout + if(event.target === event.currentTarget)와 같다

el.addEventListener('blur', (event) => {
  // closure's body goes here
})

el.addEventListener('focusout', (event) => {
  (event.target === event.currentTarget) &&
  // closure's body goes here
})

정리하면 다음과 같다.

• Event Propagation 을 이용하려면 focusin, focusout 이벤트를 사용해라.
• 엘리먼트 자기 자신에게 발생한 이벤트만 이용하려면 focus, blur 이벤트를 사용해라. 이것은 focusin, focusout 이벤트가 자기 자신에게서 발생했을 때만 작동하도록 if (event.target === event.currentTarget) 조건을 추가한 것과 같다.

4. Submit & Reset

formEl.addEventListener('submit', (event) => {
  event.preventDefault();

  const data = {
    id: event.target[0].value,
    pw: event.target[1].value,
    sex: getSex(event.currentTarget),
    contact: getContacts(event.currentTarget),
  };
  console.log('제출', data);
});

button:submit에 click 이벤트를 붙이는 게 아니라 form에 submit 이벤트를 붙여 사용한다.

Male Female

SMS Email

formEl.addEventListener('reset', () => {
  console.log('리셋');
});

마찬가지로 button:reset에 click 이벤트를 붙이는 게 아니라 form에 reset 이벤트를 붙여 사용한다. 별도의 비즈니스 로직이 필요하지 않다면, reset 버튼은 기본 작동에 의해 form의 모든 input을 초기화 시킨다 (HTML 상 input:text의 value값이 미리 지정되어 있거나, input:radio의 checked가 미리 지정되어 있을 경우 HTML 코드상 초기 상태로 돌리는 것으로 값 자체를 지우는 것이 아닌 초기화 개념이다).

Male Female

SMS Email

---

4. Dispatch and Custom Event 👩‍💻

1. Dispatch

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

const [child1, child2] = document.querySelectorAll('.child');

child1.addEventListener('click', (event) => {
  child2.dispatchEvent(new Event('click'));
  child2.dispatchEvent(new Event('wheel'));
  child2.dispatchEvent(new Event('keydown'));
});

child2.addEventListener('click', () => console.log('Child2 Click'));
child2.addEventListener('wheel', () => console.log('Child2 Wheel'));
child2.addEventListener('keydown', () => console.log('Child2 Keydown'));

el.dispatchEvent()에 Event 인스턴스를 argument 로 호출하면 JavaScript 코드로 이벤트를 발생시킬 수 있다.

1

2

2. Custom Event

const [child1, child2] = document.querySelectorAll('.child');

child1.addEventListener('click', (event) => {
  child2.dispatchEvent(new Event('hogwarts'));
});

child2.addEventListener('hogwarts', () => console.log('Child2 Hogwarts'));
child2.addEventListener('click', () => console.log('Child2 Click'));

dispatchEvent를 사용하면 API 에 존재하지 않는 Custom Event 를 호출할 수 있다.

1

2

Event 객체를 사용해 Custom Event 를 호출할 수 있지만, 이것은 단지 호출만 할 수 있을 뿐이다. 하지만 CustomEvent 객체를 사용하면 option을 줄 수 있는데, 이때 option에 detail이라는 property 를 통해 JavaScript Data 를 전달할 수 있다.

const [child1, child2] = document.querySelectorAll('.child');

child1.addEventListener('click', (event) => {
  const detail = { name: '사과', price: 10_000, quantity: 24, sale: false };
  child2.dispatchEvent(new CustomEvent('hogwarts', { detail: detail }));
});

child2.addEventListener('hogwarts', (event) => {
  console.log('Child2 Hogwarts');
  console.log(event.detail);
});
child2.addEventListener('click', () => console.log('Child2 Click'));

1

2

---

5. Remove Event 👩‍💻

1. removeEventListener

<div class="increase">Increase !</div>
<div class="log">0</div>

const increaseBtn = document.querySelector('.increase');
const log = document.querySelector('.log');

const handler = increase(log);

increaseBtn.addEventListener('click', handler);

function increase(el) {
  let num;

  const incraseToFive = (event) => {
    if (num === undefined) num = parseInt(el.textContent);
    el.textContent = ++num;

    if (num >= 5) event.target.removeEventListener('click', incraseToFive);
  };

  return incraseToFive;
}

Increase !

0

등록한 이벤트를 제거하는 첫 번째 방법은 removeEventListener를 사용하는 것이다. 이벤트 제거를 위해서는 다음 3가지가 일치해야한다.

• Event Type
• Event Callback Function’s Reference
• Capture Type(Bubbling or Capturing)

2. AbortController

const controller = new AbortController();
const increaseBtn = document.querySelector('.increase');
const log = document.querySelector('.log');

increaseBtn.addEventListener('click', increase(log, controller), {
  signal: controller.signal,
});

function increase(el, controller) {
  let num;

  return () => {
    if (num === undefined) num = parseInt(el.textContent);
    el.textContent = ++num;

    if (num >= 5) controller.abort();
  };
}

AbortController를 사용하면 비동기를 컨트롤 할 수 있다. fetch나 stream 같은 것 외에도 Event Listener 역시 Macrotask Queue 에 등록되는 비동기 함수이므로 컨트롤이 가능하다.

Increase !

0

AbortController를 사용하면, addEventListener를 등록할 때 AbortController 의 인스턴스 공간에 Callback Function 을 등록하기 때문에 컨트롤러의 abort 메서드를 호출하기만 하면 이벤트를 제거할 수 있다.

---

Reference

1. 박영웅, “프론트엔드 웹 개발의 모든 것 초격차 패키지 Online.” fastcampus.co.kr. last modified unknown, Fast Campus.
2. “AbortController.” MDN Web Docs. Jan. 10, 2024, accessed Apr. 12, 2024, MDN - Abort Controller.