[JavaScript] 매개변수로 함수 받아 eventListener 추가하기 (layer popup 공통 코드 만들기)

*개인 기록용이며, 부족한 부분이 있습니다.

 

1. 프로젝트를 진행하며 확인/경고창을 confirm, alert으로 하지 않고 별도의 layer popup으로 구현하고 싶었다.

2. 처음엔 layer popup별로 파일을 만들어서 import 했는데, 너무 많은 layer popup 파일이 만들어졌다.

   (예를들어, 삭제하시겠습니까?, 제출하시겠습니까?, 취소되었습니다. 등 메시지별 파일 생성)

 

3. 따라서 공통으로 사용될 layer popup 파일을 만든 후 필요에 따라 텍스트와 실행될 함수를 변경해서 사용하고자 한다.

 

4-1. 먼저 함수 호출 시 실행될 함수 인자로 호출하는 방법이다.

 

- 함수 선언

// msg: 메시지, ic: 경고 등 추가할 icon, func: 클릭 시 실행될 함수)
function setConfPopup( msg, ic, func ) {
    document.getElementById('confContent').style.display = 'block';
 
    document.getElementById('c-msg').innerText = msg;
    document.getElementById('c-ic').classList.add(ic);
 
    document.getElementById('popupActBtn').innerText = '확인';
    document.getElementById('popupActBtn').style.display = 'inline-block';
 
    document.getElementById('popupCloseBtn').innerText = '취소';
    document.getElementById('popupCloseBtn').style.display = 'inline-block';
 
    if ( func != null ) {
        document.getElementById('popupActBtn').addEventListener('click', func, {once : true});
    }
 
    document.getElementById('confirm-popup-wrapper').style.display = 'block';
    return;
}

 

- 함수 호출

setConfPopup( '취소되었습니다.', 'ic_none', reloadHTbl);

 

 

4-2. 다른 방법으로 class나 data 값을 지정해서 미리 작성한 addEventListener에 조건문을 두고 각 class나 data 값에 따라 실행할 내용을 작성할 수도 있다.

 

-함수 선언

function setConfPopup( msg, ic, act ) {
    document.getElementById('confContent').style.display = 'block';
 
    document.getElementById('c-msg').innerText = msg;
    document.getElementById('c-ic').classList.add(ic);
 
    document.getElementById('popupActBtn').innerText = '확인';
    document.getElementById('popupActBtn').dataset.act = act;
    document.getElementById('popupActBtn').style.display = 'inline-block';
 
    document.getElementById('popupCloseBtn').innerText = '취소';
    document.getElementById('popupCloseBtn').style.display = 'inline-block';
 
    document.getElementById('confirm-popup-wrapper').style.display = 'block';
    return;
}

 

-함수 호출

setConfPopup( msg, 'ic_none', 'cancel' );

document.getElementById('confFooter').addEventListener('click', function(e) {
    if ( e.target.dataset.act == 'cancel' ) {
        // act가 cancel 일때 실행할 코드
    }
}