Como descobrir quais eventos JavaScript dispararam?

Eu tenho uma lista de seleção:

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

Quando seleciono Closeda página recarrega. Nesse caso, ele mostra tickets fechados (em vez de abertos). Funciona bem quando faço manualmente.

O problema é que a página não é recarregada quando eu seleciono Closedcom Watir :

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

Isso geralmente significa que algum evento JavaScript não é acionado. Eu posso disparar eventos com Watir:

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

mas preciso saber qual evento disparar.

Existe uma maneira de descobrir quais eventos são definidos para um elemento?

Pensei em acrescentar que você também pode fazer isso no Chrome:

Ctrl+ Shift+ I(Ferramentas do desenvolvedor)> Fontes> Pontos de interrupção do ouvinte de eventos (à direita).

Você também pode visualizar todos os eventos que já foram anexados simplesmente clicando com o botão direito do mouse no elemento e navegando em suas propriedades (o painel à direita).

Por exemplo:

Não tenho certeza se é tão poderoso quanto a opção firebug, mas foi suficiente para a maioria das minhas coisas.

Outra opção que é um pouco diferente, mas surpreendentemente impressionante é o Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2

Ele destaca todos os elementos em uma página que foram vinculados e possui popovers mostrando as funções chamadas. Bastante bacana para um marcador! Também existe um plug-in do Chrome, se você preferir, não tem certeza de outros navegadores.

AnonymousAndrew também apontou aquimonitorEvents(window);

Parece que o Firebug (complemento do Firefox) tem a resposta:

• abrir Firebug
• clique com o botão direito do mouse no elemento na guia HTML
• clique Log Events
• ativar a guia Console
• clique em Persistir na guia Console (caso contrário, a guia Console será limpa após o recarregamento da página)
• selecione Closed(manualmente)

• haverá algo parecido com isso na guia Console:

  ...
  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
  ...
  

Fonte: Dica do Firebug: Log Events

Em relação ao Chrome, faça o check-out do monitorEvents () por meio da API da linha de comando.

• Abra o console via Menu> Ferramentas> Console JavaScript.
• Entrar monitorEvents(window);

• Veja o console inundado de eventos

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

Existem outros exemplos na documentação . Acho que esse recurso foi adicionado após a resposta anterior.

Você pode usar getEventListeners no console do desenvolvedor do Google Chrome .

getEventListeners (object) retorna os ouvintes de eventos registrados no objeto especificado.

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