Today I just wrote a post about "Why are we using letters like" e "in e.preventDefault ()?" and I think my answer will make sense ...
First, consider the syntax addEventListener
Usually it will be: target.addEventListener (type, listener [, useCapture]);
And the definition of addEventlistener parameters:
type : A string representing the type of event to listen on.
listener : an object that receives a notification (an object that implements the Event interface) when an event of the specified type takes place. It must be an object that implements the EventListener interface or JavaScript function.
(from MDN)
But I think one thing needs to be noted: When you use the Javascript function as a listener, an object that implements the Event interface (object event) is automatically assigned to the first parameter of the “ function. Therefore, if you use function (e), the object will be assigned” e "because" e "is the only parameter to the function (definitely the first one!), then you can use e.preventDefault to prevent something ....
try an example as shown below:
<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){ </script>
the result will be: [object MouseEvent] 5 , and you will prevent the click event.
but if you remove the comment mark, for example:
<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>
you get: 8 and the error : "Untrained TypeError: e.preventDefault is not a function in HTMLInputElement. (VM409: 69)."
Of course, the click event will not be prevented this time. Because "e" was again defined in the function.
However, if you change the code to:
<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>
every thing will work fine again ... you will get 8 and the click event will be prevented ...
Therefore, "e" is just a parameter of your function, and you need an "e" in your function () to get the "event object", and then do e.preventDefault (). This is also the reason that you can change the "e" to any words that are not reserved by js.