AddEventListener
<body>
<div class="alert-box" id="alert">
<p id='alert-msg'>알림창</p>
<button id='close-btn'>닫기</button>
</div>
<button onclick="openAlert('아이디를 입력하세요')">버튼1</button>
<button onclick="openAlert('비밀번호를 입력하세요')">버튼2</button>
<script>
function openAlert(msg) {
document.getElementById('alert-msg').innerHTML = msg;
document.getElementById('alert').style.display = 'block';
}
document.getElementById('close-btn').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none';
})
</script>
</body>- addEventListener를 활용하면 JS code(within script tag)만으로도 버튼 동작을 구현할 수 있다
- 위에서는 'close-btn' id를 가진 개체를 > 'click' 하는 이벤트가 발생하면 > function을 동작시키는 구문이 된다 - addEventListener에는 event parameter, function parameter 두 개가 들어가는데, parameter 자리에 들어가는 함수를 call-back 함수라고 한다 > 함수를 순차적으로 호출
eunji yang