javascript기초(addEventListener,콜백함수)

addEventListener는 이벤트를 부여해주는 기능이다.

 

 <div class="alert-box" id="alert">
        <p id="change">알림창</p>
        <button class="close-Button" 
        onclick="document.getElementById('alert').style.display = 'none';">X</button>
    </div>

 

알림창 닫기 버튼을 onclick을 이용해 구현하였다. function()을 이용해 함수를 호출하여 깔끔하게 만들수도 있지만,

onclick 을 이용하지 않고 addEventListener 를 이용해 깔끔하게 구현해 낼수있다.

 

 

document.getElementById('close').addEventListener('click',function(){
            document.getElementById('alert').style.display = 'none';
        });

 

다음과 같이 'close'라는 아이디에 이벤트('click')를 발생시키는 것이다, addEventListener('이벤트'.'함수'(){};)

그럼 onclick을 사용하지 않아도 '버튼을 눌렀을때' 해당 기능을 똑같이 구현하면서 좀더 깔끔해질수 있다.

click 이벤트 뿐만 아니라 mouseover 등 다양한 이벤트가 존재한다.

 

 

<div class="alert-box" id="alert">
        <p id="change">알림창</p>
        <button class="close-Button" id="close">X</button>
 </div>

 

위와 같이 아이디 값만 주어도 닫기 버튼이 실행된다.

 

---

콜백함수

addEventListener('scroll', function(){} );

addEventListener() 함수에는 파라미터 자리에 2개의 자료를 넣는다 다음과 같이 함수 파라미터 자리에

들어가는 함수를 '콜백함수'라고 하며

콜백함수는 순차적으로 실행하고 싶을 때 많이 보이는 함수형태이다.