Как добавить дополнительный обработчик событий в jQuery или простой javascript?

Question

У меня есть свой объект с onShow() функция, которая вызывается (мной) при показе объекта. Я могу переопределить эту функцию по назначению

o.onShow = function() { // something };

Но это удаляет предыдущую версию функции. Итак, если я хочу сохранить существующий обработчик, я должен кэшировать его и вызвать новый обработчик:

o.oldOnShow = o.onShow;
o.onShow = function() { this.oldOnShow(); // something };

Но так я могу кешировать только один предыдущий обработчик. Что если их много?

Есть ли удобный способ выполнить эту задачу? Как эта задача названа в литературе? Есть ли методы для этого в jQuery?

Answer 1

Если вам нужно инициировать пользовательское событие (как определено вами), вы должны вызвать .trigger() Метод (всякий раз, когда вы чувствуете, что событие должно быть запущено):

$(o).trigger('my-awesome-event');

Затем вы определяете одного или нескольких слушателей, используя либо .bind() или (если вы используете jQuery 1.7+) .on():

$(o).on('my-awesome-event', function(event){ ... });

Answer 2

В jQuery вы можете добавить столько обработчиков, сколько захотите:

$(o).on('show', function() { ... });

Последующие вызовы не удаляют ранее связанные обработчики.

Answer 3

Вы можете использовать метод привязки jQuery:

$( o ).bind( "show", function() {} );

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

Answer 4

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

Если вы предпочитаете выполнять это в нативном JavaScript, вам нужно использовать конкатенацию строк:

o.onShow = o.onShow + "function() { // something };"

Answer 5

Если вы хотите сделать это с Vanilla Js, это немного сложнее.

const justLog = x => () => console.log(x)
const test = justLog('test called')
const testTwo = justLog('testTwo called')

document.querySelector('button').onclick = testTwo;

<button onclick="test">Test</button>

Проблема с этим, конечно, в том, что это просто меняет слушателя, а не добавляет его.

Однако мы можем добавить нового слушателя с небольшим изменением кода:

const justLog = x => () => console.log(x)
const test = justLog('test called')
const testTwo = justLog('testTwo called')

const appendOnClick = element =>
  newFunction => {
    const original = element.onclick;
    element.onclick = (e) => {
      original(e)
      newFunction(e)
    };
  };
  
const button = document.querySelector('button')
const appendNewFunction = appendOnClick(button)

appendNewFunction(testTwo)

const testThree = justLog('testThree called')

appendNewFunction(testThree)
appendNewFunction(test)

<button onclick="test()">Test</button>

Таким образом, мы можем добавлять несколько функций к элементу без переопределения функций, которые были ранее на месте.