Eh bien, quand j’ai appris le JavaScript, tous les livres et articles Internet que j'ai lus montraient du code qui passait un paramètre e
aux fonctions qui gèrent les événements JavaScript, comme le bloc de code ci-dessous:
function myEvent(e) {
var evtType = e.type
alert(evtType)
// displays click, or whatever the event type was
}
J'ai toujours accepté que cela soit comme ça, mais maintenant j'ai quelques questions (c'est très déroutant pour moi):
e
? Lorsque je regarde l'intégralité du fichier JavaScript, e
ne semble pas exister du tout. e
aux fonctions? Les fonctions cesseront-elles de fonctionner si je ne leur transmets pas e
?Considérons le bloc de code ci-dessous. Il existe une variable d'événement (e
) transmise à une fonction interne anonyme. Supposons que je souhaite utiliser un objet événement en dehors de la fonction anonyme (peut-être dans une ligne située au-dessus/au-dessous de la ligne element.onkeypress
). Comment puis-je faire ceci?
element.onkeypress = function(e) {
if(e.keyCode) {
element.keyCode = e.keyCode;
} else {
element.keyCode = e.charCode;
}
};
e
est l'abréviation de event
Le moyen le plus simple de créer un événement consiste à cliquer quelque part sur la page.
Lorsque vous cliquez sur, un événement click
est déclenché. Cette event
est en réalité un objet contenant des informations sur l'action qui vient de se produire. Dans le cas de cet exemple, l'événement contiendrait des informations telles que les coordonnées du clic (event.screenX
par exemple), l'élément sur lequel vous avez cliqué (event.target
) et bien plus encore.
Maintenant, les événements se produisent tout le temps, mais vous n'êtes pas intéressé par tous les événements qui se produisent. Lorsque vous êtes intéressé par un événement, c’est quand vous ajoutez un écouteur d’événement à l’élément que vous savez créer des événements [1]. Par exemple, vous êtes intéressé à savoir lorsque l'utilisateur clique sur un bouton 'Souscrire' et vous souhaitez faire quelque chose lorsque cet événement se produit.
Afin de faire quelque chose à propos de cet événement, vous associez un gestionnaire event au bouton qui vous intéresse. Pour lier le gestionnaire à l'élément, vous devez utiliser element.addEventListener(eventName, handler)
.
eventName
est une chaîne qui correspond au nom de l'événement qui vous intéresse. Dans ce cas, il s'agirait de 'click'
(pour l'événement click
).
Le gestionnaire est simplement une fonction qui fait quelque chose (il est exécuté) lorsque l'événement se produit. La fonction de gestionnaire, par défaut, lorsqu'elle est exécutée est transmise à l'objet event
(créé lors de la réalisation de l'événement/de l'action qui vous intéresse) en tant qu'argument.
La définition de event
en tant que paramètre de votre fonction de gestionnaire est facultative, mais il est parfois utile (la plupart du temps) que la fonction de gestionnaire connaisse l'événement qui s'est produit. Quand vous faites le définissez c'est la e
que vous voyez dans les fonctions telles que celles que vous avez mentionnées. Rappelez-vous que la event
est juste un objet javascript normal, contenant de nombreuses propriétés.
J'espère que ça a aidé.
Pour plus d'informations, lisez Création et déclenchement d'événements
Pour ce qui est de votre troisième question, sachez maintenant que vous ne pouvez pas le faire, car e
n’existe que lorsqu’un événement se produit. Vous pourriez avoir la fonction de gestionnaire, qui a accès à l'objet e
lorsqu'elle est exécutée, pour la stocker dans une variable globale et y travailler.
[1] Ce n'est pas tout à fait correct, mais c'est plus simple à comprendre. La chose la plus correcte à dire est "ajoutez un écouteur d'événement à l'élément dont vous savez qu'il sera traversé par les événements". Voir this pour plus d'informations
Le paramètre e
que vous demandez est un Event
object, et il Représente l'événement déclenché ayant entraîné l'exécution de votre fonction. Il ne doit pas vraiment être e
, vous pouvez le nommer comme vous le souhaitez, comme tous les autres paramètres de fonction.
Vous ne pourrez pas trouver cette variable e
dans votre fichier javascript car Elle n’y existe pas du tout, mais provient du moteur javascript qui exécute Votre fonction de rappel.
Lorsque vous attribuez une fonction de rappel à un événement .__ (par exemple, element.onkeypress = function(e) { ... }
), vous attribuez au moteur Javascript une fonction à exécuter/à l'appel lorsque cet événement se déclenche et à l'exécution./passe le long d'un objet Event
représentant l'événement qui vient de se produire. Javascript pourrait faire quelque chosecomme ceci, pour appeler votre fonction de rappel:
var e = new Event();
callbackFunction(e);
et c’est d’où l’objet Event
object e
.
La fonction ne cessera pas de fonctionner si vous ne disposez pas du paramètre e
. Mais si vous devez accéder à quelques détails sur l'événement qui a provoqué l'exécution de votre fonction , Vous aurez besoin du paramètre e
pour les obtenir.
Je ne pense pas que vous puissiez le faire, même si vous le stockez dans une variable en dehors de la portée De votre fonction de rappel. En effet, votre fonction n'est pas exécutée immédiatement lorsque vous la déclarez, mais uniquement lorsque l'événement est déclenché .__ (par exemple, si vous appuyez sur une touche pour déclencher l'événement 'pression de touche').
var event;
element.onkeypress = function(e) {
event = e;
...
};
console.log(event); // => undefined
Cela ne peut fonctionner que si le code utilisant la variable event
Est également exécuté ultérieurement, en particulier après que la fonction anonyme attribuée à onkeypress
_ est exécutée. Le code ci-dessous pourrait donc fonctionner:
var event;
element.onkeypress = function(e) {
event = e;
...
};
setTimeout(function() {
console.log(event); // => the event object, if the `keypress` event
// fired before `setTimeout` calls this function
}, 100000); // <= set to very large value so that it gets run way way later
Lorsqu'un écouteur est ajouté à l'aide de addEventListener , le premier argument transmis à la fonction est un objet Event. Il sera donc affecté au paramètre e (ou à n'importe quel nom attribué au premier paramètre de la fonction).
Vous pouvez l'utiliser en dehors de cette fonction anonyme en la stockant, par exemple:
var myEvent;
element.onkeypress = function(e) {
myEvent = e;
if(e.keyCode) {
element.keyCode = e.keyCode;
} else {
element.keyCode = e.charCode;
}
};
console.log(myEvent);
mais vous devez savoir que l'objet événement est relatif uniquement à l'événement en question et que vous devez décider si vous devez réellement le faire.
Je ferai de mon mieux pour expliquer de la manière la plus abstraite possible. La mise en œuvre réelle est probablement beaucoup plus complexe. Par conséquent, les noms que je suis sur le point d'utiliser sont hypothétiques, mais ils servent à bien expliquer, j'espère;)
Chaque nœud du navigateur est une implémentation de la classe EventEmitter
. Cette classe conserve un objet events
qui contient clé: valeur paires de eventType
(la clé): un tableau contenant des fonctions listener
(la valeur).
Les deux fonctions définies dans la classe EventEmitter sont addEventListener
et fire
.
class EventEmitter {
constructor(id) {
this.events = {};
this.id = id;
}
addEventListener(eventType, listener) {
if (!this.events[eventType]) {
this.events[eventType] = [];
}
this.events[eventType].Push(listener);
}
fire(eventType, eventProperties) {
if (this.events[eventType]) {
this.events[eventType].forEach(listener => listener(eventProperties));
}
}
}
addEventListener
est utilisé par le programmeur pour enregistrer leurs fonctions listener
souhaitées à déclencher lors de l'exécution de leur eventType
désirée.
Notez que pour chaque eventType
distinct, il existe un tableau distinct. Ce tableau peut contenir plusieurs fonctions listener
pour la même eventType
.
fire
est appelé par le navigateur en réponse aux interactions de l'utilisateur. Le navigateur sait quel type d'interaction a été effectué et sur quel nœud il a été effectué. Il utilise cette connaissance pour appeler fire
sur le nœud approprié avec les paramètres appropriés, à savoir eventType
et eventProperties
.
fire
parcourt le tableau associé à eventType spécifique. En parcourant le tableau, il appelle chaque fonction listener
à l'intérieur du tableau en lui transmettant eventProperties
.
C'est ainsi que les fonctions listener
, enregistrées uniquement avec le type d'événement particulier, sont appelées une fois que fire
est appelé.
Voici une démonstration. Il y a 3 acteurs dans cette démonstration. Programmeur, navigateur et utilisateur.
let button = document.getElementById("myButton"); // Done by the Programmer
let button = new EventEmitter("myButton"); // Done by the Browser somewhere in the background.
button.addEventListener("click", () =>
console.log("This is one of the listeners for the click event. But it DOES NOT need the event details.")
); // Done By the Programmer
button.addEventListener("click", e => {
console.log(
"This is another listener for the click event! However this DOES need the event details."
);
console.log(e);
}); // Done By the Programmer
//User clicks the button
button.fire("click", {
type: "click",
clientX: 47,
clientY: 18,
bubbles: true,
manyOthers: "etc"
}); // Done By the Browser in the background
Une fois que l'utilisateur a cliqué sur le bouton, le navigateur appelle fire
sur le bouton en transmettant "cliquer" en tant que eventType
et l'objet contenant eventProperties
. Ainsi, toutes les fonctions listener
enregistrées sous "cliquez sur" eventType
sont appelées.
Comme vous pouvez le constater, le navigateur TOUJOURS enflamme eventProperties
. En tant que programmeur, vous pouvez ou non utiliser ces propriétés dans vos fonctions listener
.
Quelques réponses que j'ai trouvées utiles sur stackoveflow:
Où un événement enregistré avec addEventListener est-il stocké?