2021. 12. 16. 09:51ㆍJavascript/개념
1. event.preventDefault
기본(default)를 막다(prevent)라는 단어에서 유추 할수 있듯이
html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다.
예를 들어 앵커태그 <a> <submit> <button> 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데 preventDefault() 메서드를 통해 해당 이벤트 발생을 막을 수 있습니다.
이벤트 흐름의 어떤 단계에서라도 preventDefault()를 호출하면 이벤트를 취소합니다.
즉, 이벤트에 대한 구현체의 기본 동작을 실행하지 않습니다.
Event.cancelable을 사용해서 이벤트의 취소 가능 여부를 알아낼 수 있습니다.
취소 불가능한 이벤트에 대해 preventDefault()를 호출해도 아무 효과가 없습니다.
2. event.stopPropagation()
전파(Propagation)를 중지한다(stop)라는 의미 처럼
상위 엘리먼트로의 이벤트 전파(이벤트 버블링)을 막기 위한 메서드입니다.
자바스크립트의 이벤트는 가장 하위 뎁스의 엘리먼트부터 실행되고 상위로 전파되는 방식으로 실행됩니다.
만약 이벤트가 전파되어 상위엘리먼트에서 발생한 이벤트가 하위엘리먼트에서 발생한 이벤트 결과에
의도치 않은 결과를 주는 경우 자주 사용합니다.
아래 예제에서 innerDiv 클릭시 innerDiv() > outerDiv() 이벤트순으로 전파되어
2번의 alert이 떠야하지만 innerDiv() 에서 사용된 e.stopPropagation()가
부모 엘리먼트로의 이벤트 전파를 막아 “innerDiv” alert 한 번만 실행 되는 것을 확인 하실 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>event</title>
<style>
.outerDiv {
width: 400px;
height: 200px;
border:1px solid black;
}
.innerDiv {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="outerDiv">
<div class="innerDiv">innerDiv</div>
</div>
<script>
const outer = document.querySelector('.outerDiv')
const inner = document.querySelector('.innerDiv')
outer.addEventListener('click', event => {
alert('outer')
})
inner.addEventListener('click', event => {
event.stopPropagation()
alert('inner')
})
</script>
</body>
</html>
'Javascript > 개념' 카테고리의 다른 글
| [JS] 동작원리 (Stack, Queue, event loop) (0) | 2022.01.04 |
|---|---|
| [JS] fill (0) | 2022.01.03 |
| [JS] Filter() (0) | 2021.12.15 |
| [JS] 마우스 이벤트 종류 (0) | 2021.12.10 |
| [JS] 이벤트 버블링 / 캡쳐링 / 위임 (0) | 2021.11.30 |