Event undefined

Bonjour à tous
Je viens de récupérer sur le Net un bout de code qui fait de l'upload de fichiers image https://artisansweb.net/drag-drop-file-upload-using-javascript-php/
J'ai recopié ce code sur un site de tests, ça marche tel quel.
Mais si je veux utiliser ce code dans un autre contexte j'ai besoin de le comprendre en détail.
J'ai donc remplacé

<input type="button" value="Select File" onclick="file_explorer();">

par

<input type="button" value="Select File" onclick="file_explorer(event);">

dans le but de récupérer l'évènement clic sur le bouton, j'ai remplacé

function file_explorer() {

par

function file_explorer(e) {
	console.log(e);

Je constate que la variable "e" est undefined

Utiliser

<balise onclick="fonction(event)...>

est une pratique courante équivalent à

balise.addEventListener('click', fonction)

et souvent plus simple d'emploi

Auriez vous une idée de ce qui peut provoquer ce comportement?
Voici l'adresse de la page de test: https://tests.osirisnet.net/tests1/upload.html
Merci de votre aide

Et l'eau,

Je passe en coup de vent. Quand tu écris :

<input type="button" value="Select File" onclick="file_explorer();">

Il ne me sembla pas que tu puisses récupérer la var event puisque tu exécutes une fonction JS via l'attribut onclick. De toutes manières, ce style d'écriture est à proscrire.

Oui bien sûr
J’ai fortement modifié le code dans la journée d’hier de façon être conforme à mes standards et en particulier supprimer l’utilisation de jQuery
Originellement c’était :

<input type="button" value="Select File" onclick="file_explorer(event);">

Ce que je crains c’est un biais dans l’utilisation de la syntaxe onclick="fonction(event)"

Passer l'event devrait bien fonctionner pourtant:

https://codepen.io/kustol/pen/dybGrQd

@Niuxe, dans un attribut onMACHIN, le javascript executé est wrappé dans une fonction avec un paramètre event ( https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers#Event_handler's_parameters_this_binding_and_the_return_value )
Modifié par kustolovic (14 Aug 2019 - 11:31)

bonjour,

Merci pour cette précision et ton exemple Kustolovic. . Ce qui m'a induit en erreur, c'est ce genre d'écriture :

<a href="#truc" onclick="machin(this);">click</a>

function machin(el){
  alert(el.textContent);
}

Il me semblait que le paramètre passé dans une fonction ne pouvait être event. Perso, je n'écris plus comme cela depuis très longtemps. Sauf lorsque j'utilise VueJS ou ReactJS. D'ailleurs, il me semblait que c'était une surcouche dans ces 2 librairies
Modifié par niuxe (15 Aug 2019 - 15:52)

niuxe a écrit :
Il me semblait que le paramètre passé dans une fonction ne pouvait être event

event au même titre que this peut être utilisé comme paramètre de la fonction appelée.
dans https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers on trouve:

a écrit :
When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

event - for all event handlers, except onerror.
event, source, lineno, colno, and error for the onerror event handler. Note that the event parameter actually contains the error message as string.

When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered. For more details see the this keyword documentation.

J'utilise très souvent cette technique comme par exemple :

<img src="/tombes/pharaons/amenhotep3/photo/amenhotep3_well_east1v.jpg" alt="" onclick="PopupImage(event)" data-img="/tombes/pharaons/amenhotep3/photo/amenhotep3_well_east1.jpg">

Quand l'utilisateur clique sur l'image, la fonction PopupImage est appelée, elle stoppe la propagation de l'évènement et analyse la balise pour afficher une image agrandie.