Como descobrir quais eventos JavaScript dispararam?

122

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?

javascript events watir dom-events browser-automation Željko Filipin
fonte
Esta pergunta lista mais ferramentas: stackoverflow.com/questions/570960/…
Željko Filipin
2
Evento visual, sprymedia.com.br/article/Visual+Event . Estou certo de que isso vai ajudar a metade das pessoas que aterram em desta página stackoverflow :)
Cedric

Respostas:

143

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:

  • Clique com o botão direito do mouse no botão de votação à esquerda
  • Selecionar elemento de inspeção
  • Recolher a seção de estilos (seção à direita - divisa dupla)
  • Expanda a opção de ouvintes de eventos
  • Agora você pode ver os eventos vinculados ao voto positivo

    • 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);

    Chris
    fonte
    2
    Não consegui descobrir como ver quais eventos foram disparados de uma das maneiras que você sugeriu.
    Željko Filipin
    1
    Atualização: não está Scriptsdentro das ferramentas de desenvolvimento (ou inspetor), você precisa acessar Sourcese, em seguida, olhar o menu à direita.
    Aledalgrande
    @aledalgrande Obrigado, atualizei. (Para quem lê, isso se aplica apenas à primeira solução, a segunda ainda usa o inspetor).
    Chris
    1
    Existe uma razão específica para você escolher o botão upvote como exemplo? : P
    George Dimitriadis
    @GeorgeDimitriadis haha ​​sprung: P
    Chris
    112

    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

    Željko Filipin
    fonte
    4
    Muito obrigado, eu não sabia sobre esse recurso do Firebug. Talvez eu precise realmente RTFM algum tempo.
    Marcel Korpel
    Eu não sabia disso até alguns minutos atrás. Eu estava escrevendo a pergunta e encontrei a resposta ao longo do caminho. :)
    Filipeljko Filipin
    2
    Um blog recente de desenvolvedor do Firebug: softwareishard.com/blog/firebug/firebug-tip-log-dom-events
    jakub.g
    1
    Olá, tentei clicar com o botão direito do mouse no firebug, mas não consigo encontrar a opção Log Events. Você pode me ajudar a encontrar este?
    Rajagopalan
    2
    Olá, o plugin Firbug não existe mais. ? Então Como devo atingir esse favor, me ajude
    HimaaS
    71

    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.

    AnonymousAndrew
    fonte
    5
    Agradável! Em conjunto com jQuery:monitorEvents($('#element').get())
    Klaus
    1
    Para parar de monitorar o usounmonitorEvents(window)
    Augustas
    0

    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]'));
    JSON C11
    fonte