Въведение в слушателите на събития

И така, имате красива страница, създадена с HTML и CSS, но сега се опитвате да разберете как всъщност да ИЗПОЛЗВАТЕ бутоните и формулярите, които сте създали, нали? Това е мястото, където JavaScript идва с „слушателите на събития“.

Слушателите на събития са хлябът и маслото на кодирането за уебсайт. Те ви позволяват да активирате определен JavaScript код, когато настъпи „събитие“. Това „събитие“ може да бъде всичко, от щракване на мишката, преместване на мишката над определена област на страницата или дори натискане на определен клавиш на клавиатурата. Представете си всички творчески начини, по които това може да се приложи!

В това ръководство ще научим как да прикачваме слушатели на събития към DOM елементи, как да ги премахваме и как да използваме анонимни функции срещу наименувани функции.

Добавяне на слушатели на събития към DOM елементи

За да започнем със слушателите на събития, трябва да знаем как да ги прикрепим към различни DOM елементи. JavaScript предоставя метода addEventListener за тази цел. Този метод изисква събитие, като „щракване“ или „изпращане“, както и функция за обратно извикване, за да се изпълни действието. Силно препоръчвам да разгледате статията на MDN за слушателите на събития за списък със събития, които можете да използвате. По-долу са дадени няколко примера за събития, които можем да използваме:

Пример 1: Боравене с щракване на бутон

const button = document.getElementById('MyButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
});

В този пример първо избираме вашия бутон с идентификатора „MyButton“ и задаваме променлива към него, за да направим нашия код по-модулен. След това настройваме нашия слушател на събития. Методът addEventListener изисква „събитие“ (в този пример това би било „щракване“) и функция за обратно извикване (функцията със стрелка). Сега, ако щракнем върху бутона на уеб страницата, нашата конзола трябва да покаже „Щракнат бутон!“.

Пример 2: Реагиране на преместване на мишката

Сега, нека приложим това, което научихме от предишния пример, и се опитайте да създадете слушател на събития, който ще промени цвета на div, когато задържите мишката върху него, както и когато напуснете div:

const divElement = document.getElementById('myDiv');

divElement.addEventListener('mouseover', () => {
  divElement.style.backgroundColor = 'lightgreen';
});
divElement.addEventListener('mouseout', () => {
  divElement.style.backgroundColor = 'lightblue';
});

лесно!

Пример 3: Слушане за входни промени

Друг обичаен слушател на събития, който се използва, е събитието „вход“. Това може да се използва винаги, когато потребител трябва да въведе текст в текстово поле и да запази текста, например. Или може би сте добавили филтър към вашата уеб страница, който е с филтър въз основа на това, което потребителят въвежда!

const inputElement = document.getElementById('myInput');

inputElement.addEventListener('input', (event) => {
  console.log('Input value:', event.target.value);
  // Add your code to react to changes in the input field.
});

В този код срещаме нещо ново: event.target. Това ни позволява да се насочим към конкретната област, където се случва събитието. Това може да бъде много полезно в много приложения, като позволява на програмиста гъвкавост при избора на целта.

Премахване на слушатели на събития

Въпреки че добавянето на слушатели на събития е от съществено значение, премахването им, когато вече не са необходими, е също толкова важно за предотвратяване на изтичане на памет. Нека да видим как да премахнете слушател на събития:

const removeButton = document.getElementById('removeButton');

function handleClick() {
  console.log('Button clicked!');
}
removeButton.addEventListener('click', handleClick);
// Suppose you want to remove the event listener after the first click.
removeButton.addEventListener('click', () => {
  removeButton.removeEventListener('click', handleClick);
  console.log('Event listener removed!');
});

Слушатели на събития с анонимни функции срещу наименувани функции

Когато дефинирате слушатели на събития, имате възможност да използвате анонимни функции или наименувани функции. И двете опции имат своето приложение. Нека проучим разликата между двете:

const anonButton = document.getElementById('anonButton');
const namedButton = document.getElementById('namedButton');

// Using an anonymous function as the event listener.
anonButton.addEventListener('click', () => {
  console.log('Anonymous function: Button clicked!');
});
// Using a named function as the event listener.
function handleButtonClick() {
  console.log('Named function: Button clicked!');
}
namedButton.addEventListener('click', handleButtonClick);

Обикновено, ако използвате една и съща функция последователно във вашия код, ще искате да я използвате като функция с име, а не като анонимна функция. Това ще помогне изключително много за четливостта на кода и ви помага като програмист да поддържате кода по-добре етикетиран и организиран. Анонимните функции са полезни, ако знаете, че няма да използвате същата функция по-късно във вашия код и могат да бъдат бързи за изпълнение.

Заключение

Честито! Току-що научихте за невероятен инструмент, който е в основата на всяка уеб страница. Въпреки че това не е изчерпателно ръководство, вече имате достатъчно разбиране, за да експериментирате с различни слушатели на събития във вашия собствен код. Приятно кодиране!