JavaScript:当我已经有onclick事件时,如何添加按键事件?

时间:2018-06-11 15:12:32

标签: javascript javascript-events onclick keypress addeventlistener

我正在建立一个网络计算器。

当用户点击按钮时它工作正常,但我也希望用户按下按键。我不确定如何顺利地做到这一点。

我只包含了我的程序中的事件监听器部分,因为其余部分对我的问题是不必要的。

感谢。

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 :(得分:1)

您当前的代码使用匿名函数作为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>