Eventos de mouse javascript
Conforme sugerido pelo nome JavaScript Mouse Events são desencadeados pela interação do mouse com as páginas da web e esses eventos fazem parte do objeto Mouseevent.
Javascript Mouse Events são
Este artigo discute esses um a um em profundidade.
Evento OnClick
Quando um usuário clica em um elemento, o evento onclick acontece. Ele borbulha e pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OnClick é fornecida abaixo.
Sintaxe HTML
Sintaxe JavaScript
objeto.OnClick = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("clique", script);Exemplo
Clique no botão abaixo.
No exemplo acima, um botão aparecerá na página da web. Depois de clicar no botão, o evento onclick acontecerá e uma mensagem aparecerá.
Saída
Antes do botão ser clicado.
Depois que o botão for clicado, a mensagem aparecerá.
Evento OnContextMenu
Quando o menu de contexto de um elemento é aberto usando o clique com o botão direito, o evento ONCONTEXTMENU acontece. Ele borbulha e também é cancelável. Este evento suporta todas as tags HTML e está incluído na versão 3 DOM.
Sintaxe
A sintaxe do evento onctextmenu é dada abaixo.
Sintaxe HTML
Sintaxe JavaScript
objeto.ONCONTEXTMENU = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("contextmenu", script);Exemplo
Clique com o botão direito do mouse em mim.
No exemplo acima, quando você clica com o botão direito do mouse no texto, o evento OnContextMenu acionará e primeiro uma caixa de disciato aparecerá dizendo que você acabou de executar um clique direito e depois de clicar em OK na caixa de diálogo, o menu de contexto abrirá.
Saída
Quando você executa o exemplo acima, o seguinte texto aparecerá.
Agora, quando você clicará com o botão direito do mouse no texto, a caixa de diálogo aparecerá.
Depois de clicar em OK, o menu de contexto será aberto.
Evento OndblClick
Quando um elemento é clicado duas vezes, o evento OndblClick acontece. Ele borbulha e pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OndblClick é fornecida abaixo.
Sintaxe HTML
Sintaxe JavaScript
objeto.ondblClick = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("dblClick", script);Exemplo
No exemplo acima, um botão aparecerá e, quando você clicará duas vezes no botão, os gatilhos do evento OndblClick e uma mensagem aparecerá. Aqui está a saída.
Saída
Antes de clicar duas vezes no botão.
Depois de clicar duas vezes no botão.
Evento OnMousedown
Quando você pressiona um botão do mouse enquanto mantém o mouse sobre um elemento HTML, o evento OnMousedown acontece. Ele borbulha e pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OnMousedown é a seguinte.
Sintaxe HTML
Sintaxe JavaScript
objeto.onMousedown = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("mousedown", script);Exemplo
No exemplo acima, um botão aparecerá na página da web. Quando você clicar com o botão direito do lado do botão, mantendo o ponteiro do mouse no botão, o evento OnMousedown acionará e o texto no botão mudará sua cor de preto para vermelho.
Saída
O botão antes de clicar.
Depois de clicar com o botão direito do mouse enquanto o cursor permanece no botão.
Evento OnMouseEnter
Quando você traz um ponteiro de mouse em um elemento HTML, o evento OnMouseEnter acontece.Não pode borbulhar e não pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OnMouseEnter é a seguinte.
Sintaxe HTML
Sintaxe JavaScript
objeto.onMouseEnter = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("mouseEnter", script);Exemplo
No exemplo acima, um texto aparece na página da web. Quando você traz o cursor do seu mouse sobre o texto, o evento OnMouseEnter será acionado e a cor mudará para vermelho.
Saída
Antes de trazer o ponteiro do mouse no texto.
Depois de trazer o cursor do mouse sobre o texto.
Evento OnMouseleave
Quando você afasta o ponteiro do mouse de um elemento, o evento OnMouseleave acontece. Não pode borbulhar e não pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OnMouseleave é a seguinte.
Sintaxe HTML
Sintaxe JavaScript
objeto.onMouseLeave = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("mouseleave", script);Exemplo
No exemplo acima, um texto aparece na página da web. Quando você afasta o cursor do mouse do texto, o evento OnMouseEnter acionará e a cor mudará para verde.
Saída
Antes de tirar o ponteiro do mouse do texto.
A cor mudará quando o ponteiro do mouse se afastar.
Evento OnMousEmove
Quando você move o cursor do mouse enquanto o mantém em um elemento, o evento OnMouseMove acontece. A única diferença entre este evento e o evento OnMouseEnter é que ele borbulha e pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do OnMouseMove é dada abaixo.
Sintaxe HTML
Sintaxe JavaScript
objeto.onMouSEMove = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("mousemove", script);Exemplo
No exemplo acima, quando você move o cursor do mouse sobre o texto, o evento OnMouSeMove acontecerá e uma caixa de diálogo aparecerá informando que o evento OnMouseMove foi acionado.
Saída
Antes de mover o mouse sobre o texto.
Depois.
Evento OnMouseOut
Quando um cursor de mouse deixa um elemento ou qualquer um de seus filhos, o evento OnMouseOut acontece. A única diferença entre isso e onmouseleave é que ele borbulha e pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OnMouseOut é dada abaixo.
Sintaxe HTML
Sintaxe JavaScript
objeto.onMouseOut = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("mouseout", script);Exemplo
No exemplo acima, você afasta o cursor do mouse do botão, o evento OnMouseOut será acionado e a cor do texto no botão mudará para verde.
Saída
Antes
Depois
Evento OnMouseOver
Quando você traz o cursor do mouse em um elemento ou em qualquer um de seus filhos, o evento OnMouseOver acontece. Ele borbulha e pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OnMouseOver é fornecida abaixo.
Sintaxe HTML
Sintaxe JavaScript
objeto.onMouseOver = function () script;Javascript addEventListener () sintaxe
objeto.addEventListener ("mouseOver", script);Exemplo
No exemplo acima, você move o cursor do mouse no botão, o evento OnMouseOver será acionado e a cor do texto no botão mudará para vermelho.
Saída
Antes
Depois
Evento OnMouseUp
Quando um botão do mouse é liberado enquanto mantém o ponteiro em um elemento, o evento OnMouseUp acontece. Ele borbulha e pode ser cancelado. Este evento suporta todas as tags html que não sejam , ,
, , ,
Sintaxe
A sintaxe do evento OnMouseUp é fornecida abaixo.
Sintaxe HTML
Sintaxe JavaScript
objeto.onMouseUp = function () script;Exemplo
No exemplo acima, um botão aparecerá. Quando você clica com o botão direito do lado do botão e solte enquanto mantém o ponteiro do mouse no botão, o evento OnMouse UP acionará e a cor do texto no botão mudará para verde.
Saída
Antes de clicar com o botão direito do botão.
Depois de liberar o botão enquanto mantém o ponteiro do mouse nele.
Conclusão
Eventos que ocorrem devido a movimentos do mouse são chamados de eventos de mouse javascript. Eventos classificados na categoria de eventos JavaScript Mouse são o evento OnClick, OCONTEXTMENU Evento, OndblClick Event, OnMousedown Event, OnMouseEnter, Evento OnMouseleave, Evento OnMouseMove, Evento OnMouseOut, OnMoveover Event e OnMouseUp Event, Evento OnMouseUp. Todos esses eventos são discutidos em detalhes, juntamente com o exemplo apropriado.
Sobre o autor
Eu sou um profissional de engenharia de software com um profundo interesse em escrever. Estou buscando escrita técnica como minha carreira em tempo integral e compartilhando meu conhecimento através de minhas palavras.
Ver todas as postagensLinux Hint LLC, editor@linuxhint.com
1309 S Mary Ave Suite 210, Sunnyvale, CA 94087
Política de privacidade e termos de uso