html 요소에 첨부 된 이벤트를 어떻게 볼 수 있습니까?

html 요소에 첨부 된 이벤트를 어떻게 볼 수 있습니까?

---

안녕하세요 저는 새로운 프로그래머이며 여전히 배우고 있습니다. 이것은 내가 알아 내려는 코드입니다.

<div id="buy" class="buy button">Buy</div>

div (버튼)를 클릭하면 일부 자바 스크립트 코드가 실행되지만 그게 맞는지 모르겠습니다. 클릭이 발생하면 어떤 기능이 실행되는지 어떻게 알 수 있습니까? 리스너가이 요소에 연결되는 방법

---

Firefox 및 Firebug를 사용하는 경우 FireQuery를 설치해 볼 수 있습니다. jQuery에 의해 바인딩 된 핸들러를 볼 수 있도록 만들 것 입니다. http://firequery.binaryage.com/

---

Google 크롬의 개발자 도구 (공구 아이콘> 도구> 개발자 도구 클릭)에서 요소 탭에서 요소를 선택하고 오른쪽에서 '이벤트 리스너'패널을 열면 모든 이벤트가 표시됩니다.

---

ECMAscript 자체를 "그냥"사용한다고해서 정말 좋은 방식으로 할 수는 없습니다. 예를 들어, DOM 레벨 1 에 의해 추가 된 클릭 이벤트 핸들러 가

document.getElementById('buy').onclick = function() {};

물론 노드 자체에서 해당 속성을 쉽게 가로 챌 수 있습니다. 상황이 경우 더 복잡해지고있다 DOM 레벨 2 로 활동하기 시작 .addEventListener()respectevily .attachEvent(). 이제 모든 다른 리스너가 바인딩 된 위치를 찾을 수있는 "장소"가 없습니다.

jQuery를 사용하면 더 좋아집니다. jQuery는 호출의 DOM 노드에 연결된 특수 객체에 모든 이벤트 핸들러 기능을 보유합니다. 다음 .data()과 같은 노드에 대해 -expando 속성을 가져 와서 확인할 수 있습니다.

$('#buy').data('events');

그러나 이제는 이벤트 리스너를 노드에 바인딩하는 세 가지 다른 방법을 이미 설명했습니다 (실제로 jQuery와 같은 라이브러리는 DOM 레벨 1 또는 2 메소드도 사용하기 때문에 두 가지 방법).

이벤트가 위임에 의해 트리거되면 정말 추악 해지고 있습니다. 즉, 클릭 이벤트를 일부 상위 노드에 바인딩하여 해당 이벤트가 버블 링되기를 기다리고 있으므로 target. 그래서 지금 우리는 심지어 사이에 직접적인 관계가없는 node과를 event listener.

결론은 브라우저 플러그인 또는 VisualEvent 와 같은 것 입니다.

---

" Visual Event 2 "스크립트를 북마크로 사용하거나 Chrome 확장 프로그램 과 동일한 스크립트를 사용할 수 있습니다 .

이 스크립트는 dom-elements에 연결된 모든 js 이벤트를 보여줍니다.

---

사용하다 jQuery("#buy").data('events');

http://api.jquery.com/jQuery.data/ 가 흥미로울 수 있습니다.

---

기존 element.onclick=핸들러 또는 HTML을 사용하여 첨부 된 이벤트 핸들러 는 스크립트 또는 <element onclick="handler">인디 element.onclick버거 의 속성에서 간단하게 검색 할 수 있습니다 .

DOM 레벨 2 이벤트 addEventListener 메소드 및 IE의 attachEvent를 사용하여 첨부 된 이벤트 핸들러는 현재 스크립트에서 전혀 검색 할 수 없습니다. DOM 레벨 3은 한 번 모든 리스너를 얻기 위해 element.eventListenerList를 제안했지만 이것이 최종 사양에 도달할지 여부는 불분명합니다. 오늘날 브라우저에는 구현이 없습니다.

---

FireFox를 사용하는 경우 FireBug가 설치되어 있어야합니다. 그런 다음 FireQuery를 설치하면 어떤 jQuery 이벤트가 어떤 객체에 바인딩되어 있는지 확인할 수 있습니다.

http://getfirebug.com/

http://firequery.binaryage.com/

---

이것이 제가 찾은 가장 쉬운 방법입니다 : http://www.sprymedia.co.uk/article/Visual+Event

Javascript에서 이벤트로 작업 할 때 어떤 이벤트가 어디서 구독되는지 추적하지 못하는 경우가 많습니다. 점진적 향상을 사용하는 최신 인터페이스에서 일반적으로 발생하는 많은 이벤트를 사용하는 경우 특히 그렇습니다. 자바 스크립트 라이브러리는 또한 기술적 관점에서 청취자에게 또 다른 복잡성을 추가하는 반면, 개발자 관점에서는 물론 삶을 훨씬 더 쉽게 만들 수 있습니다! 그러나 일이 잘못되면 그 이유를 추적하기가 어려울 수 있습니다.

이로 인해 이벤트가 구독 된 페이지의 요소, 해당 이벤트가 무엇인지, 이벤트가 트리거 될 때 실행되는 기능을 시각적으로 보여주는 Visual Event라는 Javascript 북마크릿을 만들었습니다. 이는 주로 디버깅을 지원하기위한 것이지만 다른 페이지에서 구독 한 이벤트를 보는 것도 매우 흥미롭고 유익 할 수 있습니다.

툴바 (FF 또는 Chrome)로 드래그 할 수있는 북마크 버튼이 있으며 첨부 된 이벤트를보고 싶은 페이지에서 버튼을 클릭하기 만하면됩니다. 잘 작동합니다! (적어도 jQuery 또는 다른 라이브러리에 의해 첨부 된 이벤트의 경우).

---

아래는 내가 과거에 사용했던 것인데, 당신이 찾고있는 것일 수도 있습니다. 이것이하는 일은 페이지 요소의 속성 (아래 예제에서는 문서의 "Title"속성)을 감시 한 다음 해당 속성이 변경 될 때마다 JS 호출 스택과 함께 경고를 표시하는 것입니다. 화재를 찾으려는 코드가 무엇이든 먼저 DOM에 이것을 가져와야하지만 문제의 원인을 식별 할 수 있기를 바랍니다.

Firefox를 사용하고 JavaScript 디버깅을 위해 Firebug를 사용하는 것이 좋습니다.

// Call stack code
function showCallStack() {
   var f=showCallStack,result="Call stack:\n";

   while((f=f.caller)!==null) {
      var sFunctionName = f.toString().match(/^function (\w+)\(/)
      sFunctionName = (sFunctionName) ? sFunctionName[1] : 'anonymous function';
      result += sFunctionName;
      result += getArguments(f.toString(), f.arguments);
      result += "\n";
   }
   alert(result);
}


function getArguments(sFunction, a) {
   var i = sFunction.indexOf(' ');
   var ii = sFunction.indexOf('(');
   var iii = sFunction.indexOf(')');
   var aArgs = sFunction.substr(ii+1, iii-ii-1).split(',')
   var sArgs = ''; 
   for(var i=0; i<a.length; i++) {
      var q = ('string' == typeof a[i]) ? '"' : '';
      sArgs+=((i>0) ? ', ' : '')+(typeof a[i])+' '+aArgs[i]+':'+q+a[i]+q+'';
   }
   return '('+sArgs+')';
} 

var watchTitle = function(id, oldval, newval) { showCallStack(); }

// !! This is all you should need to update, setting it to whatever you want to watch.
document.watch("title", watchTitle);  

---

1. 페이지를 마우스 오른쪽 버튼으로 클릭하고 페이지 소스보기를 선택합니다.
2. <script>태그 찾기
3. 을 찾아 $("#buy")뭔가 언급 onClick또는.on("click",function(){...});
4. 찾을 수없는 경우 다음 줄을 따라 검색하십시오. document.getElementById("buy")
5. function이벤트 핸들러 코드가 있는 , 또는 코드를 찾았습니다 .

$("#buy") is JQuery's way of saying find an element that has an id attribute of buy and if it has a . following it with some function, that function is acting upon the element that was found by JQuery.

---

Are you using jQuery? If so, you want to search for one of these three lines of code:

$("#buy").click //the div is refered by its id

or

$(".buy").click //the div is refered to by the style "buy"

or

$(".button").click //refered to by the style "button"

Most newer browsers have "Developer Tools" built into them by pressing F12 (at least in IE and Chrome). That may help you do some further debugging and tracing.

참고URL : https://stackoverflow.com/questions/11832706/how-can-i-see-the-event-that-is-attached-to-an-html-element