propagation의 사전적 의미는 전파,확산
입니다.
사용자가 마우스로 웹 페이지 내의 버튼을 클릭했을 때 대부분의 사람들은 버튼만 반응했다고 생각하게 된다. 하지만 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이를 버블업이라고 합니다.
위 슬라이드 우측의 문서구조를 보면 a태그는 li, ul의 두 개의 부모 태그가 있습니다.
사용자가 a태그를 클릭했을 때 클릭이벤트는 a태그를 감싸고 있는 li, ul태그로 순차적으로 전달되는데 즉 a태그의 onclick
-> li태그의 onclick -> ul태그의
onclick을 실행하게 됩니다.
만약에 ul태그에 클릭 이벤트가 있을 경우 a태그를 클릭하는 순간에는 의도하지 않은 ul태그의 클릭 이벤트가
실행됩니다.
예를 들면 이웃집에서 이사를 와서 바로 옆집에 살고 있는 슬기네 집에 떡을 돌렸다고 합니다. 슬기는 떡을 받고 기쁜 나머지
아버지에게 가져다 줍니다. 슬기는 “아버지 옆집에서 새로 이사를
왔다고 떡을 주고 갔어요~” 슬기는 효심이 지극했습니다. 슬기
아버지 또한 효심이 지극하여 받자마자 바로 슬기 할아버지에게 떡을 가져다 줍니다. 슬기 아버지는 “아버지 옆집에서 새로 이사를 왔다고 맛있는 떡을 주고 갔습니다.” 이렇게
떡을 오손 도손 나눠 먹게 됩니다.
그런데 옆집에서 슬기에게 떡을 주면서 “이 떡은 너 혼자만 먹어야
한다”라고 말하면서 슬기에게 떡을 주었다면 슬기는 혼자 먹습니다. 효심보다는
떡에 눈이 멀었던 거죠…..
이때 혼자만 먹어라는 의미를 stopPropagation이라고 한다
stopProPagation은
부모태그로의 이벤트 전파를 stop중지하라는 의미입니다.
Event.preventDefault()는?
preventDefault()를 이해하기 위해서는 a태그를 유심히 봐야 합니다. 위 슬라이드에 표시된 a태그는 내부적으로 href=”#” 속성을 가지고 있는데 href속성은 웹 브라우저에게 a태그를 클릭시 이동하여야 할 페이지를
나타냅니다. 예를 들면 <a href=”detailproduct?code={#code}”
onclick=””}>상세정보로 이동</a>처럼 사용합니다
위 a태그는 click이벤트
또한 가지고 있기 때문에 a태그를 클릭했을 때는 두 가지 행동을 하게 되는 데 첫 번째는 click이벤트를 실행합니다. 두 번째는 브라우저에게 href에 표시된 곳으로 이동하도록 합니다. href=”#”속성을 넣은 이유는 a태그에는 click이벤트가 있으니 click이벤트만 실행하고 웹 브라우저는
이동하지 말아라 하는 의도로 설정한 값입니다. 이렇게 하게 되면 클릭 시에는 click이벤트만 실행하고 웹 브라우저는 이동하지
마라하는 의도로 설정한 값입니다. 이렇게 하게 되면 클릭 시에는
click이벤트만 실행되고 웹 브라우저가 이동하지 않게 됩니다. 일종의 꼼수이죠
근데 여기서 한가지 주의해야 할 점이 있는데 Href”#”은 웹 브라우저가
다른 곳으로 이동하지는 않지만 스크롤이 있는 곳에서는 페이지 상단으로 이동하게 됩니다. Href=”#~~~”으로
사용하는 것을 앵커(anchor :닻)라고 하는데 href=”#”은 웹 브라우저의 최상단을 가리키는 앵커입니다.
글을 작성할 때나 회원 가입을 할 때 버튼이 한번 클릭할 때마다 쭉 위로 올라가는 경험을 해보신 분들은 짜증을 알 것입니다.
이 브라우저의 행동을 막기 위해 사용하는 것이 preventDefault입니다.
preventDefault는 a태그처럼
클릭 이벤트 외에 별도의 브라우저 행동을 막기 위해 사용됩니다.
또한 form의 submit액션을
막아주기도합니다.
출처 : http://ismydream.tistory.com/98