addEventListener 이벤트리스너 ('click' 사용해보기)

document.getElementById('close').addEventListener('click', function(){

       

      });

=> 해석 : getElementById안의 요소가 클릭되면 괄호 안의 코드 실행시킨다
+여기서 'click'을 event라고 한다. 

<div class="alert-box" id="alert">

  <p id="title">Alert 박스</p>

  <button id="close">X</button>

  </div>

  <button onClick="알림창1열기('아이디입력해라')">버튼1</button>

  <button onClick="알림창1열기('비번입력해라')">버튼2</button>

    <script>

      function 알림창1열기(구멍) {

        document.getElementById('title').innerHTML= 구멍;

        document.getElementById('alert').style.display = 'block';

      }

   

      document.getElementById('close').addEventListener('click', function(){

        document.getElementById('alert').style.display = 'none';

      });

     

    </script>

html내에 id가 close인 X(닫기)버튼을 만들고
이벤트리스너 함수 안에 X버튼을 누르면 id가 alert인 요소를 none되게 하라는 명령