[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;
}
