Javascript를 공부해 봅시다! 09. addEventListener()

- addEventListener는 자바스크립트에서 HTML 요소에 이벤트 리스너를 추가하는 메서드입니다. 이벤트 리스너는 특정 이벤트가 요소에서 발생할 때 실행되는 함수입니다.

- 다음은 addEventListener를 사용하여 이벤트 리스너를 추가하는 기본 구문입니다.

element.addEventListener(event, function, useCapture);

- 구성 요소는 다음과 같습니다. 

• element: 이벤트 리스너를 추가할 HTML 요소입니다.
• event: 이벤트 이름입니다. 예를 들어, "click", "mousemove", "keydown" 등이 될 수 있습니다.
• function: 이벤트가 발생할 때 실행할 함수입니다.
• useCapture: 선택적 매개변수로, 이벤트 캡처링을 사용할지 여부를 결정합니다. 이 값이 true이면, 이벤트는 자식 요소에서 상위 요소로 전파됩니다. 기본값은 false입니다.

이 메서드는 이벤트 핸들러 함수를 추가하기 위한 가장 일반적인 방법 중 하나이며, 웹 페이지의 인터랙티브한 동작을 구현하는 데 매우 중요합니다.

 - addEventListener를 사용하여 HTML 요소에 이벤트 리스너를 추가할 때, 첫 번째 인자로 전달되는 이벤트 이름은 매우 다양합니다.

 다음은 addEventListener에 들어갈 수 있는 일부 이벤트의 예입니다.

• 마우스 이벤트 : click, dblclick, mousedown, mouseup, mousemove,mouseenter, mouseleave, mouseover, mouseout, wheel
• 키보드 이벤트: keydown, keyup, keypress
• 폼 이벤트: submit, reset, change, input
• 윈도우 이벤트: load, unload, resize, scroll
• 터치 이벤트: touchstart, touchend, touchmove, touchcancel
• 뷰포트 이벤트: orientationchange, resize
• 애니메이션 이벤트: animationstart, animationend, animationiteration
• 드래그 앤 드롭 이벤트: drag, dragstart, dragend, dragover, dragenter, dragleave, drop

- 예를 들어, 버튼 요소에 클릭 이벤트를 추가하려면 다음과 같이 작성할 수 있습니다.

const button = document.querySelector('button');

quizAnswerConfirm.addEventListener("click", function(){
	console.log("실행되었습니다");
}

- 이 코드는 버튼 요소를 찾아 querySelector 메서드로 가져와 click 이벤트에 대한 이벤트 리스너를 추가합니다. 클릭 이벤트가 발생하면, 이벤트 리스너 함수가 실행되어 콘솔에 "버튼이 클릭되었습니다."라는 메시지가 출력됩니다.

 

- 끝~!!