이벤트리스너

HTML내에 JS작성하지 않고 코드 만드는 법

기존 방식

<div class="alert-box" id="alert">
  <p id="title">알림창</p>
  <button onclick="알림창열기('none')">닫기</button>
</div>
<script>
function 알림창열기(구멍){
  document.getElementById('alert').style.display = 구멍;
}
</script>

이벤트리스너 활용

<div class="alert-box" id="alert">
  <p id="title">알림창임</p>
  <button id="close"> 닫기 </button>
</div>
<script>
  document.getElementById('close').addEventListener('click', function(){
    document.getElementById('alert').style.display = 'none'
});
</script>