Programing Language/Javascript
[Javascript] event listener 사용하는 법과 event 의 종류
jheaon
2023. 3. 20. 23:25
event listener
- DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트
(비유하자면 이벤트라는 소리가 발생했을 때, 듣는 객체를 listener라고 명한다.)
- 특정 DOM에 위에 Javascirpt 이벤트가 발생할 때 특정 함수를 호출할 수 있다.
다음은 Click 이벤트에 대한 이벤트리스너를 설정하여 제작된 예제이다.
해당 코드는 a 요소에 마우스 클릭 이벤트가 발생하면 콘솔로그로 hi 라는 글자가 찍혀 나오게 된다.
<html>
<a>클릭</a>
</html>
<script>
const a = document.querySelector('a'); // 요소 찾기
function showConsole() {
console.log("hi");
}
a.addEventListener('click', showConsole); // click 이라는 이벤트에 반응하는 showConsole 함수
</script>
event의 종류
이벤트의 종류가 많기 때문에 공식 문서를 참고하여 이벤트 찾자
문서 : https://developer.mozilla.org/ko/docs/Web/API/Window#%EC%9D%B4%EB%B2%A4%ED%8A%B8