Использование window.onkeyup в двух разных файлах javascript

Question

У меня есть веб-приложение, которое использует несколько файлов javascript. У меня есть два обработчика событий, как это в двух файлах:

window.onkeyup = function (e) { SomeFunction1(e) } 
window.onkeyup = function (e) { SomeFunction2(e) } 

SomeFunction1 находится в файле, который используется в любой части сайта, но SomeFunction2 находится в файле, который используется только в одной части сайта.

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

Вместо замены обработчика window.onkeyup, я хочу добавить еще один обработчик в файле javascript, который содержит SomeFunction2 так, чтобы вызывались обе функции. Как я могу это сделать? Доступен JQuery.

Спасибо.

Answer 1

Вы можете использовать on функцию событий для этого:

$(window).on('onkeyup', SomeFunction1); 
$(window).on('onkeyup', SomeFunction2); 

Или используя ванильный JS

window.addEventListener('onkeyup', SomeFunction1); 
window.addEventListener('onkeyup', SomeFunction2); 

Answer 2

Это потому, что вы используете DOM атрибут прикрепить обработчик, и может быть только один.

Вы лучше использовать addEventHandler API:

document.querySelector('foo').addEventListener('click', function(){ 
    // Your code goes here 
}) 

ИЛИ

document.querySelector('foo').addEventListener('click', someFunction); 

function someFunction(){ 
    // Your code goes here 
} 

Вы можете добавить столько, сколько вы хотите.

Answer 3

Если JQuery доступен, вы можете легко добавить столько слушателя, как вы хотите

$(window).on("keyup", function(){alert(1);}); 
$(window).on("keyup", function(){alert(2);}); 

Попробуйте на https://jsfiddle.net/45zf9vkd/

Answer 4

Попробуйте это;)

Добавить это в общем файле:

window.onkeyup = function(e){ 
    try{ 
     SomeFunction1(e); 
    }catch(e){} 
    try{ 
     SomeFunction2(e); 
    }catch(e){} 
} 

И включают ваши файлы, где: SomeFunction1(e) и SomeFunction2(e), где они вам нужны?

Answer 5

Вам нужно будет использовать addEventListener иметь несколько обработчиков для DOM элемента, например:

document.querySelector('#elementID').addEventListener('keyup', function(){... 

Если у вас уже есть Jquery настройки (это не стоит добавить JQuery на ваш сайт только для этого) , вы можете использовать

$(window).on('keyup', function(){... 

Это будет только добавить дополнительные обработчики и не перезаписывает существующие