9.1 Délégation des événements
Travailler avec des événements en JavaScript peut nécessiter une gestion complexe pour optimiser les performances et améliorer l'architecture de l'application.
Optimiser le travail avec des événements en JavaScript est crucial pour créer des applications web performantes, surtout lorsqu'il faut gérer un grand nombre d'éléments. Dans ce contexte, la délégation des événements et la prévention des gestionnaires inutiles jouent un rôle clé.
La délégation des événements est un pattern où un gestionnaire d'événements est mis en place sur un élément parent, plutôt que sur chaque élément enfant individuel. Cela permet de gérer efficacement les événements pour un grand nombre d'éléments enfants, puisque le gestionnaire est appelé une seule fois pour le parent, au lieu de chaque élément.
Exemple sans délégation des événements:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de délégation des événements</title>
</head>
<body>
<ul id="list">
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
<script>
const list = document.querySelector('ul');
const items = document.querySelectorAll('#list li');
items.forEach(item => {
item.addEventListener('click', function(event) {
const li = document.createElement('li');
li.innerText = "Nouvel élément, événement qui ne fonctionnera pas";
list.appendChild(li);
alert(`Vous avez cliqué sur: ${event.target.textContent}`);
});
});
</script>
</body>
</html>
Problème: si la liste des éléments augmente dynamiquement, il faudra ajouter des gestionnaires à chaque nouvel élément.
Solution — exemple avec délégation des événements:
<!DOCTYPE html>
<html>
<head>
<title>Exemple de délégation des événements</title>
</head>
<body>
<ul id="list">
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
<script>
const list = document.getElementById('list');
list.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const li = document.createElement('li');
li.innerText = "Nouvel élément, événement qui fonctionnera";
list.appendChild(li);
alert(`Vous avez cliqué sur: ${event.target.textContent}`);
}
});
</script>
</body>
</html>
Avantages:
- Le gestionnaire est ajouté uniquement à l'élément parent
- Les éléments ajoutés dynamiquement prendront automatiquement en charge le gestionnaire d'événements
9.2 Prévention des gestionnaires inutiles
Pour éviter une dégradation des performances, il est important de minimiser le nombre de gestionnaires d'événements, surtout s'ils sont attachés à de nombreux éléments ou sont fréquemment appelés. Plusieurs approches pour l'optimisation:
1. Réduction du nombre de gestionnaires: utilisez la délégation des événements pour réduire le nombre de gestionnaires.
2. Utilisation de once dans addEventListener: si le gestionnaire d'événements doit
être appelé qu'une seule fois, utilisez l'option { once: true } lors de l'ajout du gestionnaire.
Exemple:
<!DOCTYPE html>
<html>
<head>
<title>Exemple d'événement unique</title>
</head>
<body>
<button id="myButton">Clique moi!</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
alert('Vous avez cliqué sur le bouton');
}, { once: true });
</script>
</body>
</html>
3. Debouncing et Throttling: ces techniques sont utiles pour optimiser les gestionnaires d'événements appelés fréquemment,
comme scroll ou resize.
9.3 Debouncing
Le Debouncing regroupe plusieurs appels successifs d'une fonction en un seul, exécuté uniquement après que le flux des événements a cessé.
Exemple:
function debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Fenêtre redimensionnée');
}, 300));
Essayez de changer la largeur du widget pour voir le résultat
Exemple de Debouncing
Dans cet exemple, la fonction de recherche est appelée uniquement après que l'utilisateur a arrêté de taper du texte pendant 300 millisecondes.
<!DOCTYPE html>
<html>
<head>
<title>Exemple de Debouncing</title>
</head>
<body>
<div style="min-height: 55px">
<input type="text" id="searchInput" placeholder="Commencez à taper votre requête...">
<div id="results"></div>
</div>
<script>
const searchInput = document.getElementById('searchInput');
const results = document.getElementById('results');
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
function performSearch(event) {
const query = event.target.value;
results.textContent = 'Recherche: ' + query;
// Imitation d'une requête serveur
setTimeout(() => {
results.textContent = 'Vous avez recherché: ' + query;
}, 500);
}
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', debouncedSearch);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Exemple de Debouncing</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Commencez à taper votre requête...">
<div id="results"></div>
<script>
const searchInput = document.getElementById('searchInput');
const results = document.getElementById('results');
function debounce(func, delay) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
function performSearch(event) {
const query = event.target.value;
results.textContent = 'Searching for: ' + query;
// Imitation d'une requête serveur
setTimeout(() => {
results.textContent = 'Vous avez recherché: ' + query;
}, 500);
}
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener('input', debouncedSearch);
</script>
</body>
</html>
9.4 Throttling
Trolling Throttling garantit que la fonction ne sera appelée pas plus souvent qu'une fois par intervalle de temps spécifié.
Exemple:
function throttle(func, limit) {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Fenêtre défilée');
}, 300));
Autre exemple de Throttling
Dans cet exemple, le gestionnaire de défilement est appelé pas plus souvent que toutes les 200 millisecondes, ce qui aide à empêcher la surcharge du navigateur lors des événements de défilement fréquents.
<!DOCTYPE html>
<html>
<head>
<title>Exemple de Throttling</title>
</head>
<body>
<div id="scrollContainer" style="height: 200px; overflow-y: scroll;">
<div style="height: 1000px;"></div>
</div>
<div id="status">Commencez à défiler pour voir l'effet</div>
<script>
const scrollContainer = document.getElementById('scrollContainer');
const status = document.getElementById('status');
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function(...args) {
const context = this;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
function handleScroll(event) {
status.textContent = 'Défilement... ' + new Date().toLocaleTimeString();
}
const throttledScroll = throttle(handleScroll, 200);
scrollContainer.addEventListener('scroll', throttledScroll);
</script>
</body>
</html>
9.5 Optimisation des événements avec des écouteurs passifs
Les écouteurs d'événements passifs (passive event listeners) sont utilisés pour améliorer les performances, en particulier lors
du traitement des événements de défilement (scroll). Lorsqu'un gestionnaire d'événements est défini comme passif, cela signifie qu'il ne
déclenchera pas preventDefault(), ce qui permet au navigateur d'optimiser les performances.
Exemple:
window.addEventListener('scroll', function(event) {
console.log('Scrolling');
}, { passive: true });
GO TO FULL VERSION