> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/javascript/event-listener.md). # 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) 라고 함. 지금은 이 정도로 알아두고 개념적인 부분 보다는 익숙하게 사용하는데 중점을 두자.