Dzisiaj właśnie napisałem post na temat „Dlaczego używamy liter takich jak„ e ”w e.preventDefault ()?” i myślę, że moja odpowiedź będzie miała jakiś sens ...
Najpierw zobaczmy składnię addEventListener
Zwykle będzie to:
target.addEventListener (typ, listener [, useCapture]);
A definicje parametrów addEventlistener to:
typ: Łańcuch reprezentujący typ zdarzenia, którego nasłuchujemy.
listener: Obiekt, który otrzymuje powiadomienie (obiekt implementujący interfejs Event), gdy wystąpi zdarzenie określonego typu. Musi to być obiekt implementujący interfejs EventListener lub funkcja JavaScript.
(Z MDN)
Myślę jednak, że należy zwrócić uwagę na jedną rzecz:
kiedy używasz funkcji JavaScript jako nasłuchiwania, obiekt implementujący interfejs zdarzenia (zdarzenie obiektu) zostanie automatycznie przypisany do „pierwszego parametru” funkcji. Tak więc, jeśli używasz function (e), obiekt zostanie przypisany do "e", ponieważ "e" jest jedynym parametrem funkcji (na pewno pierwszym!), wtedy możesz użyć e.preventDefault, aby temu zapobiec ....
spróbujmy poniższy przykład:
<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 v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>
wynikiem będzie: [obiekt MouseEvent] 5 i zapobiegniesz zdarzeniu kliknięcia.
ale jeśli usuniesz znak komentarza, taki jak:
<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>
otrzymasz: 8 i błąd : „Uncaught TypeError: e.preventDefault nie jest funkcją w HTMLInputElement. (VM409: 69)”.
Z pewnością zdarzenie kliknięcia nie zostanie tym razem zablokowane, ponieważ litera „e” została ponownie zdefiniowana w funkcji.
Jeśli jednak zmienisz kod na:
<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>
wszystko znowu będzie działać poprawnie ... otrzymasz 8 i unikniesz zdarzenia kliknięcia ...
Dlatego „e” jest tylko parametrem Twojej funkcji i potrzebujesz „e” w swojej funkcji (), aby otrzymać „obiekt zdarzenia”, a następnie wykonać e.preventDefault (). Jest to również powód, dla którego możesz zmienić „e” na dowolne słowa, które nie są zastrzeżone przez js.