자바스크립트에서 이벤트 취소와 전달 취소

자바스크립트에서 키 이벤트를 처리 할 때 'Tab' 이나 'Backspace' 를 직접 처리 하려면 몇 가지 문제가 있다.

Tab이나 Backspace 모두 브라우저에서 디폴트로 사용되는 키이므로 Tab이 눌렀을 때는 Tab Index에 따라 HTML의 element를 순회하고, Backspace가 눌렀을 때는 이전 페이지로 돌아가는 문제가 발생하게 됩니다.

이러한 문제를 해결하기 위해서는 어떻게 해야 할까요? 전에 조사했던 바로는 setTimeout을 사용하는 편법을 사용 하는 것입니다. 그러나, 이러한 방법을 사용하지 않는 방법도 존재합니다.

 

ex) bool = event.cancelable; or event.preventDefault();

이 두개를 사용하게 되면, 브라우져의 디폴트 동작을 취소 시킬 수 있게 됩니다.

 

preventDefault를 사용할지 or cancelable을 사용 할지 event에 따라 달라지게 됩니다.

(* IE에서는 return false를 해주면 됩니다.)

 

그리고, 이벤트가 발생 했을 때 상위의 element로 이벤트를 전달하고 싶지 않을 때는 위의 cancelable이나 preventDefault가 아니라 stopPropagation을 사용해주면 됩니다.

(* IE에서는 cancelBubble을 사용하면 됩니다.)

event.cancelBubble = true; // for IE

if(event.stopPropagation) event.stopPropagation() ;