HTML 요소에 연결된 JavaScript 함수를 확인하는 방법은 무엇입니까?

예를 들어 HTML 요소의 이벤트에 어떤 JavaScript 함수가 할당되는지 알고 싶습니다. onmouseover, onclick 또는 다른 이벤트에 바인딩 된 함수가 있는지 확인하고 싶습니다.HTML 요소에 연결된 JavaScript 함수를 확인하는 방법은 무엇입니까?

출처

2014-09-05 Marco Florian

[VisualEvent] (http://www.sprymedia.co.uk/article/visual+event) – h2ooooooo

VisualEvent에 아무것도 표시되지 않습니다. 나는 함수가 jQuery를 사용하여 요소에 바인딩되지 않았다고 생각한다. –

일반 자바 스크립트에서는 해당 정보에 액세스 할 수 없습니다.

그래서, 옵션 : 당신이 이벤트 리스너를 추적

일부 프레임 워크처럼 당신이 (jQuery를 같은)을 결합하기 위해 자신의 구문을 사용 제공.
일부 라이브러리는 VisualEvent와 같은 이벤트 추적 기능이 작동하는 방식을 "다시 작성"합니다.
마지막으로 add/removeEventListener 함수에 고유 한 래퍼를 작성하여 네이티브 add/removeEventListener 기능. 그러나 모든 가능한 것들을 감싸는지를 확인하는 것은 어려운 일일 수 있습니다.

출처

2014-09-05 06:03:20

사용 된 VisualEvent하지만 디버깅하는 요소에 아무 것도 표시하지 않았습니다. –

.onclick 소품에 대한 경고를했는데 그 기능이 요소에 묶여 있음을 보여주었습니다. 'alert (document.getElementById ("..."). onclick);'. 샘플을 마지막 권장 사항에 추가 할 수 있습니다. 이것은 jQuery를 사용하여 추가되지 않았습니다. 나는 그것이 왜 VisualEvent가 아무 것도 보여주지 않는 이유라고 생각한다. 고마워, 먼저 그것에 대해 생각하지 않았다. –

'onclick'과 평범한 JS의'on ...'은 구식의 (하드 코딩 된) 하드 코딩 된 이벤트 처리이며 알려진 이름 목록을 실행하는 것만으로 쉽게 검사 할 수 있습니다 :'if (obj.onclick) {...}'. 그러나 현대 JS에서 우리는 핸들러를 등록 및 삭제하기 위해'addEventListener ("click", fn)'및'removeEventListener (","fn) 클릭 "옵션을 사용하지 않기 때문에이 옵션을 사용할 수 없습니다. –

Chrome 브라우저에서 입력란을 검사하면 이벤트 리스너 탭을 확인할 수 있습니다. 발사 이벤트를 추적하고 DOM 중단 점을 효과적으로 사용하기 위해 타임 라인을 사용할 수도 있습니다.

출처

2014-09-05 06:13:36

이것은 흥미 롭습니다. Chrome과 이벤트 리스너 탭을 확인했지만 실제로 사용 방법을 알지 못했습니다. 거기에 세 개의 모든 중단 점을 추가했습니다 (하위 트리 수정, attr 수정, 노드 제거). 버튼을 클릭하면 페이지가 중단되지 않고 다시로드됩니다. 페이지 재로드시 중단 점이 없기 때문에 추측됩니다.또한 이벤트 리스너 탭에는 함수의 이름이나 위치에 대한 정보가 없습니다. –

HTML 요소에 연결된 JavaScript 함수를 확인하는 방법은 무엇입니까?

답변

관련 문제