2018-02-13(javascript 에서 이벤트 전파 중단하는 4가지 방법,엔터키 이벤트 제거)

javascript 이벤트 리스너에서 preventDefault() 와 stopPropagation() 그리고 return false 는 javascript 프로그래밍을 할때 이벤트 중단을 위해 자주 사용되는 코드들이다.

이벤트 중단 시에 사용되는 방식에 대해서 간단하게 정리하면 아래와 같다.

event.proventDefault()
현재 이벤트의 기본 동작을 중단한다.

event.stopPropagation()
현재 이벤트가 상위로 전파되지 않도록 중단한다.

event.stopImmediatePropagetion()
현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단한다.

return false
jQuery를 사용할 때는 위의 두개 모두를 수행한 것과 같고,
JQuery를 사용하지 않을때는 event.preventDefault() 와 같다.

이벤트 전파 예제는 아래의 링크로 확인

출처 : http://programmingsummaries.tistory.com/313

---

Input 입력폼 엔터키 누를 경우 Submit 막기, prevent

입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit 이 일어나는 경우 이를 막기위한 (prevent) 방법을 알아봅니다.

먼저 input 태그의 wrapper 태그로 form의 여부를 확인합니다. form 태그가 없는 경우에는 엔터키가 동작하지 않으므로 이를 빼는 것이 가장 빠른 방법입니다.

1. form 태그를 제거하기

2. keydown 이벤트 추가후 엔터키 이벤트 제거하기

다른 방법으로 엔터키 발생시 preventDefault()를 추가합니다.

-모든 엘리먼트에 적용하기

document.addEventListener('keydown',function(event){
    if(event.keyCode === 13)
        event.preventDefault();
},true);

-input 태그에만 적용하기(jQuery를 사용)

$('input[type="text"]').keydown(function(){
    if(event.keyCode === 13)
        event.preventDefault();
});