요소에 대한 모든 dom 이벤트보기

Question

날짜를 클릭 할 때 URL 해시를 #으로 지우고 텍스트 상자에서 날짜를 변경하지 않는 jQuery UI datepicker가 있습니다.

어딘가에도 호출되고 오류가 발생하고 jquery 핸들러가 종료되는 일종의 위임 된 이벤트가있는 다른 JavaScript 유틸리티가 있다고 가정합니다.

위임 된 모든 이벤트를 단계별로 확인하거나 볼 수있는 방법은 이 dom 요소과 일치해야합니다.

Answer 1

크롬의 개발 도구 입니다 :

페이지에서

1. 포인트 크롬
2. 마우스 오른쪽 단추로 클릭 jQuery를 UI의 날짜 선택기에서 날짜를하고 "요소 검사"를 선택합니다.
3. 맨 오른쪽에는 다양한 것들이있는 아코디언이 있습니다. 하단에는 "이벤트 리스너"가 있습니다. (현재 버전의 Chrome 개발자 도구는 jQuery의 핸들러 체인을 쿼리하는 것을 포함하여 매우 중요합니다.)
4. "이벤트 리스너"트리 항목을 확장하면 해당 요소와 관련된 후크 이벤트 목록이 표시됩니다. 에 구체적으로 설정되지 않았습니다. 해당 요소는입니다. 예를 들어 질문에서 upvote 버튼을 사용하여이 작업을 수행했다면 이 a.vote-up-off과 document에 모두 연결되어있는 것을 볼 수 있습니다. 따라서 직접 핸들러와 위임 된 핸들러가 해당 이벤트와 어떤 관계가 있는지 알 수 있습니다 요소.

jQuery의 축소되지 않은 버전을 사용하고 datepicker에서 날짜를 클릭하면 이벤트 발송을 진행할 수 있습니다.

그리고 물론, Gabe's shown 문서화되지 않은 jQuery events 데이터를 통해 jQuery 관련 핸들러를 가져 오는 방법. (조상 트리를 걷지 않는 한 당신에게 위임 된 핸들러가 보이지 않을 것이고, 붙어있을 수도있는 non-jQuery 핸들러를 보여주지는 못하지만 여전히 유용한 것들이다.)

Answer 2

jQuery를 사용하면 데이터의 events 키를 액세스하여 모든 요소 이벤트를 볼 수 있습니다.

jsFiddle

예 :

HTML

<input type="text" id="myelement" />​ 

JS 번째 도움을 줄 수

$(function() { 


    var myelement = $('#myelement'); 
    myelement.click(function() { 

     console.log('anonymous event'); 

    }); 

    myelement.click(anotherEvent); 
    myelement.change(anotherEvent); 

    var events = myelement.data('events'); 

    console.log('Number of click events:' + events.click.length); 
    console.log('Number of change events:' + events.change.length); 

}); 

function anotherEvent(){ 
    console.log('another event'); 
}