📝 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
이벤트 리스너를 계속 살려두게 되면 메모리 누수의 원인이 될 수 있습니다.
필요 없는 시점에는 제거해주는 것이 좋습니다.
Frontend Developer