Есть ли способ "наслоить" событие Javascript?

Question

У меня есть набор из 3 рядов по 12 input[class='variant-amount'] коробки каждый. С некоторыми полями ввода связано событие, например "onkeypress" или же "onkeyup"

Я хотел бы применить слушатель глобального события на .variant-amounts с использованием "onkeypress" событие, но я не хотел бы отменять действие тех полей ввода, которые уже прикрепили "onkeypress" событие.

Итак, есть ли способ в основном установить событие, которое, когда происходит, выполняет свой собственный код, а после выполняет свой собственный "onkeypress" событие? (без изменения любого поля ввода, они должны быть доступны через его класс)

Answer 1

function all(){ // code }
function press(){ 
  //code
  all();
}
function up(){ 
  // code 
  all();
}
elemenUp.addEventListener("keyup", up());
elementPress.addEventListener("keypress", press());

Если в какой-то момент вам нужно получить доступ к этому, просто укажите аргумент во всех (argThis) и передайте это внутри функций прослушивателей событий.

Answer 2

Чтобы сохранить функциональность обработчика событий, а также расширить его, вы должны переопределить обработчик событий, но сохранить ссылку на исходный и вызвать его.

Я рекомендую вам назначать глобальный обработчик событий после каждого input был назначен конкретный, сделайте что-то вроде этого после того, как все входы имеют свои обработчики:

// Query all the inputs and transform the result into a proper array
Array.prototype.slice.call(document.querySelectorAll('input[class="variant-amount"]'))
    .forEach(function (variantAmount) {
        var original = variantAmount.onkeypress;

        variantAmount.onkeypress = function () {
            // do your stuff

            // Call the original event handler forwarding both this and the arguments, which needs to be converted to a real array
            original.apply(this, Array.prototype.slice.call(arguments));
        };
    });

Answer 3

Вам нужно подписать контейнер на событие нажатия клавиш на этапе захвата. Таким образом, ваш контейнер получит нажатие клавиши до его дочерних элементов:

var body = document.body;
// add handler of keypress in capturing phase
body.addEventListener("keypress", function(){ console.log("keypress body") }, true);

var input = document.querySelector("input");
input.addEventListener("keypress", function(){ console.log("keypress input") });

<div>
  <input value="foo" >
</div>

На тот случай, если вы пропустили этот захватывающий / распространяющийся принцип распространения событий в DOM: http://www.quirksmode.org/js/events_order.html