자바스크립트에서 키 이벤트를 처리할 때 '
Tab'이나 '
Backspace'를 직접처리하려면 몇 가지 문제가 있습니다. Tab이나 Backspace 모두 브라우저에서 디폴트로 사용되는 키이므로 Tab이 눌렸을 때는 Tab index에 따라 HTML의 element를 순회하고, Backspace가 눌렸을 때는 이전 페이지로 돌아가는 문제가 발생하게 됩니다.
이러한 문제를 해결하기 위해서는 어떻게 해야할까요? 전에 조사했던 바로는
setTimeout을 사용하는 편법을 사용하는 것이었습니다. 그러나, 이러한 방법을 사용하지 않는 방법도 존재합니다. ^^;; preventDefault와 cancelable을 사용하는 것입니다.
bool = event.cancelable;
or
event.preventDefault();
이 두개를 사용하게 되면, 브라우져의 디폴트 동작을 취소시킬 수 있게 됩니다. preventDefault를 사용할지 또는 cancelable을 사용할지는 event에 따라 달라지게 됩니다. (※ IE에서는
return false를 해주면 됩니다.)
그리고, 이벤트가 발생했을 때 상위의 element로 이벤트를 전달하고 싶지 않을 때는 위의 cancelable이나 preventDefault가 아니라 stopPropagation을 사용해주면 됩니다. (※ IE에서는 cancelBubble을 사용하면 됩니다.)
event.cancelBubble = true; //for IE
if(event.stopPropagation){
event.stopPropagation();
}
관련글:
DOM 객체에 EventListener 등록
※ 그러면, Input Element에 대해서 keyDown, keyPress, keyUp 이벤트를 모두 사용할 때 cancelBubble 또는 stopPropagation이나 preventDefault를 호출하면 어떻게 될까요?
정답:
more..
아무런 영향을 미치지 않습니다. - IE, ff에서 실험을 해봤구요. 실험한 코드는 다음과 같습니다. preventDefault나 cancelBubble, stopPropagation, return false는 브라우저 자체 동작을 막거나, 상위 element에게 event를 전달하는 것을 막을 뿐입니다. 자기 자신의 이벤트 처리에는 동작하지 않습니다.
주의 : 사파리는 자기 자신 이벤트 처리 안됩니다. ㅡㅡ;;
<html>
<head>
<title>QuickEdit Test</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script language="JavaScript" type="text/javascript">
function onLoad(){
var obj = $('sample1');
addEvent(obj, 'keydown', printDebug);
addEvent(obj, 'keypress', printDebug);
addEvent(obj, 'keyup', printDebug);
}
function printDebug(event){
$('debug').innerHTML = $('debug').innerHTML +
'event type: ' + event.type + '<br/>';
//event.preventDefault();
//event.stopPropagation();
//return false;
//event.cancelBubble = true;
}
</script>
</head>
<body onload="onLoad();">
<input type="text" id="sample1" size="40" maxlength="40"/>
<div id="debug"></div>
</body>
</html>
드뎌 알아내셨군요. 우예~~
답글삭제^^;; 알아낸건 좀 됬구요.. 글올린건 어제구요. ㅋ
답글삭제