JavaScript: Как я могу добавить события нажатия клавиш, когда у меня уже есть событие onclick? - PullRequest
Новая
       36

JavaScript: Как я могу добавить события нажатия клавиш, когда у меня уже есть событие onclick?

0 голосов
/ 11 июня 2018

Я строю веб-калькулятор.

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

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

Спасибо. 

const a = document.getElementsByTagName('input');

// button press conditions
for (let i = 0; i < a.length; i++) {
    a[i].addEventListener('click', function(e) {
        // operators
        if (a[i].value === '+' ||
            a[i].value === '-' ||
            a[i].value === '×' ||
            a[i].value === '÷') {
                prsOpr(i);
        }

        // decimal button
        else if (a[i].value === '.') prsDeci(i);

        // equal button
        else if (a[i].value === '=') prsEql(i);

        // backspace button
        else if (a[i].value === '←') prsBksp();

        // clear button
        else if (a[i].value === 'Clear') prsClr();

        // any number button
        else logNum(i);
    });
};

1 Ответ

0 голосов
/ 11 июня 2018

Ваш текущий код использует анонимную функцию в качестве обратного вызова для события click, и, поскольку он анонимный, вы не можете повторно использовать его и для других событий, не дублируя его.Итак, выделите вашу функцию обратного вызова и дайте ей имя.Затем просто используйте второй .addEventListener() и укажите его (и первый) на ту же функцию:

Вот пример: 

let input = document.querySelector("input");

input.addEventListener("click", foo);    // Set up a click event handler
input.addEventListener("keydown", foo);  // Set up a key down event handler

// Both event registrations point to this one function as their callback
// so, no matter whether you click or type in the field, this function 
// will run. But, all event handlers are passed a reference to the event
// that triggered them and you can use that event to discern which action
// actually took place.
function foo(evt){
  console.log("The " + evt.type + " event has been triggered.");
}
<input>
...