2012-12-28 2 views
5

DOM에 DOM 요소를 추가 한 후에 자바 스크립트에서 이벤트를 트리거하는 방법을 아는 사람이 있습니까?DOM에 추가 할 때 자바 스크립트 이벤트 트리거

일반적인 생각이 같은 것입니다 :

var elem = document.createElement('div'); 
elem.addEventListener('ON_ADD_TO_BODY', function(){console.log(elem.parentNode)}); 
//... LATER ON ... 
parentElemInBody.appendChild(elem); // <- Event is triggered here after append 

요소가 추가 될 때까지 실행을 지연하는 것이 만들 것이다, 그래서 당신이 DOM에 요소를 추가 할 때까지 트리거되지해야 할 몇 가지 기능이 있습니다 .

나중에 명시 적으로 호출하지 않아도이를 수행 할 수있는 방법이 있습니까? 아니면 setTimeout과 요소가 아직 DOM에 추가되었는지 확인하는 해킹을해야합니까?

답변

7

DOMNodeInserted 돌연변이 이벤트를 사용하십시오. 여기

문서 : https://developer.mozilla.org/en-US/docs/DOM/Mutation_events

사용 예제 위의 페이지에 주어진 :

element.addEventListener("DOMNodeInserted", function (ev) { 
    // ... 
}, false); 

참고 : 2016년 4월 17일

돌연변이 이벤트는 현재로서는 사용되지 않습니다. 권장되는 접근 방식은 이제 Mutation Observers입니다.

+0

나는 심지어 그 존재를 알지 못했습니다! 나는 IE9-를 지원할 필요가있다. :(그리고 성능 히트에 대한 그러한 코멘트는 매우 안심하지는 않는다. 나는 당신의 대답이 정확하도록 질문에 구체적으로 명기하지 않았다는 것을 안다.하지만 나는 그것들 모두를 고려할 필요가있다. 최소한 IE9-를 지원하는 하이브리드 방식이 있습니까? – sgcharlie

+0

위의 기능을 지원하지 않는 브라우저의 경우 주기적으로 상위 요소의 하위를 확인하고 콜백을 트리거하는 타이머를 롤아웃해야 할 수 있습니다. – techfoobar

+1

지금은 뮤 테이션 이벤트가 더 이상 사용되지 않습니다. 대신 [Mutation Observers] (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)를 사용하십시오. – ZitRo

관련 문제