Comprendre les événements DOM

DOM Events est ce qui rend une page Web interactive. L'utilisation d'événements DOM est ce qui fait qu'une page clique ou qu'un formulaire est soumis, cela permet aux développeurs de créer une expérience utilisateur attrayante.

Quelques exemples d'événements DOM : lorsqu'un utilisateur clique sur la souris, lorsqu'une page Web est chargée, lorsqu'une image est chargée, lorsqu'un formulaire HTML est soumis et lorsqu'un utilisateur appuie sur une touche.

Dans cet article, nous simplifierons les concepts clés des événements DOM et explorerons comment les gérer.

1. addEventListener

addEventListener, attache un gestionnaire d'événements aux éléments, il vous permet de définir comment l'élément réagit à l'interaction des utilisateurs avec la page.

Exemple : Le code ci-dessous ajoute un événement « clic » pour afficher les détails du cocktail lorsque l'on clique sur l'image.

`img.addEventListener('click', () => handleClick(cocktail));`

2. sélecteur de requête

querySelector, vous permet de sélectionner un élément à l'aide de sélecteurs de type CSS. C’est l’un des moyens les plus polyvalents de cibler des éléments.

Exemple : Ce code crée une section réductible sur la page Web. document.querySelectorAll sélectionne tous les éléments h3 de la page Web et renvoie une NodeList de tous les éléments correspondants.

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById et getElementsByClassName

getElementById cible un seul élément par son identifiant unique.

De même, getElementsByClassName sélectionne tous les éléments avec une classe spécifique et les renvoie sous forme de collection.

Exemple : Ci-dessous, getElementById trouve un élément par son attribut id dans le document HTML.

Il est utilisé ici pour accéder aux entrées de formulaire spécifiques, nouveau nom, nouveaux ingrédients, nouvelle image, nouvelle recette et récupère leurs valeurs.

Ces valeurs sont ensuite stockées dans les propriétés de l'objet newCocktail qui est défini avec const.

De cette façon, lorsque l'utilisateur soumet un formulaire pour créer un nouveau cocktail, celui-ci est stocké de manière structurée dans l'objet newCocktail.

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

L'événement DOMContentLoaded garantit que votre JavaScript ne s'exécute qu'une fois le DOM complètement chargé, empêchant ainsi les erreurs de tenter d'accéder aux éléments avant qu'ils ne soient disponibles.

Exemple : DOMContentLoaded, est un événement qui se déclenche lorsque le document HTML initial a été complètement chargé et analysé, sans attendre le chargement complet des feuilles de style, des images ou d'autres ressources externes.

Il garantit que le DOM est entièrement construit et accessible, afin que vous puissiez interagir en toute sécurité avec les éléments du HTML, comme l'ajout d'écouteurs d'événements ou la manipulation du DOM.

Dans le code ci-dessous, le navigateur vous indique que le document est désormais disponible et que l'utilisateur peut commencer à interagir avec lui.

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

Notes finales

Les événements DOM sont fondamentaux pour rendre une page Web interactive et attrayante pour les utilisateurs. En comprenant et en utilisant des méthodes de base telles que addEventListener, querySelector, getElementById et getElementsByClassName, vous pouvez créer des interfaces utilisateur dynamiques qui répondent aux clics, aux soumissions de formulaires, etc.

De plus, l'événement DOMContentLoaded garantit que vos scripts ne sont exécutés qu'une fois le DOM complètement chargé, évitant ainsi les erreurs potentielles et garantissant une interaction fluide avec l'utilisateur.

En résumé, les événements DOM permettent de :

• Attachez des gestionnaires d'événements avec addEventListener pour une interactivité réactive.

• Sélectionnez des éléments avec querySelector ou getElementById pour mettre à jour dynamiquement le contenu.

• Gérez les actions déclenchées par des événements en fonction des entrées de l'utilisateur, telles que les soumissions de formulaires.

• Assurez-vous que vos scripts s'exécutent au bon moment en utilisant DOMContentLoaded.

Grâce à ces techniques, vous pouvez transformer des pages Web statiques en expériences interactives qui améliorent l'engagement des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!