Introduzione agli eventi jQuery
JQuery è una delle librerie javascript più popolari e ampiamente utilizzate che è stata sviluppata e progettata per semplificare l'architettura DOM basata su HTML, ovvero le proprietà del modello a oggetti del documento come lettura, manipolazione e attraversamento di alberi. Anche le altre proprietà di jQueries come la gestione degli eventi, Ajax, lo stile e l'animazione CSS sono semplificate. Si tratta di una libreria open source e gratuita che viene utilizzata in genere nel 73% dei ca. 10 milioni di siti Web che vengono utilizzati oggi. Le caratteristiche principali di Jquery includono proprietà basate su elementi DOM come selettori, manipolazione e attraversamento di alberi che rendono il lavoro su JQuery molto più interessante, più facile e conveniente.
Viene utilizzato per fornire un'interfaccia molto semplice e semplice che può essere utilizzata per applicare vari tipi di effetti sorprendenti. Questi metodi consentono inoltre un rapido utilizzo e applicazione delle funzionalità più comunemente utilizzate e dei loro effetti, nonché configurazioni dal minimo al minimo. I comandi di base come quelli per mostrare e nascondere gli elementi sono praticamente gli stessi e gli altri riposano nella stessa categoria con ciò che chiunque vorrebbe vederli si aspetterebbe. Il comando show (), in questo caso, viene usato per mostrare gli elementi in un intero pacchetto e un comando set e hide () combinato viene usato per nascondere quelle caratteristiche.
Jquery è fatto su misura e viene utilizzato per rispondere agli eventi forniti in una pagina HTML. Gli eventi in sé sono le diverse azioni dei visitatori a cui può rispondere la pagina web. In altre parole, un evento viene utilizzato per rappresentare leggermente il momento esatto o preciso, in particolare qualcosa che è accaduto. Ciò può includere scenari come Spostare il mouse sull'elemento, fare clic e selezionare il pulsante di opzione e anche fare clic sull'elemento. Il termine fuochi o il termine licenziato viene usato più volte insieme all'evento. Ad esempio, l'evento keypress viene attivato o più comunemente definito come attivato, principalmente quando si preme il tasto. Ecco l'elenco degli eventi DOM più comuni e utilizzati di frequente.
Eventi del mouse come dblclick, mouseleave, mouseenter, click. Ci sono alcuni altri eventi della tastiera come Keypress, keyup e keydown. Esistono altre forme di eventi come eventi di modifica, invio, sfocatura e messa a fuoco. Ci sono altri eventi che sono eventi Document o Window come ridimensionamento, caricamento, scorrimento, scaricamento, ecc. In Jquery la maggior parte degli eventi basati su DOM hanno il metodo jquery corrispondente. Pertanto, per assegnare un nuovo evento a tutti i paragrafi esistenti nella pagina, è possibile utilizzare la sintassi seguente.
Eventi e sintassi di jQuery
Ecco i seguenti eventi di jQuery con la sintassi fornita di seguito
1. Fai clic su ()
Questo evento si verifica ogni volta che si fa clic sull'elemento. Questo metodo click () viene utilizzato per attivare l'elemento click noto anche come evento click utilizzato per collegarsi a una funzione ogni volta che si verifica un evento relativo al clic.
Sintassi
$(selector).click()
Quando desideri associare una funzione a questo evento clic,
$(selector).click(function)
Il passaggio successivo si accompagna sempre all'azione e al trigger che costituisce l'effettivo funzionamento e funzionamento della funzione e quindi ogni volta che l'evento viene generato, una funzione deve essere passata all'evento.
Esempio
$("p").click(function()(
// action which is triggered goes here!! ));
2. Dblclick ()
Questo metodo viene utilizzato per associare una funzione del gestore eventi all'elemento HTML fornito. Questa funzione viene eseguita ogni volta che l'utente fa doppio clic sull'elemento HTML specificato.
Sintassi
$(selector).dblclick()
Esempio
$("p").dblclick(function()(
$(this).hide();
));
3. change ()
Questo evento si verifica ogni volta che viene modificato il valore di un particolare elemento, vale a dire funziona solo per l'input, textarea e gli elementi selezionati. Il metodo change () viene utilizzato per attivare l'evento change o quello che viene associato alla funzione ogni volta che deve verificarsi un evento relativo al cambiamento.
Sintassi
$(selector).change()
Esempio
$("input").change(function()(
alert("This text related to this has been changed.");
));
4. blur ()
Questo evento relativo alla sfocatura si verifica solo quando l'elemento perde la messa a fuoco. Il metodo sfocatura () utilizzato per attivare l'evento sfocatura o quello utilizzato per collegare una funzione da eseguire ogni volta che si verifica un evento sfocatura. Questo metodo viene spesso utilizzato con il metodo focus ().
Sintassi
$(selector).blur()
Esempio
$("input").blur(function()(
alert("The field has lost its focus.");
));
5. dati
Questa proprietà event.data viene utilizzata per contenere i dati facoltativi passati relativi a un metodo di evento quando il gestore di esecuzione per la corrente è associato.
Sintassi
event.data
Esempio
$("p").each(function(i)(
$(this).on("click", (x:i), function(event)(
alert("This index + ". paragraph has data: " + event.data.x);
));
));
6. spazio dei nomi
Questa proprietà viene utilizzata per restituire lo spazio dei nomi personalizzato ogni volta che viene attivato l'evento. La proprietà viene utilizzata dagli autori dei plug-in che possono essere utilizzati per gestire le attività in modo molto diverso, a seconda dello spazio dei nomi utilizzato. Gli spazi dei nomi che iniziano con il carattere di sottolineatura sono spazi dei nomi riservati per JQuery.
Sintassi
event.namespace
Esempio
$("p").on("custom.someNamespace", function(event)(
alert(event.namespace);
));
7. PageX
Questa è la proprietà del tipo di pagina che viene utilizzata per restituire la posizione del puntatore del mouse correlata al bordo sinistro del documento. Questo tipo di proprietà viene spesso utilizzato con l'evento. Proprietà PageY.
Sintassi
event.PageX
Esempio
$(document).mousemove(function(event)(
$("span text ").text("X: " + event.pageX);
));
8. PageY
Questa è la proprietà del tipo di pagina utilizzata per restituire la posizione del puntatore del mouse correlata al bordo superiore del documento. Questo tipo di proprietà viene spesso utilizzato con l'evento. Proprietà PageX.
Sintassi
event.PageY
Esempio
$(document).mousemove(function(event)(
$("span text ").text("Y: " + event.pageY);
));
9. risultato
La proprietà event.result viene utilizzata per contenere il valore precedente o l'ultimo che viene restituito dal gestore eventi che è specificamente attivato dall'evento specifico.
Sintassi
event.result
Esempio
$("button").click(function()(
return "Hi there!";
));
10. preventDefault ()
Questo metodo event.preventDefault () relativo all'evento viene utilizzato per impedire che si verifichi l'azione predefinita di un particolare elemento. Gli esempi di questo scenario includono:
Impedire l'invio di un modulo da un pulsante di invio
Impedire a un collegamento di accedere a un determinato URL.
Un evento particolare come event.preventDefault () viene utilizzato per verificare se il metodo o la funzione preventDefault () viene utilizzato per chiamare l'evento.
Sintassi
event.preventDefault()
Esempio
$("a").click(function(event)(
event.preventDefault();
));
11. Event.target ()
Questa proprietà viene utilizzata per restituire quale elemento DOM deve essere attivato da questo evento. Molto spesso non è utile confrontare event.target con questo da fare per determinare se l'evento particolare viene gestito a causa di un evento chiamato bubbling.
Sintassi
event.target
Esempio
$("p, button, h2").click(function(event)(
$("div").html("Hi, triggered is " + event.target.NameNode + " new element.");
));
12. timeStamp
Questa proprietà viene utilizzata per restituire il numero di millisecondi dal momento del 1 ° gennaio 1970, che corrisponde alla prima volta in cui l'evento è stato effettivamente attivato per la prima volta.
Sintassi
event.TimeStamp
Esempio
$("button").click(function(event)(
$("span").text(event.timeStamp);
));
13. tipo
Questo è usato per monitorare l'evento e il suo tipo che viene attivato.
Sintassi
event.type
Esempio:
$("p").on("click dblclick and mouse related events", function(event)(
$("div").html("Event: " + event.type);
));
14. which ()
Questa proprietà viene utilizzata per restituire il tasto della tastiera o il pulsante del mouse che è stato premuto per l'evento.
Sintassi
event.which
Esempio
$("input").keydown(function(event)(
$("div").html("Key: " + event.which);
));
15. focus ()
Questa proprietà e lo stato attivo per questo evento si verificano quando un elemento viene utilizzato per ottenere lo stato attivo che si verifica quando viene selezionato facendo clic con il mouse o navigando su una scheda su di esso. Il metodo focus () viene utilizzato per attivare l'evento focus o associare una funzione da eseguire quando si verifica un evento relativo al focus.
Sintassi
$(selector).focus()
Esempio
$("input").focus(function()(
$("span").css("display", "inline").fadeOut(200);
));
16. hover ()
Questo metodo al passaggio del mouse viene utilizzato per specificare due funzioni utilizzate per l'esecuzione quando il puntatore del mouse passa sopra tutti gli elementi selezionati. Questo metodo attiva sia gli eventi di mouseleave che quelli del mouseenter. Se è stata specificata una sola funzione, verrà eseguita per gli eventi mouseleave e mouseenter.
Sintassi
$(selector).hover(inFunction, outFunction)
Esempio
$("p").hover(function()(
$(this).css("background-color", "blank");
), function()(
$(this).css("background-color", "yellow");
));
17. keydown ()
L'ordine degli eventi correlati all'evento keydown sono:
- Keydown: viene utilizzato quando la chiave è in discesa.
- Keypress: si verifica quando si preme il tasto della tastiera
- Keyup: come suggerisce il nome, questo viene usato quando viene premuto il tasto del lato ascendente.
Sintassi
$(selector).keydown()
Esempio
$("input").keydown(function()(
$("input").css("background-color", "black");
));
18. keypress ()
L'ordine degli eventi correlati all'evento keypress è:
- Keydown: viene utilizzato quando la chiave è in discesa.
- Keypress: si verifica quando si preme il tasto della tastiera
- Keyup: come suggerisce il nome, questo viene usato quando viene premuto il tasto del lato ascendente.
Sintassi
$(selector).keypress()
Esempio
$("input").keypress (function()(
$("input").css("background-color", "black");
));
19. keyup ()
L'ordine degli eventi correlati all'evento keyup è:
- Keydown: viene utilizzato quando la chiave è in discesa.
- Keypress: si verifica quando si preme il tasto della tastiera
- Keyup: come suggerisce il nome, questo viene usato quando viene premuto il tasto del lato ascendente.
Sintassi
$(selector).keyup()
Esempio
$("input").keyup(function()(
$("input").css("background-color", "black");
));
20. Live ()
Questo metodo alive () o funzione di jquery viene utilizzato per collegare uno o più gestori basati su eventi da utilizzare in particolare per gli elenchi di elementi selezionati e specifica anche la funzione da eseguire dove si verificano gli eventi. Tutti i gestori di eventi sono collegati utilizzando il metodo live () che funzionerà sia per gli elementi correnti che per quelli FUTURI che si basano sulla corrispondenza degli elementi di selezione che possono essere come un nuovo elemento creato dallo script. Il metodo die () può essere usato per distruggere il metodo live ().
Sintassi
$(selector).live(event, data, function)
Esempio
$("button").live("click", function()(
$("p").slideToggle();
));
21. Load ()
Il metodo di caricamento viene utilizzato per collegare un gestore eventi all'evento basato sul carico. L'evento load si verifica ogni volta che si verifica un evento Questo specificato e funziona ogni volta che gli elementi associati all'URL come immagine, frame, script, iframe e l'oggetto finestra. L'evento load può attivarsi o meno e dipende dal browser anche se l'immagine è memorizzata nella cache. Esiste anche un metodo AJAX che è un metodo jquery noto come load (), quello che viene chiamato dipende dai parametri.
Sintassi
$(selector).load(function)
Esempio
$("img").load(function()(
alert("stuff loaded.");
));
22. Mousedown
Questo evento si verifica solo quando si preme il pulsante del puntatore del mouse sinistro sull'elenco selezionato dell'elemento. Il metodo o la funzione mousedown () viene utilizzato per attivare questo evento che allega una funzione e viene eseguito ogni volta che si verifica un evento mousedown. Questo metodo viene spesso utilizzato insieme al metodo mouseup ().
Sintassi
$(selector).mousedown()
Esempio
$("div").mousedown(function()(
$(this).after("Down button pressed with mouse.");
));
23. Off ()
Questo metodo viene utilizzato per rimuovere un gestore eventi collegato al metodo on (). Si può dire che sia la sostituzione del metodo unbind (), del metodo die () e del metodo undelegate (). Questo metodo viene utilizzato per conferire molta coerenza all'API ed è sempre consigliabile utilizzare questo metodo poiché viene utilizzato per semplificare la base di codice Jquery.
Sintassi
$(selector).off(event, selector, function(eventObj), map)
Esempio
$("button").click(function()(
$("p").off("click");
));
24. mouseenter ()
Questo evento si verifica ogni volta che il puntatore del mouse si trova sopra l'elemento specificato ed entra quando attiva l'evento mouseenter o viene utilizzato per collegare una funzione che può essere utilizzata per essere eseguita ogni volta che si verifica un evento basato su mouseenter.
Sintassi
$(selector).mouseenter()
Esempio
$("p").mouseenter(function()(
$("p").css("background-color", "black");
));
25. mouseleave ()
Questo evento si verifica ogni volta che il puntatore del mouse si trova sopra l'elemento specificato e lascia quando attiva l'evento foglie del mouse o viene utilizzato per rimuovere una funzione che può essere utilizzata per essere eseguita ogni volta che si verifica un evento basato su mouseleave.
Sintassi
$(selector).mouseleave()
Esempio
$("p").mouseleave(function()(
$("p").css("background-color", "black");
));
Jquery è una delle librerie più utilizzate quando si tratta di sviluppo front-end. Ciò offre funzionalità uniche e un'ampia gamma di funzioni che aiutano a rendere la vita degli sviluppatori e delle persone a tutto tondo semplice e conveniente. Spero ti sia piaciuto il nostro articolo. Resta sintonizzato sul nostro blog per altri come questi.
Articoli consigliati
Questa è una guida agli eventi jQuery. Qui discutiamo l'elenco dei vari eventi più comuni e utilizzati di frequente di jQuery con sintassi ed esempi. Puoi anche dare un'occhiata ai seguenti articoli per saperne di più -
- Effetti jQuery
- Metodi jQuery
- Attributi jQuery
- Come installare Jquery?
- Top 8 selettori jQuery con implementazione del codice
- Guida agli esempi della barra di avanzamento di JQuery
- Guida a diversi eventi JavaScript