HTML 사용자 이벤트 전달 원리
우리가 매일 사용하는 인터넷 즉, 웹에서는 사용자들이 가장 많이 발생시키는 이벤트 중 하나는 바로 클릭!
사용자가 클릭을 하는 순간 HTML상의 요소들은 클릭을 당한(?) 요소부터 그 요소의 부모님들(?) 부모 요소까지 모두 같이 반응을 하게 되는데요
( 참고로 이러한 현상을 버블업[Bubble Up] 이라고 해요 )
이런 현상을 이벤트가 전파, 확산 된다고 하는건데요 영어로는 propagation이라고 합니다
예를들어 다음과 같은 HTML 코드가 있을 때
1 2 3 4 5 | <ul> <li> <a href="#">Test</a> </li> </ul> | cs |
a태그를 클릭하게 되면 그 상위 요소인 li 그리고 ul 까지 그 이벤트가 전파된다는 것입니다~
event.stopPropagation()
그러면 제목에서 언급했던 event.stopPropagation() 함수는 어떤 건지 느낌이 오실겁니다
말 그대로 전파,확산(propagation)을 멈추는(Stop) 함수에요
즉, 이벤트가 더 이상 확산되지 않고 그 요소에만 발생하도록 해주는 함수
event.preventDefault()
그렇다면 preventDefault() 함수는 어떤 기능을 하는걸까요?
위의 예제 코드를 그대로 가져와서 활용해보면
1 2 3 4 5 | <ul> <li> <a href="#">Test</a> </li> </ul> | cs |
위의 a 태그에서 href가 "#"으로 설정이 되어 있는데 이는 앵커(닻)이라고 하는 것인데 "#"으로 설정을 하면 브라우저의 최상단을 가리키는 앵커로
최하단에서 클릭할 경우 페이지의 최상단으로 화면이 이동되는데요
이런 사용자들을 화나게하고 번거롭게하는 브라우저의 행위를 막아주는 함수가 바로 event.preventDefault() 함수입니다
( 물론 애초에 href를 "#"이 아닌 "#none"으로 설정하면 아무런 일도 일어나지 않는다 )
정확한 preventDefault()함수의 기능은 위의 예제처럼 발생한 이벤트 외에 별도의 이벤트를 막기 위해 사용되요
비슷한듯 다른 두 함수
이렇게 느낌이 비슷하지만 엄연히 다른 jQuery의 두 가지 함수를 살펴봤는데요
부족한 글 솜씨에 제대로 이해가 되셨을지 ..
조금이나마 제 글이 도움이 되셨으면 좋겠습니다!
끝까지 읽어주셔서 감사합니다
^____________^
참고 : http://ismydream.tistory.com/98
