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

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

2 голосов
/ 09 февраля 2012

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

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

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

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

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

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

Ответы [ 5 ]

5 голосов
/ 09 февраля 2012

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

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

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

4 голосов
/ 09 февраля 2012

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

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

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

$(o).on('my-awesome-event', function(event){ ... });
2 голосов
/ 09 февраля 2012

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

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

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

1 голос
/ 09 февраля 2012

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

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

o.onShow = o.onShow + "function() { // something };"
0 голосов
/ 02 мая 2019

Если вы хотите сделать это с 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>

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

...