6.1 Oggetto evento
JavaScript fornisce un potente meccanismo di eventi, che permette di monitorare varie azioni dell'utente e altri eventi che avvengono nel browser. Un aspetto importante del lavoro con gli eventi è l'oggetto evento, che contiene informazioni sull'evento e fornisce metodi per gestirlo.
Quando si verifica un evento, il browser crea un oggetto evento che contiene informazioni su tale evento. Questo oggetto è passato al gestore dell'evento come argomento.
Proprietà dell'oggetto evento:
type: tipo di evento (ad esempio,click,keydown).target: elemento su cui si è verificato l'evento.currentTarget: elemento a cui è associato il gestore dell'evento.eventPhase: fase in cui si trova l'evento (capturing, target, bubbling).bubbles: valore booleano che indica se l'evento può propagarsi.cancelable: valore booleano che indica se l'evento può essere annullato.defaultPrevented: valore booleano che indica se l'azione predefinita è stata evitata.timeStamp: tempo in cui l'evento è stato creato.isTrusted: valore booleano che indica se l'evento è stato innescato dall'utente o da uno script.
Metodi dell'oggetto evento:
preventDefault(): annulla l'azione predefinita associata all'evento.stopPropagation(): arresta l'ulteriore propagazione dell'evento.stopImmediatePropagation(): arresta l'ulteriore propagazione dell'evento e impedisce l'esecuzione di altri gestori di eventi per l'elemento corrente.
Esempio di utilizzo dell'oggetto evento:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // Mostrerà: click
console.log('Event target:', event.target); // Mostrerà: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // Mostrerà: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // Mostrerà: 2 (Fase del target)
console.log('Bubbles:', event.bubbles); // Mostrerà: true
console.log('Cancelable:', event.cancelable); // Mostrerà: true
console.log('Time stamp:', event.timeStamp); // Mostrerà il tempo in millisecondi
console.log('Is trusted:', event.isTrusted); // Mostrerà: true
});
</script>
</body>
</html>
6.2. Eventi del mouse (Mouse Events)
Eventi del mouse sono generati quando l'utente interagisce con un elemento tramite il mouse:
click: evento di clickdblclick: evento di doppio clickmousedown: evento di pressione del pulsante del mousemouseup: evento di rilascio del pulsante del mousemousemove: evento di movimento del mousemouseover: evento di mouse sopra l'elementomouseout: evento di mouse lasciando l'elemento
Esempio:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 Eventi di caricamento (Load Events)
Eventi di caricamento si verificano quando una risorsa completa il caricamento:
load: evento che si verifica quando la risorsa/pagina è completamente caricataDOMContentLoaded: evento che si verifica quando la documentazione HTML iniziale è caricata e analizzata senza attendere il caricamento completo di fogli di stile, immagini e sottocampi
Esempio:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 Eventi di focus (Focus Events)
Eventi di focus sono generati quando un elemento riceve o perde il focus.
focus: evento che si verifica quando un elemento riceve il focusblur: evento che si verifica quando un elemento perde il focus
Esempio:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 Eventi della tastiera (Keyboard Events)
Eventi della tastiera sono generati quando l'utente preme i tasti sulla tastiera:
keydown: evento che si verifica quando un tasto è premutokeyup: evento che si verifica quando un tasto è rilasciatokeypress: evento che si verifica quando un tasto è premuto e rilasciato (evento obsoleto, non raccomandato)
Esempio:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION