preventDefault vs stopPropagation 차이

preventDefault(); 와 stopPropagation(); 차이

* preventDefault

preventDefault 는 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드입니다.

<a>,<input>,<textarea>의 기본 동작을 막을 수 있습니다.

a태그는 적용된 href 링크값으로 페이지 이동을 해주는 기본 적인 기능을 가지고 있습니다.
a태그를 클릭 했을 때 preventDefault() 메서드를 실행시켜 주면 페이지 이동을 하는 기본 기능을 막는 것 입니다.

* stopPropagation

이벤트가 상위 DOM으로 전달,전파를 하지 않도록 하는 코드입니다.

이벤트 전파를 막아 주지만 기본 이벤트를 막아주진 않습니다.

사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 이걸 막는게 stopPropagation!!

- 참고할만한 이야기(어느 글 댓글에서 퍼옴)
자주쓰는 작업방법 중에 하나가 포커싱을 못 잡아내는 태그에 onclick 등의 클릭이벤트 속성을 건다는 것입니다.
사실 그렇게 건다고 해서 기능적으로 안 되는 것은 아니지요
그러나 그건 웹접근성 상 잘못 된 방법입니다. 
'뭐~ 기능 작동시키는데에 문제 없으니까~' 하면서 잘못된 지식들이 선임에서 후임으로 전해지고 학원에서도 그렇게 가르치고 있는 것 아닌가 싶기도 합니다
포커싱이 되는 태그인 a, button, input 태그에 걸면 됩니다
몇가지 팁으로 button은 그냥 <button></button>으로 두면 클릭시 submit 되어버립니다

<button type="button">버튼명</button>으로 해야 submit 안 됩니다

input은 일반 버튼용으로 쓰고 싶을 땐 <input type="button" value="버튼명" />으로 쓰면 됩니다
<button type="button"></button>과 <input type="button" />은 기능상 큰차이 없는 듯 합니다만 보통 둘중에선 <button type="button"></button>을 더 많이 쓰는 추세이긴 하는 듯 합니다. <input type="image" src="" />는 <input type="submit" />과 같은 submit 기능을 하는 듯 하고요
그리고 a태그에 href 값을 아예 빼버려도 웹표준, 웹접근성에 위반되지 않습니다. a태그에 href를 쓰지않고 onclick을 쓰고 싶은 경우에는 href=""를 그냥 없애버리면 됩니다.
다만 주의점은 href 값을 없애버리면 커서가 손가락 모양이 안 될 수도 있습니다. 그건 reset.css에서 a {cursor:pointer;}를 넣어주면 해결됩니다.

->

href 속성이 없으면 키보드를 이용한 포커싱이 되지 않습니다.
물론 tabIndex 속성을 이용하면 되긴합니다 :)