Можно ли как-то повесить на один элемент множество событий на JS?

Question

[ImagineWorld]

Есть форма с инпутами и кнопкой, по нажатии на кнопку идёт AJAX, после которого у кнопки меняется имя класса, можно ли как-то изначально повесить на эту кнопку не один клик, а несколько, чтоб срабатывал тот, который назначен для определенного имени класса? Нужно чтоб они повесились на кнопку один раз после загрузки страницы, а потом без перезагрузки срабатывали после смены класса.

Comments

[twobomb]

Не понял почему это нельзя сделать одним обработчиком

[ImagineWorld]

twobomb, мне надо чтоб без перезагрузки страницы работало, а обработчик вешается один раз, даже если класс обновить, то он остается

[twobomb]

ImagineWorld, причем тут перезагрузка страницы?

Answer 1

[Pavel Shvedov]

Вешаешь один обработчик, проверяешь класс, профит

Comments

[ImagineWorld]

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

[Pavel Shvedov]

Да он останется, в обработчике получаешь event.target, смотришь какой сейчас на нем имеется класс, и делаешь соответствующие действия, все в одной функции, навешанной один раз при загрузке. Просто ты вешаешь обработчик не на какой-то класс, а на элемент на странице, который ты нашел по какому-либо классу, меняй не меняй потом эти классы, элемент остаётся тем же, и обработчик тот же

[ImagineWorld]

Pavel Shvedov, а можно пример с кодом, прошу прощения если напрягаю, но это реально бы выручило

[Pavel Shvedov]

button.addEventListener('click', (e) => {
  if (e.target.classList.contains('class1')) {
    // first case
  } else if (e.target.classList.contains('class2')) {
    // second case
  }
});

[Tendor]

Можно. Вариантов тут много.
синтаксис библиотеки jquery

<button class="btn class1"></button>

$(document).on('click', '.btn', function() {
проверяем текущий класс или атрибут (data) и выполняем необходимые действия.
});

$(document).on('click', '.class1', function() {
выполняем необходимые действия
});

$(document).on('click', '.class2', function() {
выполняем необходимые действия
});

при смене класса так работать не будет, если на момент инициализации в дом дереве не было класса class1
$('.class1').on('click', function() {

});