Concise handling of events in JavaScript for an html keypad

Question

I have created an html keypad as shown below. I'm looking for a simple way to create a single event handler that detects which number was clicked and then passes the numeric or text value of the number to a separate function that updates a text display. If possible I would prefer to use pure JavaScript, i.e. no 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

Are you looking for something like 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);
    }  
}