자바스크립트를 이용해 동적으로 생성된 노드에 이벤트 추가하는 방법

document.getElementById("btnPrepend").addEventListener를 이용해 이벤트 등록을 할 경우

동적으로 생성된 노드일 경우는 이벤드 등록이 되지 않고 에러가 발생한다.

 

<자바스크립트로 해결하는 방법>

document.addEventListener('click',function(e){
    if(e.target && e.target.id== 'brnPrepend'){
          //do something
     }
 });

 

 

<jQuery로 해결하는 방법>

 

$(document).on('click','#btnPrepend',function(){//do something})

 

현재 하고있는 프로젝트에서는 jQuery를 이용하지 않고 순전히 자바스크립트를 사용하는 상황이다.

jQuery로 동적 노드에 이벤트 등록하는 방법은 알고 있었지만 자바스크립트로 하는 방법은 알지 못해서 html 코드 안에 onClick 이벤트를 같이 넣는 방법을 사용했다.

 

구글링 해보니 html 코드안에 자바스크립트 코드가 같이 존재하는 방법보다는 addEventListener를 활용한 방법이 더 바람직하다고 하니 이 방법을 써야겠다!!