[JavaScript] 11-3_KeyboardEvent.js

var eventCtrl = 

{

add: function (elem, eventType, handler)

{

eventType = eventType.replace('on', '');

if(elem.addEventListener)

{

elem.addEventListener(eventType, handler, false);

}

else if(elem.attachEvent)

{

eventType = 'on' + eventType;

elem.attachEvent(eventType, handler);

}

},

remove: function(elem, eventType, handler)

{

eventType = eventType.replace('on', '');

if(elem.removeEventListener)

{

elem.removeEventListener(eventType, handler);

}

else if (elem.detachEvent)

{

eventType = 'on' + eventType;

elem.detachEvent(eventType, handler);

}

},

//이벤트를 취소시키는 메서드.

cancel: function(event)

{

event.returnValue = false;

if(event.preventDefault)

{

event. preventDefault();

}

},

//엘리먼트의 키보드 이벤트를 탐지.

keyEvents: 

{

onlyNumber: function(event)

{

var keyCode = event.keyCode || event.which;

document.getElementById('insertedKeyCode').innerHTML = keyCode;

//숫자버튼에서 이벤트가 발생했을때만 통과시키도록 함.

//아스키 코드로 숫자0은 48, 숫자9는 57

if(keyCode < 48 || keyCode > 57)

{

eventCtrl.cancel(event);

}

}

}

};

eventCtrl.add(window, 'load', 

function()

{

//numberInput엘리먼트에서 

var numberInput = document.getElementById('numberInput');

//키다운 이벤트가 발생하면

eventCtrl.add(numberInput, 'keydown', 

function()

{

var keyCode = event.keyCode || event.which;

//insertedKeyCode엘리먼트에 키코드를 보여주도록 한다.

document.getElementById('insertedKeyCode').innerHTML = keyCode;

});

});

//숫자만 입력받도록 하는 메서드.

function setOnlyNum()

{

var numberInput = document.getElementById('numberInput');

numberInput.value='';

eventCtrl.add(numberInput, 'keydown', eventCtrl.keyEvents.onlyNumber);

numberInput.focus();

}

function resetOnlyNum()

{

var numberInput = document.getElementById('numberInput');

numberInput.value = '';

eventCtrl.remove(numberInput,'keydown', eventCtrl.keyEvents.onlyNumber);

numberInput.focus();

}

11-3_KeyboardEvent.js