[JS] onclick 대신 이벤트리스너 사용하기

▶ addEventListener()

▸<script>안에 쓴다.

⌨️ document.getElementById(’아이디’).addEventListener(’이벤트명’, function(){코드~~});

 

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

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

            );

• 이벤트 : click, mouseover(마우스 닿을 때) 등

 

 

🔎 https://miind.tistory.com/150 에서 알림창 닫기 버튼만 이벤트 리스너로 바꾸기

<div id="alert" class="alert-box">
            <p id="title"></p>
            <button id="close">닫기</button>
        </div>

        <button onclick="alert('block','아이디를 입력하세요')">버튼1</button>
        <button onclick="alert('block','비밀번호를 입력하세요')">버튼2</button>

        <script>

            // 이벤트 리스너
            document.getElementById('close').addEventListener('click', 
            function(){document.getElementById('alert').style.display='none';}
            );

            function alert(any, text){
                document.getElementById('alert').style.display = any;
                document.getElementById('title').innerHTML = text;
            }
        </script>

 

▶콜백함수 : 파라미터 자리에 들어가는 함수

• 순차적으로 실행하고 싶을 때