Cacher is the code snippet organizer for pro developers

$(document).ready(function () {
    
    // ### Клики мышью (click, dbclick)
    $('h2').click(function () {
        // Способ 1:
        alert('Ты кликнул по заголовку')
        // Способ 2:
        // В браузере ·· RightClickMenu>Просмотреть код>Console
        console.log('Ты кликнул по заголовку')
        
    });
});

$(document).ready(function () {
    
    // ### Клики мышью (click, dbclick)
    // Двойной клик и заголовок станет синий.
    $('h2').dblclick(function () {
        $(this).toggleClass("blue");

    });
});

$(document).ready(function() {

  // ### Полёты над элементом (mouseenter, mouseleave и т.д.)
  // Можем отловить событие, которое будет окрашивать элемент в синий цвет при наведении курсора:
  $('h2').mouseenter(function() {
    $(this).toggleClass("blue");
  });
  // Если добавить mouseleave - то цвет будет меняться на свой.
  $('h2').mouseenter(function() {
    $(this).toggleClass("blue");
    
  });
});

$(document).ready(function() {

  // ### Формы (focus, change и т.д.)
  // input - текстовое поле для ввода; focus - то есть поместили курсор в область этого поля.
  $('input').focus(function() {
    // Ещё можно присваивать какие то классы, значения, менять стиль элементов но в качестве примера выберем - console.
    console.log("Поле в фокусе");
    
  });
});

$(document).ready(function() {

  // ### Формы (focus, change и т.д.)
  // change - если изменяем что то в этом поле. Пользователь ввел своё имя и поле потеряло статус focus
  $('input').change(function() {
      
    // <form action="#">
    //    <input type="text" placeholder="Введи своё имя">
    //    <p>Приветствую тебя<span id="userName"></span>!</p>
    // </form>

    $("#userName").text(", " + $(this).val()); // В итоге получим "Приветствую тебя, Артём !"

  });
});

$(document).ready(function() {

  // ### Клавиатура (keypress, keydown, keyup)
  // keypress или keydown - будет считывать нажатие клавиш (при нажатии).
  // keyup - будет считывать нажатие клавиш (при отпускании, то есть последняя буква будет считана тоже).
  $("input").keyup(function() {
    $("#userName").text(", " + $(this).val());
    
  });
});