사용자 정의 이벤트

function buildAlert(title, message){

  const $alert = document.createElement('div');

  const id = Math.ceil(Math.random() * 1000);

  console.log(id);

  $alert.className = 'alert';

  const $span = document.createElement('span');

  $span.classList.add('close');

  $span.innerHTML = '×';

  const $h3 = document.createElement('h3');

  $h3.textContent = title;

  const $p = document.createElement('p');

  $p.textContent = message;

  $alert.appendChild($span);

  $alert.appendChild($h3);

  $alert.appendChild($p);

  $alert.id = id;

  $alert.querySelector('span.close')

  .addEventListener('click', e=>{

    const closeEvt = new CustomEvent('close', {

      bubbles : true,

      detail : {id, message}

    });

    $alert.dispatchEvent(closeEvt);

    $alert.remove();

  });

  document.body.prepend($alert);

  return $alert;

}

document.getElementById('order-btn')

.addEventListener('click',e=>{

  const $alert = buildAlert('에러', '로그인 해 주세요.');

  $alert.addEventListener('close',e=>{

    console.log(e.detail);

    console.log('error 창을 닫습니다.');

  })

});

 

 

여튼 중요한 부분은

.addEventListener('click', e=>{

    const closeEvt = new CustomEvent('close', {

      bubbles : true,

      detail : {id, message}

    });

    $alert.dispatchEvent(closeEvt);

    $alert.remove();

  });

CustomEvent(이벤트종류, 이벤트옵션에대한객체)

 

이벤트대상.dispatchEvent(커스텀이벤트)

 

커스텀이벤트 등록할 때는 dispatchEvent() 써야 함.