Apprenez le bouillonnement d'événements pour obtenir facilement des effets interactifs complexes

Maîtrisez le bouillonnement d'événements et réalisez facilement des effets interactifs complexes. Des exemples de code spécifiques sont nécessaires

Le bouillonnement d'événements est un concept important dans le développement front-end. Il fait référence au déclenchement automatique d'un événement sur un élément. se propager aux éléments parents jusqu'à ce qu'il atteigne l'élément racine du document. En maîtrisant les principes et les applications du bouillonnement d’événements, nous pouvons facilement mettre en œuvre des effets interactifs complexes et améliorer l’expérience utilisateur. Ce qui suit utilisera des exemples de code spécifiques pour aider les lecteurs à mieux comprendre et appliquer le bouillonnement d'événements.

Exemple de code 1 : Cliquez pour agrandir et réduire l'effet

Structure HTML :

<div class="container">
    <div class="header">标题</div>
    <div class="content">
        <p>内容</p>
    </div>
</div>

Style CSS :

.container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
}
.header {
    background-color: #eee;
    cursor: pointer;
}
.content {
    display: none;
}

Code JavaScript :

// 获取容器元素
var container = document.querySelector('.container');

// 监听容器元素的点击事件
container.addEventListener('click', function(event) {
    // 判断点击的是标题元素
    if (event.target.classList.contains('header')) {
        // 获取内容元素
        var content = event.target.nextElementSibling;
        
        // 切换内容的显示状态
        if (content.style.display === 'none') {
            content.style.display = 'block';
        } else {
            content.style.display = 'none';
        }
    }
});

Le code ci-dessus implémente un simple clic pour agrandir et réduire l'effet. Lorsque vous cliquez sur le titre, l'état d'affichage du contenu change. Grâce au bouillonnement d'événements, il suffit d'écouter l'événement sur l'élément conteneur pour obtenir un contrôle unifié de tous les titres.

Exemple de code 2 : Utilisation de la délégation d'événements pour implémenter la fonction de suppression d'éléments de liste

Structure HTML :

<ul class="list">
    <li>列表项1 <span class="delete">删除</span></li>
    <li>列表项2 <span class="delete">删除</span></li>
    <li>列表项3 <span class="delete">删除</span></li>
    <li>列表项4 <span class="delete">删除</span></li>
</ul>

Style CSS :

.delete {
    color: red;
    cursor: pointer;
}

Code JavaScript :

// 获取列表元素
var list = document.querySelector('.list');

// 监听列表元素的点击事件
list.addEventListener('click', function(event) {
    // 判断点击的是删除按钮
    if (event.target.classList.contains('delete')) {
        // 获取点击的列表项
        var listItem = event.target.parentNode;
        
        // 移除列表项
        list.removeChild(listItem);
    }
});

Le code ci-dessus implémente une simple fonction de suppression d'éléments de liste. Lorsque l'on clique sur le bouton Supprimer à côté d'un élément de liste, via la délégation d'événement, nous pouvons écouter l'événement de clic via l'élément parent, obtenir l'élément de liste cliqué dans le gestionnaire d'événements, puis le supprimer de la liste.

Grâce aux deux exemples de code ci-dessus, nous pouvons voir la puissance du bouillonnement d'événements. Grâce à la diffusion d'événements, nous pouvons simplifier le code, améliorer l'efficacité du développement et obtenir des effets interactifs complexes. Après avoir maîtrisé les principes et les applications de l'événementiel, je pense que les lecteurs seront plus à l'aise dans le développement front-end.

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!