# Event Listener(이벤트 리스너)

js006.html 파일 생성&#x20;

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="alert" class="alert-box" >
        알림창
        <button id="close">닫기</button>
    </div>

    <button onclick="alertControl('block', 'black')">버튼 1 </button>
    <button onclick="alertControl('block', 'red')">버튼 2</button>
</body>

    <script>
        function alertControl(파라미터1, 파라미터2){
            document.getElementById('alert').style.display = 파라미터1;
            document.getElementById('alert').style.backgroundColor = 파라미터2;
        }
    </script>
</html>
```



지금까지는 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 만으로 제어가 가능하다.



## 🎉이벤트 종류

<table><thead><tr><th width="191">이벤트 </th><th>설명</th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td>load</td><td>웹 페이지의 로드가 완료 되었을 때</td><td></td><td></td></tr><tr><td>unload</td><td>웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )</td><td></td><td></td></tr><tr><td>error</td><td>브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우</td><td></td><td></td></tr><tr><td>resize</td><td>브라우저의 창 크기를 조정했을 때</td><td></td><td></td></tr><tr><td>scroll</td><td>사용자가 페이지를 스크롤 할 때 </td><td></td><td></td></tr><tr><td>keydown</td><td>사용자가 키를 처음 눌렀을 때</td><td></td><td></td></tr><tr><td>keyup</td><td>키를 땔 때</td><td></td><td></td></tr><tr><td>keypress</td><td>사용자가 눌렀던 키의 문자가 입력되었을 때</td><td></td><td></td></tr><tr><td>click</td><td>마우스 버튼을 눌렀다 땔 때</td><td></td><td></td></tr><tr><td>dblclick</td><td>두 번 눌렀다 땔 때</td><td></td><td></td></tr><tr><td>mousedown</td><td>마우스를 누르고 있을 때</td><td></td><td></td></tr><tr><td>mouseup</td><td>눌렀던 마우스 버튼을 땔 때</td><td></td><td></td></tr><tr><td>mousemove</td><td>마우스를  움직였을 때</td><td></td><td></td></tr><tr><td>mouseover</td><td>요소 위로 마우스를 움직였을 때</td><td></td><td></td></tr><tr><td>mouseout</td><td>요소 바깥으로 마우스를 움직였을 때</td><td></td><td></td></tr><tr><td>focus</td><td>요소가 포커스를 얻었을 때</td><td></td><td></td></tr><tr><td>blur</td><td>요소가 포커스를 잃었을 때</td><td></td><td></td></tr><tr><td>input</td><td>&#x3C;input>, &#x3C;textarea> 요소 값이 변경되었을 때</td><td></td><td></td></tr><tr><td>change </td><td>체크박스, 라디오 버튼 , 셀렉트박스의 상태가 변경되었을 때</td><td></td><td></td></tr><tr><td>submit</td><td>사용자가 버튼키를 이용하여 폼을 제출할 때 </td><td></td><td></td></tr></tbody></table>

\
🎈 콜백함수

```javascript
document.getElementById('close').addEventListener('click', function() {
    //실행할 코드
}
```

여기서 addEventListener 함수 뒤에 파라미터가 'click'는 문자열 function(){} 은 함수다.

이렇게 함수 안에 파라미터로 들어가는 함수를 콜백함수(callback function) 라고 함.

지금은 이 정도로 알아두고 개념적인 부분 보다는 익숙하게 사용하는데 중점을 두자.

