Introdução aos Eventos do jQuery
O JQuery é uma das bibliotecas javascript mais populares e amplamente usadas, desenvolvida e projetada para simplificar a arquitetura DOM baseada em HTML, ou seja, as propriedades do modelo de objeto de documento, como leitura, manipulação e passagem de árvore. As outras propriedades do jQueries, como manipulação de eventos, Ajax, estilo e animação CSS, também são simplificadas. É uma biblioteca de código-fonte aberto e gratuita, usada normalmente em 73% dos aprox. 10 milhões de sites que estão sendo usados hoje. Os principais recursos do Jquery incluem propriedades baseadas em elementos DOM, como seletores, manipulação e passagem em árvore, o que torna o trabalho no JQuery muito mais interessante, fácil e conveniente.
É usado para fornecer uma interface muito simples e clara que pode ser usada para aplicar vários tipos de efeitos surpreendentes. Esses métodos também permitem o uso e a aplicação rápidos dos recursos mais usados e seus efeitos, além de configurações simples ou mínimas. Os comandos básicos, como os que mostram e ocultam elementos, são praticamente os mesmos e os demais também estão na mesma categoria com o que qualquer um que deseje vê-los esperaria. O comando show (), nesse caso, é usado para mostrar os elementos em um pacote totalmente empacotado e um comando combinado set e hide () é usado para ocultar esses recursos.
O Jquery é feito sob medida, usado para responder aos eventos fornecidos em uma página HTML. Os eventos em si são as ações dos diferentes visitantes que podem ser respondidas pela página da web. Em outras palavras, um evento é usado para representar levemente o momento exato ou exato, particularmente algo que aconteceu. Isso pode incluir cenários como mover o mouse sobre o elemento, clicar e selecionar o botão de opção e também clicar no elemento. O termo demissão ou demissão é muitas vezes usado junto com o evento. Por exemplo, o evento de pressionamento de tecla é acionado ou denominado mais popularmente como acionado, é principalmente quando o momento em que você pressiona a tecla. Aqui está a lista dos eventos DOM mais comuns e mais usados.
Eventos do mouse, como dblclick, mouseleave, mouseenter, clique. Existem alguns outros eventos do teclado, como Keypress, keyup e keydown. Existem outras formas de eventos, como eventos de alteração, envio, desfoque e foco. Existem outros eventos que são documentos ou janelas, como redimensionar, carregar, rolar, descarregar etc. no Jquery. A maioria dos eventos baseados no DOM possui o método jquery correspondente. Portanto, para atribuir um novo evento a todos os parágrafos existentes na página, a sintaxe abaixo pode ser usada.
Eventos e sintaxe do jQuery
Aqui estão os seguintes eventos do jQuery com sintaxe fornecida abaixo
1. Clique em ()
Este evento ocorre sempre que o elemento é clicado. Esse método click () é usado para acionar o elemento clicado, também conhecido como evento click, usado para anexar a uma função sempre que ocorrer um evento relacionado ao clique.
Sintaxe
$(selector).click()
Quando você deseja anexar uma função a este evento de clique,
$(selector).click(function)
A próxima etapa sempre acompanha a ação e o gatilho que formam o funcionamento e o funcionamento reais da função e, portanto, sempre que o evento é acionado, uma função deve ser passada para o evento.
Exemplo
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Este método é usado para anexar uma função de manipulador de eventos ao elemento HTML fornecido. Esta função é executada sempre que o usuário clica duas vezes no elemento HTML fornecido.
Sintaxe
$(selector).dblclick()
Exemplo
$("p").dblclick(function()(
$(this).hide();
));
3. mudança ()
Este evento ocorre sempre que o valor de um elemento específico é alterado, ou seja, funciona apenas para a entrada, área de texto e elementos selecionados. O método change () é usado para acionar um evento de alteração ou aquele que é anexado à função sempre que um evento relacionado à mudança deve ocorrer.
Sintaxe
$(selector).change()
Exemplo
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. desfoque ()
Esse evento relacionado ao desfoque ocorre apenas quando o elemento perde o foco. O método blur () usado para acionar o evento blur ou aquele usado para anexar uma função a ser executada sempre que ocorrer um evento blur. Este método é usado frequentemente com o método focus ().
Sintaxe
$(selector).blur()
Exemplo
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. dados
Esta propriedade event.data é usada para conter os dados passados opcionais relacionados a um método de evento quando o manipulador em execução da corrente é vinculado.
Sintaxe
event.data
Exemplo
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. espaço para nome
Esta propriedade é usada para retornar um espaço para nome personalizado sempre que o evento for disparado. A propriedade é usada para ser definida pelos autores do plug-in, que podem ser usados para lidar com tarefas de maneira muito diferente, dependendo do espaço para nome usado. Os espaços para nome que começam com o sublinhado são espaços reservados para o JQuery.
Sintaxe
event.namespace
Exemplo
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Esta é a propriedade do tipo de página que é usada para retornar a posição do ponteiro do mouse relacionada à borda esquerda do documento. Esse tipo de propriedade é frequentemente usado com o evento. Propriedade PageY.
Sintaxe
event.PageX
Exemplo
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PageY
Esta é a propriedade do tipo de página que é usada para retornar a posição do ponteiro do mouse relacionada à borda superior do documento. Esse tipo de propriedade é frequentemente usado com o evento. Propriedade PageX.
Sintaxe
event.PageY
Exemplo
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. resultado
A propriedade event.result é usada para conter o valor anterior ou o último retornado pelo manipulador de eventos, que é especificamente acionado pelo evento específico.
Sintaxe
event.result
Exemplo
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Este método event.preventDefault () relacionado ao evento é usado para impedir que a ação padrão de um elemento específico aconteça. Os exemplos desse cenário incluem:
Impedindo o envio de um botão de envio de um formulário
Impedir que um link acesse um URL específico.
Um evento específico, como event.preventDefault (), é usado para verificar se o método ou a função preventDefault () é usada para chamar o evento.
Sintaxe
event.preventDefault()
Exemplo
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Esta propriedade é usada para retornar qual elemento DOM deve ser acionado por este evento. Muitas vezes, não é útil comparar o event.target para que isso seja feito para determinar se o evento específico está sendo tratado devido a um evento chamado bubbling.
Sintaxe
event.target
Exemplo
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Essa propriedade é usada para retornar o número de milissegundos desde o horário de 1 de janeiro de 1970, que corresponde à primeira vez em que o evento foi realmente acionado.
Sintaxe
event.TimeStamp
Exemplo
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. tipo
Isso é usado para monitorar o evento e seu tipo que é acionado.
Sintaxe
event.type
Exemplo:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. qual ()
Essa propriedade é usada para retornar a tecla do teclado ou o botão do mouse que foi pressionado para o evento.
Sintaxe
event.which
Exemplo
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. foco ()
Essa propriedade e o foco desse evento ocorrem quando um elemento é usado para obter o foco que ocorre quando ele é selecionado pelo clique do mouse ou navegando uma guia nele. O método focus () é usado para acionar o evento de foco ou anexar uma função para executar quando ocorrer um evento relacionado ao foco.
Sintaxe
$(selector).focus()
Exemplo
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. pairar ()
Este método de foco é usado para especificar duas funções usadas para executar quando o ponteiro do mouse passa o mouse sobre todos os elementos selecionados. Esse método aciona os eventos mouse e mouse. Se houver apenas uma função especificada, ela será executada para os eventos mouse e mouse.
Sintaxe
$(selector).hover(inFunction, outFunction)
Exemplo
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
A ordem dos eventos relacionados ao evento de keydown é:
- Keydown: É usado quando a chave está descendo.
- Tecla: Isso ocorre quando a tecla do teclado é pressionada
- Keyup: como o nome sugere, isso é usado quando a tecla do lado superior é pressionada.
Sintaxe
$(selector).keydown()
Exemplo
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. pressionamento de tecla ()
A ordem dos eventos relacionados ao evento de pressionamento de tecla é:
- Keydown: É usado quando a chave está descendo.
- Tecla: Isso ocorre quando a tecla do teclado é pressionada
- Keyup: como o nome sugere, isso é usado quando a tecla do lado superior é pressionada.
Sintaxe
$(selector).keypress()
Exemplo
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
A ordem dos eventos relacionados ao evento de keyup é:
- Keydown: É usado quando a chave está descendo.
- Tecla: Isso ocorre quando a tecla do teclado é pressionada
- Keyup: como o nome sugere, isso é usado quando a tecla do lado superior é pressionada.
Sintaxe
$(selector).keyup()
Exemplo
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Ao vivo ()
Esse método ou função lives () do jquery é usado para anexar um ou mais manipuladores baseados em eventos a serem usados principalmente nas listas de elementos selecionadas e também especifica a função a ser executada onde os eventos ocorrem. Todos os manipuladores de eventos são anexados usando o método live (), que funcionará para os elementos atual e FUTURE, baseados na correspondência dos elementos seletores, que podem ser como um novo elemento criado pelo script. O método die () pode ser usado para destruir o método live ().
Sintaxe
$(selector).live(event, data, function)
Exemplo
$("button").live("click", function()(
$("p").slideToggle();
));
21. Load ()
O método load é usado para anexar um manipulador de eventos ao evento baseado em carga. O evento load ocorre sempre que um especificado. Este evento ocorre e funciona sempre que os elementos associados ao URL, como imagem, quadro, script, iframe e o objeto da janela. O evento load pode ou não ser acionado e depende do navegador, mesmo que a imagem esteja em cache. Há também um método AJAX, que é um método jquery conhecido como load (), o que é chamado depende dos parâmetros.
Sintaxe
$(selector).load(function)
Exemplo
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Este evento ocorre apenas quando o botão esquerdo do mouse é pressionado sobre a lista selecionada do elemento. O método ou a função mousedown () é usado para disparar esse evento que anexa uma função e é executado sempre que um evento mousedown acontece. Esse método geralmente é usado junto com o método mouseup ().
Sintaxe
$(selector).mousedown()
Exemplo
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Desligado ()
Este método é usado para remover um manipulador de eventos anexado ao método on (). Pode-se dizer que é a substituição do método unbind (), die () e undelegate (). Esse método é usado para trazer muita consistência à API e é sempre recomendável usar esse método, pois isso é usado para simplificar a base de código do Jquery.
Sintaxe
$(selector).off(event, selector, function(eventObj), map)
Exemplo
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Esse evento ocorre sempre que o ponteiro do mouse está sobre o elemento especificado e entra quando ele aciona o evento mouseenter ou é usado para anexar uma função que pode ser usada para executar sempre que um evento baseado no mouseenter ocorrer.
Sintaxe
$(selector).mouseenter()
Exemplo
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. ratoeira ()
Esse evento ocorre sempre que o ponteiro do mouse está sobre o elemento especificado e sai quando dispara o evento de saída do mouse ou é usado para desanexar uma função que pode ser usada para executar sempre que um evento com base em mouse.
Sintaxe
$(selector).mouseleave()
Exemplo
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
O Jquery é uma das bibliotecas mais usadas quando se trata de desenvolvimento de front-end. Isso fornece recursos exclusivos e uma ampla gama de funções que ajudam a tornar a vida de desenvolvedores e pessoas em geral fácil e conveniente. Espero que você tenha gostado do nosso artigo. Fique ligado no nosso blog para saber mais sobre isso.
Artigos recomendados
Este é um guia para os eventos do jQuery. Aqui discutimos a lista dos vários eventos mais comuns e mais usados do jQuery com sintaxe e exemplos. Você também pode consultar os seguintes artigos para saber mais -
- Efeitos jQuery
- Métodos jQuery
- Atributos do jQuery
- Como instalar o Jquery?
- Os 8 principais seletores de jQuery com implementação de código
- Guia de exemplos da barra de progresso do JQuery
- Guia para diferentes eventos JavaScript