Event Listener(이벤트 리스너)

js006.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="" 안에 자바스크립트를 사용했는데 이벤트 리스너를 사용할 수도 있다.

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

'close' 라는 요소에 'click'라는 이벤트가 발생하면 뒤의 함수를 실행해라 라는 뜻.

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

사용자가 버튼키를 이용하여 폼을 제출할 때

🎈 콜백함수

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

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

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

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

PreviousgetElementByClass NextEvent Listner 연습문제

Last updated 1 year ago