JavaScript - Event Delegation
Здравствуйте, будущие программисты! Сегодня мы погрузимся в одну из самых мощных и эффективных техник в JavaScript: делегирование событий (Event Delegation). Не волнуйтесь, если вы новички в программировании; я проведу вас через это понятие шаг за шагом, как я делал это для countless студентов на протяжении многих лет моей преподавательской деятельности. Так что возьмите чашечку кофе (или ваш любимый напиток) и отправляйтесь в это захватывающее путешествие вместе со мной!
Что такое делегирование событий?
Прежде чем мы перейдем к details, давайте поймем, что же такое делегирование событий на самом деле. Представьте, что вы менеджер в большом офисе. Вместо того чтобы лично assign задачи каждому сотруднику, вы делегируете обязанности руководителям команд, которые затем distribute работу. Вот что делает делегирование событий в JavaScript!
Делегирование событий - это техника, при которой мы attach один event listener к родительскому элементу вместо того чтобы attach несколько listeners к отдельным дочерним элементам. Это не только делает наш код более эффективным, но и позволяет нам обрабатывать события на элементах, которые могут даже не существовать при загрузке страницы!
Why Use Event Delegation?
Вы можете задаться вопросом: "Why我应该 беспокоиться о делегировании событий?" Ну, позвольте мне поделиться крошечкой истории из моих первых лет преподавания. Я когда-то имел студента, который создал приложение для списка дел. Для каждого задания он добавлял отдельный event listener. К тому времени, как у него было 100 задач, его приложение работало медленнее, чем улитка, поднимающаяся по горе! Это когда я познакомил его с делегированием событий, и вуаля! Его приложение работало гладко, как масло.
Вот несколько ключевых преимуществ:
- Производительность: Меньше event listeners意味着 меньше использование памяти и быстрее время загрузки страницы.
- Динамические элементы: Он работает с элементами, добавленными в DOM после initial загрузки страницы.
- Меньше кода: Вы пишете меньше кода, что означает меньше шансов для ошибок.
Steps of Event Delegation
Теперь, когда мы понимаем "why", давайте посмотрим на "how". Делегирование событий включает три основных шага:
1. Identify the Parent Element
Во-первых, мы должны выбрать родительский элемент, который будет act как наш event delegate. Это должен быть элемент, который содержит все дочерние элементы, которые вы хотите monitor.
2. Attach the Event Listener to the Parent
Затем мы attach наш event listener к этому родительскому элементу.
3. Determine Which Element Triggered the Event
Наконец, когда occurs событие, мы должны проверить, какой конкретный дочерний элемент triggered его, и odpowiedzieć соответственно.
Давайте посмотрим, как эти шаги работают с примерами кода!
Event Delegation Examples
Example 1: Basic Event Delegation
Давайте начнем с простогоunordered списка фруктов:
<ul id="fruitList">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>Теперь вместо того чтобы добавлять click events к каждому <li>, мы будем использовать делегирование событий:
document.getElementById('fruitList').addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
console.log("You clicked on " + e.target.textContent);
}
});В этом коде:
- Мы attach event listener к родительскому
<ul>элементу. - Когда occurs click, мы проверяем, является ли clicked элемент (
e.target)<li>. - Если да, мы логируем текстовое содержимое clicked
<li>.
Таким образом, даже если мы добавим больше фруктов в наш список позже, обработка событий все равно будет работать без дополнительного кода!
Example 2: Dynamic Element Creation
Давайте добавим немного остроты. Мы создадим простой список дел, в который пользователи могут добавлять новые элементы:
<input type="text" id="newTodo">
<button id="addTodo">Add Todo</button>
<ul id="todoList"></ul>Вот JavaScript:
const todoList = document.getElementById('todoList');
const newTodo = document.getElementById('newTodo');
const addTodo = document.getElementById('addTodo');
addTodo.addEventListener('click', function() {
if(newTodo.value !== '') {
const li = document.createElement('li');
li.textContent = newTodo.value;
todoList.appendChild(li);
newTodo.value = '';
}
});
todoList.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == "LI") {
e.target.classList.toggle('completed');
}
});В этом примере:
- Мы можем добавлять новые элементы списка дел динамически.
- Мы используем делегирование событий для обработки clicks на всех элементах списка дел, даже тех, которые добавлены после initial загрузки страницы.
- Clicking на элемент списка дел переключает класс 'completed'.
Example 3: Multiple Actions with Event Delegation
Давайте продвинем наш список дел еще дальше. Мы добавим кнопки для редактирования и удаления задач:
<ul id="advancedTodoList"></ul>И вот наш улучшенный JavaScript:
const advancedTodoList = document.getElementById('advancedTodoList');
// Функция для создания нового элемента списка дел
function createTodoItem(text) {
const li = document.createElement('li');
li.innerHTML = `
<span>${text}</span>
<button class="edit">Edit</button>
<button class="delete">Delete</button>
`;
advancedTodoList.appendChild(li);
}
// Делегирование событий для всего списка
advancedTodoList.addEventListener('click', function(e) {
const target = e.target;
if(target.className == 'delete') {
const li = target.parentNode;
advancedTodoList.removeChild(li);
} else if(target.className == 'edit') {
const span = target.previousElementSibling;
const newText = prompt("Edit your todo:", span.textContent);
if(newText !== null) {
span.textContent = newText;
}
}
});
// Добавление некоторых начальных элементов списка дел
createTodoItem("Learn Event Delegation");
createTodoItem("Master JavaScript");В этом продвинутом примере:
- Мы используем один event listener на родительском
<ul>для обработки как edit, так и delete действий. - Event listener проверяет класс clicked кнопки, чтобы определить действие.
- Этот подход масштабируем и эффективен, regardless от того, сколько элементов списка дел у нас есть.
Заключение
И вот мы и здесь, мои дорогие студенты! Мы совершили путешествие по стране делегирования событий, от его базовых концепций до более продвинутых реализаций. Помните, как и любое мощное средство, делегирование событий сияет ярче всего, когда используется мудро. Это не всегда лучшее решение для каждой ситуации, но когда дело доходит до работы с множеством одинаковых дочерних элементов или динамически созданным контентом, это часто ваш лучший друг.
Продолжая ваше путешествие в программирование, продолжайте экспериментировать с этими концепциями. Попробуйте combine делегирование событий с другими функциями JavaScript, которые выучите. Кто знает? Вы можете создать下一ую большую веб-приложение, которое изменит мир!
До следующего урока, счастливого кодирования, и пусть ваши события всегда delegating плавно!
Credits: Image by storyset