Frontend | Вопросы собесов

Как добавить слушатель события ?

Спросят с вероятностью 7%

Добавление слушателя события — это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.

Почему это нужно?

Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.

Как это используется?

Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.

1️⃣Чистый JavaScript

Для добавления слушателя события используется метод addEventListener.

Пример:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Event Listener Example</title>

</head>

<body>

  <button id="myButton">Click me</button>



  <script>

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

    

    button.addEventListener('click', () => {

      alert('Button was clicked!');

    });

  </script>

</body>

</html>

В этом примере мы получаем элемент кнопки по её id и добавляем слушатель события click, который вызывает функцию, отображающую сообщение.

2️⃣React

Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

Пример:

import React from 'react';



function App() {

  const handleClick = () => {

    alert('Button was clicked!');

  };



  return (

    <div>

      <button onClick={handleClick}>Click me</button>

    </div>

  );

}



export default App;

В этом примере мы определяем функцию handleClick и передаем её в атрибут onClick кнопки. Когда пользователь нажимает на кнопку, вызывается функция handleClick.

3️⃣jQuery

Если вы используете его, добавление слушателей событий также очень просто и удобно.

Пример:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Event Listener Example</title>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>

  <button id="myButton">Click me</button>



  <script>

    $(document).ready(function() {

      $('#myButton').on('click', function() {

        alert('Button was clicked!');

      });

    });

  </script>

</body>

</html>

В этом примере мы используем jQuery для добавления обработчика события click к кнопке.

Почему это удобно и важно:

✅Интерактивность: Позволяет создавать динамичные и отзывчивые интерфейсы.

✅Гибкость: Возможность реагировать на различные действия пользователей.

✅Удобство: В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.

Добавление слушателя события позволяет реагировать на действия пользователя и делает приложения интерактивными. В зависимости от технологии (чистый JavaScript, React или jQuery) процесс добавления слушателя может немного отличаться, но цель остается той же — улучшить взаимодействие пользователя с приложением.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых