# Event Listener(이벤트 리스너) js006.html 파일 생성 ```html Title
알림창
``` 지금까지는 onclick="" 안에 자바스크립트를 사용했는데 이벤트 리스너를 사용할 수도 있다. ```javascript document.getElementById('close').addEventListener('click', function() { //실행할 코드 }) ``` 'close' 라는 요소에 'click'라는 이벤트가 발생하면 뒤의 함수를 실행해라 라는 뜻. ```javascript document.getElementById('close').addEventListener('click', function(){ document.getElementById('alert').style.display = 'none' }); ``` 이렇게 하면 HTML은 건드리지 않고 javascript 만으로 제어가 가능하다. ## 🎉이벤트 종류
이벤트 설명
load웹 페이지의 로드가 완료 되었을 때
unload웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )
error브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우
resize브라우저의 창 크기를 조정했을 때
scroll사용자가 페이지를 스크롤 할 때
keydown사용자가 키를 처음 눌렀을 때
keyup키를 땔 때
keypress사용자가 눌렀던 키의 문자가 입력되었을 때
click마우스 버튼을 눌렀다 땔 때
dblclick두 번 눌렀다 땔 때
mousedown마우스를 누르고 있을 때
mouseup눌렀던 마우스 버튼을 땔 때
mousemove마우스를 움직였을 때
mouseover요소 위로 마우스를 움직였을 때
mouseout요소 바깥으로 마우스를 움직였을 때
focus요소가 포커스를 얻었을 때
blur요소가 포커스를 잃었을 때
input<input>, <textarea> 요소 값이 변경되었을 때
change 체크박스, 라디오 버튼 , 셀렉트박스의 상태가 변경되었을 때
submit사용자가 버튼키를 이용하여 폼을 제출할 때
\ 🎈 콜백함수 ```javascript document.getElementById('close').addEventListener('click', function() { //실행할 코드 } ``` 여기서 addEventListener 함수 뒤에 파라미터가 'click'는 문자열 function(){} 은 함수다. 이렇게 함수 안에 파라미터로 들어가는 함수를 콜백함수(callback function) 라고 함. 지금은 이 정도로 알아두고 개념적인 부분 보다는 익숙하게 사용하는데 중점을 두자. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://leeans-dev-book.gitbook.io/docs/lecture/javascript/event-listener.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.