Oggi ho appena scritto un post su "Perché usiamo lettere come" e "in e.preventDefault ()?" e penso che la mia risposta avrà un senso ...
Inizialmente, vediamo la sintassi di addEventListener
Normalmente sarà:
target.addEventListener (type, listener [, useCapture]);
E la definizione dei parametri di addEventlistener sono:
tipo: Una stringa che rappresenta il tipo di evento da ascoltare.
listener: L'oggetto che riceve una notifica (un oggetto che implementa l'interfaccia Event) quando si verifica un evento del tipo specificato. Deve essere un oggetto che implementa l'interfaccia EventListener o una funzione JavaScript.
(Da MDN)
Ma penso che ci sia una cosa da sottolineare:
quando usi la funzione Javascript come listener, l'oggetto che implementa l'interfaccia Event (evento oggetto) verrà automaticamente assegnato al "primo parametro" della funzione. Quindi, se usi funzione (e), l'oggetto verrà assegnato a "e" perché "e" è l'unico parametro della funzione (sicuramente il primo!), quindi puoi usare e.preventDefault per impedire qualcosa ....
proviamo l'esempio come di seguito:
<p>Please click on the checkbox control.</p>
<form>
<label for="id-checkbox">Checkbox</label>
<input type="checkbox" id="id-checkbox"/>
</div>
</form>
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
//var e=3;
var v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>
il risultato sarà: [object MouseEvent] 5 e impedirai l'evento click.
ma se rimuovi il segno di commento come:
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
var e=3;
var v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>
riceverai: 8 e un errore : "Uncaught TypeError: e.preventDefault non è una funzione in HTMLInputElement. (VM409: 69)".
Certamente, questa volta l'evento click non verrà impedito. Perché la "e" è stata definita nuovamente nella funzione.
Tuttavia, se modifichi il codice in:
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
var e=3;
var v=5;
var t=e+v;
console.log(t);
event.preventDefault();
}, false);
</script>
ogni cosa funzionerà di nuovo correttamente ... otterrai 8 e l'evento clic sarà impedito ...
Pertanto, "e" è solo un parametro della funzione e occorre una "e" in function () per ricevere l '"oggetto evento", quindi eseguire e.preventDefault (). Questo è anche il motivo per cui puoi cambiare la "e" con qualsiasi parola che non sia riservata da js.