Utiliser le bouillonnement d'événements pour implémenter des fonctions interactives complexes

Comment utiliser le bouillonnement d'événements pour obtenir des effets interactifs complexes

Le bouillonnement d'événements signifie que lorsqu'un événement sur un élément est déclenché, il remontera jusqu'à l'élément parent, puis vers l'élément grand-parent jusqu'à l'élément racine du document. Cette fonctionnalité nous permet d'exploiter les éléments DOM de manière plus flexible et de gérer les événements lors d'interactions complexes. Ensuite, nous présenterons comment utiliser le bouillonnement d’événements pour obtenir des effets interactifs complexes.

Tout d’abord, nous devons comprendre le principe du bouillonnement événementiel. Lorsqu'un événement est déclenché, le gestionnaire d'événements de l'élément déclencheur, le gestionnaire d'événements de l'élément parent et jusqu'à l'élément racine seront exécutés. Dans ce processus, nous pouvons porter des jugements conditionnels basés sur le type d'événement et l'élément cible pour obtenir différents effets interactifs.

Un scénario d'application courant consiste à obtenir l'effet de cliquer en dehors de la boîte contextuelle pour fermer la boîte contextuelle. Nous pouvons ajouter un événement de clic à la page entière ou à un élément conteneur sur la page, et déterminer si l'élément cible cliqué est la boîte contextuelle elle-même ou l'élément de contenu dans la boîte contextuelle. Sinon, fermez la fenêtre contextuelle. dans la boîte. L'exemple de code est le suivant :

document.addEventListener('click', function(event) {
  var modal = document.getElementById('modal');
  var modalContent = document.getElementById('modal-content');
  if (event.target !== modal && event.target !== modalContent) {
    modal.style.display = 'none';
  }
});

Dans le code ci-dessus, nous déterminons s'il faut fermer la fenêtre contextuelle en jugeant si l'élément cible de l'événement est égal à l'élément de la boîte contextuelle ou à l'élément de contenu dans la fenêtre contextuelle. -up boîte. De cette façon, peu importe où vous cliquez, tant qu'il ne s'agit pas d'un élément dans la boîte pop-up, l'effet de fermeture de la boîte pop-up sera déclenché.

En plus de fermer la boîte contextuelle, nous pouvons également utiliser le bouillonnement d'événements pour obtenir un effet de type onglet. Supposons que nous ayons un conteneur contenant plusieurs options. Lorsqu'un utilisateur clique sur une option, le contenu correspondant s'affiche. Nous pouvons ajouter un événement click à l'élément conteneur et déterminer si l'élément cible cliqué est une option dans le gestionnaire d'événements. Si tel est le cas, affichez le contenu correspondant. L'exemple de code est le suivant :

document.getElementById('options-container').addEventListener('click', function(event) {
  if (event.target.classList.contains('option')) {
    var optionId = event.target.getAttribute('data-id');
    var content = document.getElementById('content-' + optionId);
    content.style.display = 'block';
  }
});

Dans le code ci-dessus, nous déterminons si l'élément cible cliqué a un nom de classe nommé "option" pour déterminer s'il s'agit d'une option. Si tel est le cas, nous pouvons obtenir l'élément de contenu correspondant à l'option via des attributs personnalisés et l'afficher. De cette façon, lorsque vous cliquerez sur différentes options, le contenu correspondant sera affiché.

L'utilisation du bouillonnement d'événements pour obtenir des effets interactifs complexes permet de simplifier la structure du code et d'améliorer la maintenabilité du code. Nous pouvons utiliser de manière flexible les éléments DOM et gérer les événements en jugeant l'élément cible et le type d'événement de l'événement, obtenant ainsi divers effets interactifs complexes. J'espère que cet article vous aidera à comprendre et à appliquer le bouillonnement d'événements.

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!