페이지에 아직 추가되지 않은 요소에 javascript 이벤트 핸들러를 등록하는 방법

Question

사용자 상호 작용을 기반으로 데이터 테이블을 동적으로 생성하는 Greasemonkey 스크립트를 작성하려고합니다. 데이터 테이블을 만들었습니다. 내 문제는 내가 테이블을 만들 때마다 두 번 통과해야한다는 것입니다. 하나는 테이블을 만들고 다른 하나는 (ID로) 이벤트 처리기를 추가하고 그들에게 다양한 이벤트 핸들러.

테이블을 만들고 HTML에 삽입하기 전에 테이블에 onClick 이벤트를 추가하려고하면 "구성 요소를 사용할 수 없음"예외가 발생합니다.

두 번째 패스에서 핸들러를 추가 할 때 개별적으로 ids 목록과 그 요소에 대해 수행해야 할 작업을 유지해야하기 때문에 이것은 엄청난 번거 로움입니다. 이드를 기반으로 엘리먼트에 대해 무엇을해야하는지 알고 있습니다.

이 작업을 수행하는 더 좋은 방법이 있어야합니다. 나는 아직 그것을 이해하지 못했습니다. 누구든지 아이디어가 있습니까?

Answer 1

jQuery를 1.3 이상이 존재 아직하지 않는 요소에 대한 이벤트 핸들러를 설정할 수있는 새로운 라이브() 함수 .. check it out

Answer 2

그런 다음, 페이지에 추가 할 요소 기다릴 필요가있다 이벤트 핸들러를 추가하십시오.

"이 유형의 모든 요소에 현재와 미래에 추가하십시오"라고 쉽게 말할 방법이 없습니다.

타이머가 새 요소를 주기적으로 확인하고 이벤트 대기열 (또는 다른 속성)을 모든 장면 뒤에서 적용 할 수 있습니다. 이것은 추상화되어 재사용 될 수 있습니다. 예를 들어 Jquery이 그런 종류의 일을 할 수 있습니다.

Answer 3

첫째, 모든 단일 TD에 왜 다른 ID가 필요한지 알고 싶습니다. ID와 같은 중요한 정보를 보유하고 있습니까? 이 상황에서 루프 내에서 각 TD를 만드는 것이 더 나을 수도 있습니다. 또한 분명히 존재하지 않는 DOM 요소에 이벤트 처리기를 연결할 수 없습니다! DOM에 주입 할 필요는 없지만 일부 용량으로 존재해야합니다.

jQuery의 live()는 수수께끼 같은 신비는 아니며 이벤트 위임을 사용하기 때문에 이벤트를 표와 같은 상위 요소에 연결 한 다음 클릭 대상에 따라 어떤 일이 발생할지 결정합니다. 여기에 기본적인 예가 있습니다. 나는 '몸'요소에 대한 핸들러를 등록하고는 TD 요소 I 해봐요() 만약 그때, 대상이 무엇인지 볼 때마다 테스트 ->

document.body.onclick = function(e) { 

    var realTarget = e ? e.target : window.event.srcElement; 

    if (realTarget.nodeName.toLowerCase() === 'td') { 
     doSomething(); 
    } 

}; 

이벤트 위임 뭔가라는 이벤트 버블 링에 의존는 (또는 "전파 (Propogation)"). 이는 최신 브라우저가 이벤트 모델을 구현하는 방식입니다. 트리거되는 각 이벤트는 더 이상 진행될 수 없을 때까지 DOM을 통해 위쪽으로 이동합니다. 따라서 단락 내의 앵커를 클릭하면 앵커의 '클릭'이벤트가 시작되고 단락의 '클릭'이벤트가 실행됩니다.

Answer 4

JimmyP가 지적했듯이 event bubbling을 사용하면 쉽게 문제를 해결할 수 있습니다. 당신은 브라우저의 불일치를 해결하기 위해 래퍼 함수를 ​​작성하는 것이 좋습니다 - 내 자신의 버전 can be found here과 같이 사용됩니다 :

capture('click', '#element-id', function(event) { 
    // `this` will be the originating element 
    // return `false` to prevent default action 
});