HTML 键盘的 JavaScript 事件的简洁处理

Question

我创建了一个 html 键盘，如下所示。我正在寻找一种创建单个事件处理程序的简单方法，该事件处理程序检测单击了哪个数字，然后将数字的数字或文本值传递给更新文本显示的单独函数。如果可能的话，我更愿意使用纯 JavaScript，即没有 jQuery。

<div id="numbers">
        <a class='r1'>1</a>
        <a class='r1'>2</a>
        <a class='r1'>3</a>
        <a class='r2'>4</a>
        <a class='r2'>5</a>
        <a class='r2'>6</a>
        <a class='r3'>7</a>
        <a class='r3'>8</a>
        <a class='r3'>9</a>
        <button type="button" id="buttonCancel">Cancel</button>
        <a class='r4'>0</a>
        <button type="button" id="buttonOk">OK</button>
</div>

Answer 1

你在寻找像this这样的东西吗？

function init() {
    // Solution 1
    /*var numberEls = document.getElementsByClassName('number'),
          displayLabel = document.getElementById('display-label'),
          numberClickHandler = function(e) {
              var number = e.target.innerHTML;

              otherFunction(parseInt(number));
          },
          otherFunction = function(n) {
              displayLabel.innerHTML = n;
          };

    for (var i = 0; i < numberEls.length; i++) {
        var elem = numberEls[i];

        if (elem.addEventListener) {
            elem.addEventListener('click', numberClickHandler, false);
        }
        else if (elem.attachEvent) {
            elem.attachEvent('onClick', numberClickHandler);
        }
    }*/

    // Solution 2
    var numbers = document.getElementById('numbers'),
        displayLabel = document.getElementById('display-label'),
        numberClickHandler = function(e) {
            var number = e.target.innerHTML;

            // Supress clicks on cancel or ok buttons.
            if (e.target.id == 'buttonCancel' || e.target.id == 'buttonOk')
                return false;

                otherFunction(parseInt(number));
            },
            otherFunction = function(n) {
                displayLabel.innerHTML = n;
            };

    if (numbers.addEventListener) {
        numbers.addEventListener('click', numberClickHandler, false);
    }
    else if (numbers.attachEvent) {
        numbers.attachEvent('onClick', numberClickHandler);
    }  
}