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
'Programing Language > Javascript' 카테고리의 다른 글
| [Javascript] Local Storage 다루기 (0) | 2023.03.21 |
|---|---|
| [Javascript] classList 정의와 사용방법 (0) | 2023.03.21 |
| [Javascript] preventDefault()와 stopPropagation() (0) | 2023.03.21 |
| [Javascript] getElement*, querySelector*로 요소 접근하기 (0) | 2023.03.18 |
| [Javascript] undefined, null 의 정의와 차이 (0) | 2023.03.17 |