stopPropagetion 과 preventDefault 본문
event.stopPropagation() 또는 e.stopPropagation() 을 이해하기 위해서는
html 상에서 사용자 이벤트가 어떻게 전달되는지를 이해해야합니다.
웹에서의 이벤트 전파(Event Bubbling)
만약 사용자가 웹페이지 내의 버튼을 클릭했을때 대부분의 사용자들은 버튼만 반응했다고 생각하게 됩니다.
하지만, 웹페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다.
예를 들자면
<body>
<div class="family">
<div class="parent">
<div class="children">
</div>
</div>
</div>
</body>
<script>
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', message);
});
function message(event) {
console.log(event.currentTarget.className);
}
</script>
div 태그 하나만 클릭했을 뿐인데 3개의 이벤트가 발생하게 됩니다.
그 이유는 브라우저가 이벤르를 감지하는 방식 때문입니다.
브라우저는 특정 화면요소에 이벤트가 발생했을 때
그 이벤트를 최상위에 있는 화면요소까지 이벤트를 전파시킵니다.
따라서 위에 콘솔창 이미지로 보이듯이 children div를 클릭했을시 children > parent > family 순서로 div 태그에 등록된 이벤트들이 실행됩니다.
parent 클릭할 경우에는 parent > family 순으로 찍히겠죠?
만약 이벤트가 특정 div 태그에만 달려 있다면 위와 같은 동작 결과는 확인할 수 없을 것입니다.
이와 같이 하위요소에서 상위요소로의 이벤트 전파방식을 이벤트 버블링 (Event Bubbling) 이라고 합니다.
이 상위로 전파되는 이벤트 버블링을 막기 위해서 event.stopPropagation이라는 웹 API를 사용합니다.
위 코드에서 스크립트부분에 한줄만 추가하면 됩니다.
<script>
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', message);
});
function message(event) {
console.log(event.currentTarget.className);
event.stopPropagation();
}
</script>
event.preventDefault() 는?
a태그를 유심히보시면, a태그는 내부적으로 href(Hypertext reference) 속성을 가지고 있습니다.
href(Hypertext reference) 속성은 웹브라우저에게 a 태그 클릭시 이동하여야할 페이지를 나타냅니다.
예를들면
<a href="https://rgba22202551.tistory.com/" onclick="..."></a>이런식으로 사용하게 되는데,
위 a태그는 click 이벤트 또한 가지고 있기 때문에 a태그를 클릭했을 경우 두가지 행동을 하게 됩니다.
첫번째 click 이벤트를 실행합니다.
두번째 브라우저에게 href에 표시된 url으로 이동하도록 합니다.
href="#" 속성을 넣는 이유는 a태그에는 click 이벤트가 있으니 click 이벤트만 실행하고 웹브라우저는 이동하지 않는다라는 의도로 설정한 값입니다.
이렇게 하게 되면 클릭시에는 click 이벤트가 실행되고, 웹브라우저는 이동하지 않게 됩니다.
단, href="#"은 웹브라우저가 다른 곳으로 이동하지 않고, 스크롤이 있는 곳에서는 페이지 최상단으로 이동하게 됩니다.
href="#" 은 웹브라우저의 최상단을 가르치는 앵커입니다.
이 a태그처럼 클릭이벤트 외에 별도의 브라우저의 행동을 막기 위해 사용합니다.
'STUDY > Javascript N Jquery' 카테고리의 다른 글
| 함수 표현식과 함수 선언식의 차이점 (0) | 2019.03.05 |
|---|---|
| 여러개 요소에 여러개 이벤트 바인딩 하기 (0) | 2019.03.05 |
| 인수와 매개변수란? (0) | 2019.02.28 |
| 2 TYPE의 Prototype (0) | 2019.02.28 |
| Jquery $(document).ready() 와 $(window).load()의 차이점 (0) | 2019.02.27 |
