LEARN

[JavaScript]이벤트 리스너(Event Listener)

 

[JavaScript]이벤트 리스너(Event Listener)

이벤트 리스너 종류

이벤트 명 설명 
change 변동이 있을 때 발생
click 클릭 시 발생
focus 포커스를 얻었을 때 발생
keydown 키를 눌렀을 때 발생
keyup 키에서 손을 땟을 때 발생
load 로드가 완료 되었을 때 발생
mousedown 마우스를 클릭 했을 때 발생
mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생
mouseover 마우스가 특정 객체 위로 올려졌을 때 발생
mousemove 마우스가 움직였을 때 발생
mouseup 마우스에서 손을 땟을 때 발생
select option 태그 등에서 선택을 햇을 때 발생 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
</head>
<body>
    
    <div class="alert-box" id="alert">
        <p id="title">Alert 박스</p>
        <button id="close">X</button>
    </div> 
    <button onclick="알림창열고닫기('아이디 입력하세요.','block')">버튼1</button>
    <button onclick="알림창열고닫기('비밀번호 입력하세요.','block')">버튼2</button>

    <script>

        function 알림창열고닫기(파라미터1, 파라미터2){
            // 1. 제목 바꾸기 
            document.getElementById('title').innerHTML = 파라미터1;
            // 2. 알림창 바꾸기
            document.getElementById('alert').style.display = 파라미터2;
        }

        document.getElementById("close").addEventListener('click', function(){
            document.getElementById('alert').style.display = "none";
        });

    </script>
</body>
</html>

 

main.css
.alert-box{
    background:#aba8f4;
    color:#4646b4;
    padding: 20px;
    border-radius: 5px;
    display: none;
}

 

코딩애플의 온라인 강좌

RELATED POST