[java script]Element.addEventListener();

Element.addEventListener('이벤트명:String', 콜백함수:Function());  

 

이벤트명은 아래에 자세히 나와있다.

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

 

콜백함수는 이벤트가 발생했을 때 실행하고 싶은 함수명을 쓰면 된다. 

 let layerBtn= document.querySelector('#btn'); 
    let closeBtn= document.querySelector('.close');  
    layerBtn.addEventListener('click',layerFn);
    closeBtn.addEventListener('click',layerFn);

    function layerFn(){
      let popup=document.querySelector('#layer_popup_wrap');
      let type='none'; 
      //type= (popup.style.display=='none') ? 'block':'none'; 
      if(popup.style.display=='none'){
        type='block';
        //popup.style.display='block'; 
      }
      else{
        type='none';
        //popup.style.display='none'; 
      }
      popup.style.display=type;
    }

 버튼을 클릭하면 레이어팝업이 등장하고(display:block). 닫는 버튼을 클릭하면 레이어 팝업이 사라지는(display:none). 자바스크립트다. 

 

---

자바스크립트는 html을 조작한다. html에 클래스를 바꿔주는 식으로 조작하는 거지 css를 조작하거나 읽는 게 아니기 때문에 자바스크립트를 통하여 엘리먼트의 style을 읽거나 조작하려면  html에 미리  style 속성을 주어야한다. 

 

<div id="layer_popup_wrap" style="display:none;">