click

Событие клика на HTML-элементе. Когда пользователь кликает мышкой по странице, браузер определяет, на каком элементе произошёл клик и создаёт событие click.

На события можно подписаться и выполнять JavaScript-код, когда событие произошло.

Подписаться на все клики на странице:

        
          
          document.addEventListener("click", function () {  alert("Вы кликнули по странице!")})
          document.addEventListener("click", function () {
  alert("Вы кликнули по странице!")
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Подписаться только на клики по кнопке (она должна быть на странице):

        
          
          let button = document.getElementsByTagName("button")[0] // получаем кнопку// навешиваем обработчик на событие кликbutton.addEventListener("click", function () {  alert("Вы кликнули по кнопке!")})
          let button = document.getElementsByTagName("button")[0] // получаем кнопку

// навешиваем обработчик на событие клик
button.addEventListener("click", function () {
  alert("Вы кликнули по кнопке!")
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Подробнее о механизме событий читай в статье «События».

В функцию-обработчик так же передаётся объект события, который содержит дополнительную информацию о клике. Самые полезные свойства:

• detail — количество кликов, которые произвёл пользователь. 1 — для одиночного клика, 2 — для двойного и так далее.
• view — возвращает объект window, в котором произошло событие.

Чтобы получить доступ к объекту события, функция-обработчик должна принимать на вход параметр:

        
          
          button.addEventListener("click", function (event) {  alert(event.detail) // напечатает количество кликов})
          button.addEventListener("click", function (event) {
  alert(event.detail) // напечатает количество кликов
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Пример, использующий эти свойства:

На практике

Секция статьи "На практике"

nlopin

Секция статьи "nlopin"

🛠 С кликами есть тонкость. Если пользователь нажал кнопку мыши, увёл курсор из элемента и потом кнопку отпустил, то события click не произойдёт.

🛠 Можно обработать клики по любым элементам: div, p, button — браузеры это умеют.

🛠 Некоторые мобильные браузеры (например, Safari Mobile) создают события click только на интерактивных элементах — button, a, img, input и так далее.