#2 Обработка событий в jQuery

В этом видео мы с вами разберем, как навешивать евенты на елементы в jQuery. В чистом javascript мы с вами это делали с помощью addEventListener. Главная разница между эвентами в чистом javascript и в jQuery, это то, что они работают кроссбраузерно. И вам не нужно например internet explorer обрабатывать каким-то отдельным методом. Да и код в jQuery получается еще короче.

Давайте создадим кнопку и навесим на нее событие клик.

<button class='submit'>Submit</button>

и добавим listener с помощью метода .click

$('.submit').click(function () {
  console.log('clicked')
})

То есть код очень похож на код на javascript, но немного короче. Это потому, что это синтаксический сахар. Полная версия выглядит вот так.

$('.submit').on('click', function () {
  console.log('clicked')
})

метод .on позволяет нам указывать какой евент мы хотим.

Точно так же можно использовать методы mouseenter, mouseleave для навешивания этих событий.

Давайте добавим div

<div class='square'>Square</div>

и навесим на него 2 события

$('.square').mouseenter(function () {
  console.log('square enter')
}).mouseleave(function () {
  console.log('square leave')
})

Как вы видите в результате выполнения mouseenter мы получаем все тот же jQuery элемент и можем навесить на него еще одно событие.

Давайте теперь добавим стили при наведении, а при выходе из элемента уберем их.

$('.square').mouseenter(function () {
  console.log('square enter')
  $('.square').css('background', 'blue')
  $('.square').css('font-size', '24px')
}).mouseleave(function () {
  console.log('square leave')
  $('.square').css('background', 'none')
  $('.square').css('font-size', 'initial')
})

Если мы посмотрим в браузер, то у нас при наведении применяются стили, а при выходе убираются.

Вот приблизительно так выглядит код на jQuery у всех, кто только начинает на нем писать. Если мы представите такого кода хотя бы 500 строк, то получается лапша.

Давайте порефакторим этот кусочек, чтобы он был читабельнее.

Сначала вынесем селектор в переменную, так как мы ищем ее аж 5 раз.

var $square = $('.square')

$square.mouseenter(function () {
  console.log('square enter')
  $square.css('background', 'blue')
  $square.css('font-size', '24px')
}).mouseleave(function () {
  console.log('square leave')
  $square.css('background', 'none')
  $square.css('font-size', 'initial')
})

Теперь мы можем вынести методы mouseleave и mouseenter в переменные

var $square = $('.square')
var enterHandler = function () {
  console.log('square enter')
  $square.css('background', 'blue')
  $square.css('font-size', '24px')
}
var leaveHandler = function () {
  console.log('square leave')
  $square.css('background', 'none')
  $square.css('font-size', 'initial')
}

$square.mouseenter(enterHandler)
  .mouseleave(leaveHandler)

Также мы можем писать css цепочками.

var $square = $('.square')
var enterHandler = function () {
  console.log('square enter')
  $square.css('background', 'blue')
    .css('font-size', '24px')
}
var leaveHandler = function () {
  console.log('square leave')
  $square.css('background', 'none')
    .css('font-size', 'initial')
}

$square.mouseenter(enterHandler)
  .mouseleave(leaveHandler)

Но вообще добавлять стили в javascript не самое правильное решение. Поэтому давайте будем навешивать класс при ховере на елемент.

var $square = $('.square')
var enterHandler = function () {
  console.log('square enter')
  $square.addClass('active')
}
var leaveHandler = function () {
  console.log('square leave')
  $square.removeClass('active')
}

$square.mouseenter(enterHandler)
  .mouseleave(leaveHandler)

И теперь нам нужно только написать стили. Так как их у нас немного, то не будем создавать отдельный файл с стилями, а напишем их прямо в html.

<style>
  .active {
    background: blue;
    font-size: 24px;
  }
</style>

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

Давайте создадим елемент и вставим его в DOM и навесим на него событие.

Мы можем просто на body вызвать метод .append и передать туда кусок html. и он сразу же вставится в конец body.

$('body').append('<div class="byJavascript">Created by javascript</div>')

Теперь давайте навесим евент до того, как мы добавили елемент.

$('.byJavascript').click(function () {
  console.log('created by javascript')
})

$('body').append('<div class="byJavascript">Created by javascript</div>')

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

Для этого есть очень простое решение. Нам нужно просто навешить евент на уже существующий елемент например body, а проверять что событие произошло на нужно нам елементе.

Давайте попробуем переписать этот же код.

$('body').on('click', '.byJavascript', function () {
  console.log('created by javascript')
})

То есть мы навесили евент клик на body, но указали вторым аргументом, что нас интересует елемент .byJavascript. И теперь даже если елемент будет создан позже, то евент сработает.

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.