单击香草javascript中的文档时如何关闭输入

Question

I have created an input with a button that when I click on button, input show and remove. But I also want to remove input when I click on DOM, and I know I should set addEventListeners to DOM. But I don't know what function I should use.

//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();
}); 

Answer 1

The vanilla JS way to listen for click events is listen for all clicks on the document, and then check if the clicked element has the selector you care about.

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);

This approach is called event delegation, and it works by taking advantage of something called event bubbling.

You can read more on Listening for click events with vanilla JavaScript