Блог

Я создал ввод с помощью кнопки, которая, когда я нажимаю на кнопку, показывает и удаляет ввод. Но я также хочу удалить ввод при нажатии на DOM, и я знаю, что должен установить addEventListeners значение DOM. Но я не знаю, какую функцию мне следует использовать.

 //Html
<div class="search">
  <input type="text" class="input" placeholder="Search . . ." />
  <button class="btn">
    <i class="fas fa-search"></i>
  </button>
</div>

//Js
const searchSection = document.querySelector(".search");
const input = document.querySelector(".input");
const searchBtn = document.querySelector(".btn");

searchBtn.addEventListener("click", () => {
 searchSection.classList.toggle("active");
 input.focus();
}); 
 

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

 document.addEventListener('click', function (event) {

    // If the clicked element doesn't have the right selector, bail
    if (!event.target.matches('.click-me')) return;

    // Don't follow the link
    event.preventDefault();

    // Log the clicked element in the console
    console.log(event.target);

}, false);
 

Этот подход называется делегированием событий, и он работает, используя преимущества того, что называется «пузырьковое событие».

Вы можете прочитать больше о прослушивании событий щелчка с помощью ванильного JavaScript