[javascript] 발생한 JavaScript 이벤트를 확인하는 방법은 무엇입니까?

Program / 글쓴이

선택 목록이 있습니다.

<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에 연결된 이벤트를 볼 수 있습니다.

    • 방화범 옵션만큼 강력한 지 확실하지 않지만 대부분의 경우 충분했습니다.

    약간 다르지만 놀랍도록 멋진 또 다른 옵션은 Visual Event입니다.
    http://www.sprymedia.co.uk/article/Visual+Event+2

    바인딩 된 페이지의 모든 요소를 ​​강조 표시하고 호출 된 함수를 보여주는 팝 오버가 있습니다. 북마크에 대한 꽤 멋진! 다른 브라우저에 대해서는 확실하지 않은 경우 Chrome 플러그인도 있습니다.

    AnonymousAndrew 도 여기서 지적했습니다 .monitorEvents(window);

    답변

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

    • Firebug 열기
    • 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 팁 : 로그 이벤트

    답변

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

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

    • 이벤트로 가득 찬 콘솔보기

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

    설명서 에는 다른 예가 있습니다 . 이 기능은 이전 답변 이후에 추가 된 것 같습니다.

    답변

    Google 크롬 개발자 콘솔 에서 getEventListeners 를 사용할 수 있습니다 .

    getEventListeners (object)는 지정된 객체에 등록 된 이벤트 리스너를 반환합니다.

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

    답변