События мыши

Umbrella JS предоставляет легкий и интуитивный способ работы с DOM, включая обработку событий мыши. Основная цель библиотеки — упростить добавление, удаление и управление событиями, делая код более компактным и читаемым.

Привязка событий мыши

Для добавления события к элементам используется метод on(). Он принимает два обязательных аргумента: тип события и функцию-обработчик.

u('button').on('click', function(event) {
    console.log('Кнопка нажата');
});

Особенности:

  • event — объект события, предоставляющий доступ к целевому элементу (event.target), координатам курсора (event.clientX, event.clientY) и другим стандартным свойствам.
  • Можно добавлять несколько обработчиков к одному элементу и одному типу события.

Основные события мыши

Umbrella JS поддерживает все стандартные события мыши:

  • click — одиночное нажатие кнопки мыши.
  • dblclick — двойной клик.
  • mousedown — нажатие кнопки мыши.
  • mouseup — отпускание кнопки мыши.
  • mousemove — движение мыши над элементом.
  • mouseenter и mouseleave — курсор входит или покидает границы элемента.
  • mouseover и mouseout — аналогично, но с учетом вложенных элементов.

Пример использования нескольких событий:

u('.box').on('mouseenter', function() {
    this.css('background', 'lightblue');
}).on('mouseleave', function() {
    this.css('background', '');
});

Удаление обработчиков

Метод off() позволяет удалять ранее привязанные события. Аргументы совпадают с on().

function highlight() {
    this.css('border', '2px solid red');
}

u('.item').on('mouseover', highlight);
// Удаление обработчика
u('.item').off('mouseover', highlight);

Если обработчик не указан, off() удаляет все события указанного типа для выбранных элементов.

Делегирование событий

Umbrella JS поддерживает делегирование через селекторы. Это позволяет привязывать обработчики к родительскому элементу и отслеживать события на дочерних элементах.

u('#list').on('click', 'li', function(event) {
    this.toggleClass('active');
});

Преимущества делегирования:

  • Меньше привязок к DOM, экономия памяти.
  • Автоматическая поддержка новых элементов, добавленных динамически.

Работа с координатами и кнопками мыши

Объект события содержит подробную информацию о позиции курсора и кнопке мыши:

u('div').on('click', function(e) {
    console.log('Координаты: X=' + e.clientX + ', Y=' + e.clientY);
    console.log('Кнопка: ' + e.button); // 0 — левая, 1 — средняя, 2 — правая
});

Метод preventDefault() предотвращает стандартное действие браузера (например, контекстное меню при правом клике), а stopPropagation() останавливает всплытие события.

Всплытие и захват событий

Umbrella JS обрабатывает события с обычным механизмом DOM — всплытие (bubbling). Для использования захвата необходимо указать третий аргумент в on():

u('div').on('click', function() {
    console.log('Захват события');
}, true); // true — использование фазы захвата

Практические примеры

  1. Перетаскивание элемента
let dragging = false;

u('.draggable')
  .on('mousedown', function() { dragging = true; })
  .on('mouseup', function() { dragging = false; })
  .on('mousemove', function(e) {
      if (dragging) {
          this.css({
              left: e.clientX + 'px',
              top: e.clientY + 'px',
              position: 'absolute'
          });
      }
  });
  1. Контекстное меню на правую кнопку
u('.menu-target').on('contextmenu', function(e) {
    e.preventDefault();
    u('#custom-menu').css({ top: e.clientY + 'px', left: e.clientX + 'px', display: 'block' });
});
  1. Изменение цвета при наведении
u('.hover-box').on('mouseenter', function() {
    this.css('background', 'yellow');
}).on('mouseleave', function() {
    this.css('background', 'white');
});

Цепочка методов

Umbrella JS позволяет объединять несколько обработчиков и действий через цепочку вызовов:

u('button')
  .on('mouseenter', function() { this.css('color', 'red'); })
  .on('mouseleave', function() { this.css('color', ''); })
  .on('click', function() { alert('Нажато'); });

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

Совместимость и производительность

Umbrella JS минимизирует накладные расходы на обработку событий, обрабатывая их через внутренние оптимизации. Все методы работают во всех современных браузерах и корректно поддерживают мобильные устройства с сенсорными событиями (через полифиллы или расширения).

Оглавление