이벤트리스너
addEventListener
<body>
<div class="alert-box" id="alert">
<p id="title">알림창임</p>
<button id="close">닫기</button>
</div>
<button onClick="아이디알림창()">버튼1</button>
<button onClick="비번알림창()">버튼2</button>
<script>
document.getElementById("close").addEventListener("click", function () {
document.getElementById("alert").style.display = "none";
});
function 아이디알림창() {
document.getElementById("title").innerHTML = "아이디를 입력하세요";
document.getElementById("alert").style.display = "block";
}
function 비번알림창() {
document.getElementById("title").innerHTML = "비번을 입력하세요";
document.getElementById("alert").style.display = "block";
}
</script>
</body>id="close" 요소에 "click"(파라미터1)을 하면 function(){ }(파라미터2)을 실행해라
event
click, keydown, scroll, drag, mouseover(마우스 갖다대기) 등등
콜백함수: 파라미터 자리에 들어가는 함수
위의 예시에서
document.getElementById("close").addEventListener("click", function () {
document.getElementById("alert").style.display = "none";
});이 부분 중
function () {
document.getElementById("alert").style.display = "none";
}이 부분을 의미한다.
코딩 공부 기록장