Comment gérer la gestion des événements en JavaScript (exemples et tout)

Dans ce blog, je vais essayer de clarifier les principes de base du mécanisme de gestion des événements en JavaScript, sans l'aide d'une bibliothèque externe comme Jquery / React / Vue.

J'expliquerai les sujets suivants dans cet article:

  1. Les objets de document et de fenêtre , et leur ajout d' écouteurs d'événements .
  2. La méthode Event.preventDefault () et son utilisation.
  3. La méthode Event.stopPropagation () avec un exemple.
  4. Comment supprimer un écouteur d' événement d'un élément.

Objets de document et de fenêtre avec écouteurs d'événements

L'objet Window représente l'onglet. Si vous lisez ce blog sur votre navigateur correspondant, votre onglet actuel représente l'objet Window.

L'objet fenêtre a accès à des informations telles que la barre d'outils, la hauteur et la largeur de la fenêtre, les invites et les alertes. Voyons comment nous pouvons ajouter un écouteur d'événement (mousedown) à l'objet window et analyser certaines de ses propriétés.

Comment ajouter l'écouteur sur l'objet window

La méthode addEventListener est le moyen le plus préféré pour ajouter un écouteur d'événement à une fenêtre , un document ou tout autre élément du DOM.

Il existe un autre moyen appelé propriété "on" onclick, onmouseover, et ainsi de suite. Mais ce n'est pas aussi utile, car cela ne nous permet pas d'ajouter plusieurs écouteurs d'événements sur le même élément. Les autres méthodes le permettent.

Un objet événement est passé en argument (optionnel) au gestionnaire qui contient toutes les informations liées à l'événement (dans notre cas, mousedown) sur la fenêtre.

Ouvrez les outils de développement (Inspecter l'élément) sur cette page et copiez-collez le code suivant dans le panneau de la console et appuyez sur Entrée.

window.addEventListener("mousedown",function(event){ alert("window"); console.log(event); });

Après cela, vous pouvez accéder à n'importe quelle section de l'onglet actuel et faire un clic droit pour voir la console et les informations liées à cet événement, comme indiqué ci-dessous dans l'instantané.

Remarque : si vous accédez à un autre onglet et cliquez avec le bouton droit de la souris, cet événement ne sera pas déclenché car il appartient uniquement à cet onglet (objet Fenêtre).

Les détails de l'événement mousedown

Dans les prochaines lignes, j'expliquerai certaines des propriétés capturées importantes correspondant à l' événement mousedown que nous venons d'effectuer.

bouton : Comme il s'agissait de l'événement mousedown, il vous indiquera le bouton sur lequel vous avez cliqué. Pour la souris, gauche, milieu et droite correspondent respectivement à 0, 1 et 2. Si vous cliquez sur le bouton droit, vous pouvez voir la valeur 2.

clientX et clientY : position par rapport au coin supérieur gauche de la zone de contenu (Viewport). Analysez simplement la valeur de ces propriétés avec l'endroit sur lequel vous avez cliqué et vous pouvez voir comment elles sont liées. Même si vous faites défiler la page, ces propriétés restent les mêmes. Référence ScreenX et ScreenY en haut à gauche de l'écran (Monitor).

Altkey / ctrlkey : Si vous maintenez l'une de ces touches enfoncée tout en effectuant votre opération de clic droit, vous pouvez voir que ces valeurs sont vraies. Sinon, ils sont faux comme dans notre cas.

target: il correspond à l'élément sur lequel vous avez effectué l'action. Quel que soit l'élément sur lequel vous avez cliqué, vous pouvez voir les informations correspondant à cette propriété dans la console

Qu'est-ce qu'un objet document ?

Le document se compose de ce qui se trouve à l'intérieur de la fenêtre intérieure. L' objet document est la racine de chaque nœud du DOM. Si vous chargez une page HTML dans le navigateur, le document représente cette page entière.

La méthode Event.preventDefault () et son utilisation

Parfois, nous ne voulons pas qu'un élément HTML se comporte de la manière dont il est censé se comporter par défaut. Dans un tel cas, nous pouvons utiliser cette méthode.

Exemple : en cliquant sur l'élément d'ancrage, le navigateur sera redirigé vers cette page par défaut. Essayons d'éviter cela.

  Google  let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event) { console.log("Redirecting Stopped"); event.preventDefault(); });   

Vous pouvez créer un fichier HTML et consulter ce code.

La méthode Event.stopPropagation ()

Les événements s'écoulent vers l'extérieur. Il y a certains cas, comme lorsque vous avez des éléments imbriqués et que vous exécutez un événement sur un enfant et qu'il finit par effectuer une action sur le parent, également, que vous souhaitez éviter. Dans de tels cas, cette méthode est utile.

Cela semble un peu déroutant, mais j'espère que l'exemple ci-dessous vous le rendra clair.

Imaginez que vous ayez un bouton dans un paragraphe et que vous ayez attaché un événement mousedown aux deux. Vous souhaitez réaliser les cas d'utilisation suivants:

  1. Si vous cliquez avec le bouton droit sur le bouton, cela devrait indiquer qu'il a été cliqué et ne se propage pas à l'élément parent (c'est-à-dire le paragraphe).
  2. Si vous faites un clic gauche sur le bouton, alors il devrait se propager normalement vers l'extérieur et déclencher également l'écouteur d'événements de paragraphe.

Solution:

Hello Ho Button2

// Event Listener on the Button and it's logic document.getElementById("button12").addEventListener("mousedown", function(event) { alert("button clicked"); if (event.button == 2) // Right Click event.stopPropagation(); }); // Event Listener on the paragraph element with it's logic: document.getElementById("demo").addEventListener("mousedown", function(event) { alert("Paragraph clicked"); });

Suppression d' un écouteur d'événements d'un élément

Afin de supprimer un écouteur d'événement d'un élément, nous devons appeler la méthode removeEventListener avec le nom de l'événement et le nom de la fonction.

Remarque : lorsque des fonctions anonymes sont passées, elles n'ont pas de mappage de mémoire. Nous devons donc définir ces fonctions en dehors du rappel, puis les référencer ici dans le rappel removeEventListener.

Document.getElementbyId("id_name").removeEventListener("click",fn_name)

Si vous avez atteint ce stade, vous devriez avoir une bonne compréhension du fonctionnement des écouteurs d'événements dans JavaScript.

Si, en travaillant avec votre bibliothèque / Frameworks préférés, vous êtes coincé dans la partie Gestion des événements, ces bases devraient vous aider à résoudre le problème.