jQuery를 사용하여 요소에 바인딩 된 이벤트를 찾을 수 있습니까?

이 링크에서 두 개의 이벤트 핸들러를 바인딩합니다.

<a href='#' id='elm'>Show Alert</a>

자바 스크립트 :

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

요소에 바인딩 된 모든 이벤트 목록을 가져올 수있는 방법이 id="elm"있습니까?

최신 버전의 jQuery에서는이 $._data메소드를 사용하여 jQuery가 해당 요소에 첨부 한 모든 이벤트를 찾습니다. 참고 , 이것은 내부에서만 사용 방법 :

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

결과는 $._data우리가 설정 한 두 이벤트를 모두 포함하는 객체가됩니다 ( mouseout속성이 확장 된 상태에서 아래 그림 참조 ).

그런 다음 Chrome에서 핸들러 함수를 마우스 오른쪽 버튼으로 클릭하고 "함수 정의보기"를 클릭하여 코드에서 정의 된 정확한 위치를 표시하십시오.

일반적인 경우 :

• 히트 F12열려있는 개발 도구에
• Sources탭을 클릭 하십시오
• 오른쪽에서 아래로 스크롤 Event Listener Breakpoints하여 트리를 확장합니다.
• 듣고 싶은 이벤트를 클릭하십시오.
• 대상 요소와 상호 작용합니다. 발사하면 디버거에 중단 점이 생깁니다.

마찬가지로 다음을 수행 할 수 있습니다.

• 대상 요소를 마우스 오른쪽 버튼으로 클릭하고 " Inspect element"를 선택하십시오 .
• dev 프레임의 오른쪽에서 아래로 스크롤하면 맨 아래는 ' event listeners'입니다.
• 트리를 확장하여 요소에 첨부 된 이벤트를 확인하십시오. 이것이 버블 링을 통해 처리되는 이벤트에 대해 작동하는지 확실하지 않습니다 (추천하지 않습니다)

나는 후손을 위해 이것을 추가하고 있습니다; 더 많은 JS를 작성하지 않는 더 쉬운 방법이 있습니다. 은 Using 파이어 폭스에 대한 놀라운 불을 지르고 애드온을 ,

1. 요소를 마우스 오른쪽 버튼으로 클릭하고 'Firebug로 요소 검사'를 선택하십시오.
2. 사이드 바 패널 (스크린 샷에 표시)에서 작은> 화살표를 사용하여 이벤트 탭으로 이동하십시오.
3. 이벤트 탭에는 각 이벤트에 대한 이벤트 및 해당 기능이 표시됩니다
4. 옆의 텍스트는 기능 위치를 보여줍니다

이제 자바 스크립트 함수 getEventListeners ()를 사용하여 객체에 바인딩 된 이벤트 리스너 목록을 얻을 수 있습니다.

예를 들어 dev 도구 콘솔에 다음을 입력하십시오.

// Get all event listners bound to the document object
getEventListeners(document);

jQuery를 감사 플러그인 플러그인은 일반 크롬 개발 도구를 통해이 작업을 수행 할 수 있도록해야한다. 완벽하지는 않지만 일반적인 jQuery 핸들러뿐만 아니라 요소 / 이벤트에 바인딩 된 실제 핸들러를 볼 수 있어야합니다.

이는 FireFox Quantum 58.x에서 jQuery 선택기 / 개체에만 해당되는 것은 아니지만 Dev 도구를 사용하여 요소에서 이벤트 핸들러를 찾을 수 있습니다.

1. 요소를 마우스 오른쪽 버튼으로 클릭
2. 상황에 맞는 메뉴에서 '요소 검사'를 클릭하십시오.
3. 요소 (노란색 상자) 옆에 'ev'아이콘이 있으면 'ev'아이콘을 클릭하십시오.
4. 해당 요소 및 이벤트 핸들러에 대한 모든 이벤트를 표시합니다.

if ($ ._ data ($ ( "a.wine-item-link") [0]). events == null) {... 이와 같은 것을 사용하여 확인을 위해 이벤트 처리기를 다시 바인딩합니다.} 내 요소가 이벤트에 바인딩 된 경우. 해당 요소에서 모든 이벤트 핸들러를 연결 해제 한 경우 여전히 정의되지 않음 (널)이라고 표시됩니다. 이것이 내가 if 표현식에서 이것을 평가하는 이유입니다.

이벤트는 해당 요소가 아닌 문서 자체에 첨부 될 수 있습니다. 이 경우 다음을 사용하려고합니다.

$._data( $(document)[0], "events" );

올바른 선택기로 이벤트를 찾으십시오 .

그런 다음 핸들러 를보십시오 > [[FunctionLocation]]

이처럼 복잡한 DOM 쿼리를 $ ._ data $._data($('#outerWrap .innerWrap ul li:last a'), 'events')에 전달하면 브라우저 콘솔에서 undefined가 발생합니다.

따라서 $._data($('#outerWrap')[0], 'events')a 태그의 이벤트를 보려면 상위 div에서 $ ._ data를 사용해야했습니다 . 동일한 JSFiddle은 다음과 같습니다. http://jsfiddle.net/giri_jeedigunta/MLcpT/4/