돔에 요소가 추가되는 걸 감지하는 이벤트 이름

2013년 6월 8일

javascript, 프론트엔드

요약: DOMNodeInserted와 DOMNodeInsertedIntoDocument다. 전자는 요소에, 후자는 document에 들어오는 것만 감지.

그니까 이런 게 있는 거다. 동적으로 input을 불러와서 넣었는데 바로 datepicker를 실행하고 싶다!

이거를 datepicker 실행을 input 불러오는 함수에 명시하지 않고, 그냥 input에 datepicker라는 클래스만 붙어 있으면 원래 돔에 붙어 있었든 동적으로 불러온 든 간에 바로 datepicker를 실행해 주도록 하고 싶은 거다.

그런 데 사용하라고 나온 게 원래 .live() 함수고, 성능 문제 때문에 대체한 게 .on()이다. 아래처럼 쓰면 된다.

// 문서 로드 이후 추가되는 엘리먼트에 대해
$(".js-datepicker-container").on('DOMNodeInserted', '.datepicker', function(){
  $(this).datepicker();
});

핵심적으로 눈여겨 봐야 하는 것은 바로 DOMNodeInserted 이벤트 타입이다. 특정 돔에 언놈이 끼어들면 바로 감지해 주는 놈이다. 우리가 흔히 사용하는 이벤트 타입인 click과 동급이란 말이다. 물론 click처럼 jQuery가 함수화(.click() 같이) 해놓지는 않았다.

하나 더 알면 좋은데 DOMNodeInsertedIntoDocument라는 이벤트 타입은 아마 document에 뭔가 노드가 추가됐을 때 일어나는 이벤트 타입인 것 같다.

이상 참고글은 “DOMNodeInsertedIntoDocument event”다.