어떤 JavaScript 이벤트가 발생했는지 확인하는 방법

어떤 JavaScript 이벤트가 발생했는지 확인하는 방법

---

선택 목록이 있습니다.

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

Closed페이지를 다시로드 하면 선택 합니다. 이 경우 열린 티켓 대신 닫힌 티켓이 표시됩니다. 수동으로하면 잘 작동합니다.

문제는 내가 선택하면 페이지가 다시로드하지 않는다는 것입니다 Closed으로 Watir과 :

browser.select_list(:id => "filter").select "Closed"

이는 일반적으로 일부 JavaScript 이벤트가 시작되지 않음을 의미합니다. Watir로 이벤트를 시작할 수 있습니다.

browser.select_list(:id => "filter").fire_event "onclick"

그러나 어떤 이벤트를 발생시켜야하는지 알아야합니다.

요소에 대해 정의 된 이벤트를 찾는 방법이 있습니까?

---

Chrome 에서도이 작업을 수행 할 수 있다고 덧붙였습니다.

Ctrl+ Shift+ I(개발자 도구)> 소스> 이벤트 리스너 중단 점 (오른쪽).

요소를 마우스 오른쪽 버튼으로 클릭 한 다음 해당 속성 (오른쪽의 패널)을 탐색하여 이미 첨부 된 모든 이벤트를 볼 수도 있습니다.

예를 들면 다음과 같습니다.

왼쪽의 upvote 버튼을 마우스 오른쪽 버튼으로 클릭하십시오.

검사 요소 선택

스타일 섹션 축소 (맨 오른쪽 섹션-이중 쉐브론)

이벤트 리스너 옵션 펼치기

이제 공감대에 묶인 이벤트를 볼 수 있습니다

Firebug 옵션만큼 강력하지만 확실하지는 않지만 대부분의 경우 충분합니다.

조금 다르지만 놀랍도록 멋진 또 다른 옵션은 비주얼 이벤트입니다. http://www.sprymedia.co.uk/article/Visual+Event+2

바인딩 된 페이지에서 호출 된 기능을 표시하는 팝 오버가있는 모든 요소를 ​​강조 표시합니다. 책갈피가 꽤 멋지다! Chrome 플러그인도 있습니다. 다른 브라우저에 대해서는 확실하지 않습니다.

Andrew 는 또한 지적했다 .monitorEvents(window);

---

처럼 보이는 방화범은 (파이어 폭스 부가 기능) 답이있다 :

• 방화범 열기
• HTML 탭에서 요소를 마우스 오른쪽 버튼으로 클릭하십시오.
• 딸깍 하는 소리 Log Events
• 콘솔 탭 사용
• 콘솔 탭에서 지속을 클릭하십시오. 그렇지 않으면 페이지를 다시로드 한 후 콘솔 탭이 지워집니다.
• Closed(수동으로) 선택

• 콘솔 탭에 다음과 같은 것이 있습니다.

  ...
  mousemove clientX=1097, clientY=292
  popupshowing
  mousedown clientX=1097, clientY=292
  focus
  mouseup clientX=1097, clientY=292
  click clientX=1097, clientY=292
  mousemove clientX=1096, clientY=293
  ...
  

출처 : Firebug Tip : 로그 이벤트

---

Chrome과 관련하여 명령 행 API를 통해 monitorEvents ()를 확인하십시오.

• 메뉴> 도구> JavaScript 콘솔을 통해 콘솔을여십시오.
• 시작하다 monitorEvents(window);

• View the console flooded with events

  ...
  mousemove MouseEvent {dataTransfer: ...}
  mouseout MouseEvent {dataTransfer: ...}
  mouseover MouseEvent {dataTransfer: ...}
  change Event {clipboardData: ...}
  ...
  

There are other examples in the documentation. I'm guessing this feature was added after the previous answer.

---

You can use getEventListeners in your Google Chrome developer console.

getEventListeners(object) returns the event listeners registered on the specified object.

getEventListeners(document.querySelector('option[value=Closed]'));

참고URL : https://stackoverflow.com/questions/3787555/how-to-find-out-which-javascript-events-fired