[JS] addEventListener 종류

📋 addEventListener

DOM 객체로부터 이벤트가 발생할 때 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트입니다.
특정 DOM에 script 이벤트가 발생할 때 특정 함수를 호출합니다.

---

✔ 사용 방법

• 초기 적용 시

  DOM객체.addEventListener(이벤트 명, 실행할 함수 명, 옵션)

• 사용 후 제거 시

  DOM객체.removeEventListener(이벤트 명, 실행할 함수 명, 옵션)

---

✔ 자주 사용하는 이벤트 종류

• click : 클릭할 때 이벤트 발생
• mouseover : 마우스를 요소 위에 올리면 발생
• mouseout : 마우스가 요소 밖으로 벗어날 때 발생
• mousedown : 마우스 클릭 버튼을 누르고 떼기 전인 순간 발생(드래그할 때 사용)
• mouseup : 마우스 클릭을 떼는 순간 발생
• mousemove : 마우스가 움직일 때 발생
• focus : 요소에 포커스가 갔을 때 발생
• blur : 요소에 포커스가 벗어났을 때 발생
• keypress : 키를 누른 순간 발생(누르고 있는 동안 계속해서 발생)
• keydown : 키를 누를 때 발생
• keyup : 키를 눌렀다가 떼는 순간 발생
• scroll : 스크롤 시 발생
• resize : 브라우저 창 크기를 조절할 때 발생

---

✔ addEventListener 사용 예시

버튼을 클릭하면 alert창 나타남

[HTML]

<button class="btn" type="button"></button>

[JS]

document.querySelector('.btn').addEventListener('click',() => {
  alert('버튼을 클릭하셨습니다.')
});

---

✔ removeEventListner

이벤트 리스너를 계속 살려두게 되면 메모리 누수의 원인이 될 수 있습니다.
필요 없는 시점에는 제거해주는 것이 좋습니다.

 

---