Обработка onclick события в jQuery без $().click и $().live

Быстрый ответ

Для непосредственного обращения к элементу, на котором был совершён клик, используйте собирательное слово this в контексте обработчика onclick:

<button onclick="alert(this.tagName)">Нажми на меня</button>

В данном случае this ссылается на элемент <button> и при клике выводит название его тега.

Разбираемся в event.target и this

В JavaScript при обработке событий два ключевых слова – this и event.target – играют центральную роль. this условно относится к элементу, к которому прикреплено событие, тогда как event.target – к элементу, инициировавшему событие. Эти две сущности могут отличаться при всплытии событий от внутреннего элемента.

Встраивание обработчиков событий против навязчивого JavaScript: сопоставление

Прямое встраивание JavaScript в HTML ухудшает поддерживаемость кода. Модернизированный подход заключается в использовании ненавязчивого JavaScript, где события добавляются посредством addEventListener или attachEvent, используемого в старых версиях Internet Explorer, что способствует разделению структуры и поведения.

Проблема кросс-браузерной совместимости

Обеспечение совместимости с различными браузерами требует специальных техник:

element.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    // Internet Explorer требует особого подхода и использует window.event и srcElement.
};

В результате, указанный код будет работать корректно и в Internet Explorer.

Утечки памяти: незаметные убийцы

Внимательно следите за утечками памяти, особенно при работе со старыми версиями браузеров. Периодически отключайте обработчики событий для освобождения системных ресурсов.

Управление несколькими функциями загрузки

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

При наличии jQuery используйте его на все сто

jQuery облегчает работу с событиями благодаря методу .on(), а также упрощает манипуляцию DOM-элементами. Вы получаете уникальную гибкость при использовании jQuery.

План действий для ненавязчивого JavaScript

Для корректного применения ненавязчивого JavaScript:

1. Обрабатывайте события внутри скриптов, оставляя HTML-код нетронутым.
2. Для привязки событий используйте addEventListener или $.on().
3. Избегайте непосредственного встраивания JavaScript в HTML.

Визуализация

Рассмотрим пример с двумя кнопками (🌻 – кнопка A, 🌼 – кнопка B):

<button onclick="identifyCaller(this)">🌻</button>
<button onclick="identifyCaller(this)">🌼</button>

При нажатии:

function identifyCaller(caller) {
    alert(`Вы нажали на ${caller.innerText}!`);
}

В результате мы получаем:

Нажмите на 🌻: "Вы нажали на 🌻!"
Нажмите на 🌼: "Вы нажали на 🌼!"

Обе кнопки уникальны и передают свой контекст через onclick. 🌼🌻

Ваше руководство к впечатляющим приключениям с onclick

Преодолейте испытания с помощью Делегирования Событий

Делегирование событий – это эффективная техника, позволяющая присоединить один обработчик событий к родительскому элементу, который будет срабатывать для всех дочерних элементов. Это упрощает код и экономит ресурсы системы.

document.getElementById('container').addEventListener('click', function(e) {
    var clickedEl = e.target;
    if (clickedEl.tagName === 'BUTTON') {
        // В данной ситуации использование делегирования упрощает обработку событий.
    }
});

Подробнее об этом расскажет наш спикер на видео

Дополнительные параметры в обработчиках событий

Для передачи параметров в обработчики событий используйте анонимные функции или функцию bind():

// Анонимная функция
button.onclick = function() {
    handler(arg1, arg2);
};

// Функция bind
button.onclick = handler.bind(null, arg1, arg2);

Полезные материалы

1. Element: click event – Web APIs | MDN
2. HTML DOM Element click() Method
3. Javascript event handler with parameters – Stack Overflow
4. Event: currentTarget property – Web APIs | MDN
5. Bubbling and capturing
6. Javascript – Event order