프로그래밍 언어/자바스크립트
event.preventDefault() 와 event.stopPropagation()
초보군붕이
2021. 7. 8. 19:33
반응형
● event.preventDefault()
HTML 에서 a, submit 태그 등 고유한 동작을 가지고있다.
a 태그의 경우 태그를 누르게되면 특정 경로로 이동하게 되고, submit 의 경우 form input 안에 데이터를 전송한다.
이러한 특정 동작을 막을때 event.preventDefault() 메소드를 사용한다.
# <a href="" > 태그
<body>
<a href="https://google.com">구글로 이동</a>
</body>
이때 event.preventDefault() 태그를 사용하여 이동하는것을 막아보겠다.
<body>
<a href="https://google.com">구글로 이동</a>
<script>
const aTag = document.querySelector('a');
aTag.addEventListener('click', e => {
e.preventDefault() // 이벤트 차단
console.log('구글로 이동하는 a태그를 클릭했습니다.')
})
</script>
</body>a 태그를 클릭해도 이벤트가 실행되지 않는다.
# <button type="submit" > 태그
<body>
<form method="POST">
<label for="">2 + 2 = ?</label><br>
<input type="text" name="" id="">
<button type="submit" class="submit-btn">전송</button>
</form>
<script>
const submitBtn = document.querySelector('.submit-btn');
const result = document.querySelector('input');
submitBtn.addEventListener('click', (e) => {
console.log("입력하신 답은 " + result.value + " 입니다.")
})
</script>
</body>form 태그를 이용하여 전송 버튼을 누를경우 입력한 답이 출력되는 코드를 작성했다.
submit 을 누르게 되면 0.1 초 정도 값이 보이고 바로 사라져 버린다. 이 때 event.preventDefault() 를 사용하여 이를 방지할 수 있다.
<body>
<form method="POST">
<label for="">2 + 2 = ?</label><br>
<input type="text" name="" id="">
<button type="submit" class="submit-btn">전송</button>
</form>
<script>
const submitBtn = document.querySelector('.submit-btn');
const result = document.querySelector('input');
submitBtn.addEventListener('click', (e) => {
e.preventDefault()
console.log("입력하신 답은 " + result.value + " 입니다.")
})
</script>
</body>
● event.stopPropagation()
event.stopPropagation() 은 특정 요소에 이벤트가 발생했을때 상위 요소들로 전달되는 현상을 방지해준다.
이 현상을 이벤트 버블링(Event Bubbling) 이라고 한다.
<body>
<div class="div1">
div1
<div class="div2">
div2
<div class="div3">div3</div>
</div>
</div>
<script>
function clickEvent(event) {
console.log(event.currentTarget.className)
};
const divs = document.querySelectorAll('div');
divs.forEach(div => {
div.addEventListener('click', clickEvent)
});
</script>
</body>
# div3, div2, div1 을 각각 클릭시
- div3 클릭 : div3 -> div2 -> div1
- div2 클릭 : div2 -> div1
- div1 클릭 : div1
위 순서처럼 상위 태그로 이벤트가 전파됨을 확인할 수 있다.
event.stopPropagation() 을 적용하고 한번더 테스트 해봤다.
<body>
<div class="div1">
div1
<div class="div2">
div2
<div class="div3">div3</div>
</div>
</div>
<script>
function clickEvent(event) {
event.stopPropagation()
console.log(event.currentTarget.className)
};
const divs = document.querySelectorAll('div');
divs.forEach(div => {
div.addEventListener('click', clickEvent)
});
</script>
</body>clickEvent 함수에서 event 객체에 대해서 event.stopPropagation() 을 적용했다.
반응형