preventDefault(), stopPropagaion()은 Event 인터페이스에서 제공하는 메서드 입니다. DOM 내에 위치한 요소들은 Event 인터페이스를 통해 이벤트 관련 다양한 속성과 메서드를 제공받아 이벤트를 수신 받고 받은 이벤트를 처리하는 코드를 실행할 수 있습니다.
e.preventDefault()
기본(default)를 막다(prevent)라는 단어에서 유추할 수 있듯이 html에서 표준으로 제공하는 태그의 기본 이벤트 발생을 막는 메서드입니다. 예를 들어 앵커태그 <a> <submit> <button> 태그는 각각 페이지 이동이나 form 데이터 전송 등의 기본 이벤트들이 있는데 preventDefault() 메서드를 통해 해당 이벤트 발생을 막을 수 있습니다.
<html>
<head>
<script>
function stopDefaultAction(e) {
e.preventDefault();
}
</script>
</head>
<body>
<a href="https:https://velog.io" onClick="stopDefaultAction(event)">페이지 이동</a>
</body>
</html>e.stopPropagation()
전파(Propagation)를 중지한다(stop)라는 의미처럼 상위 엘리먼트로의 이벤트 전파(이벤트 버블링)을 막기 위한 메서드입니다.
자바스크립트의 이벤트는 가장 하위 뎁스의 엘리먼트부터 실행되고 상위로 전파되는 방식으로 실행됩니다. 만약 이벤트가 전파되어 상위 엘리먼트에서 발생한 이벤트가 하위 엘리먼트에서 발생한 이벤트 결과에 의도치 않은 결과를 주는 경우 자주 사용합니다.
예를 들어 실무에서 개발시 마크업 영역에서 상위 이벤트로 인해서 원하지 않은 결과가 나오는 경우 사용할 수 있습니다.
아래 예제에서 innerDiv 클릭 시 alertInnerDiv() > alertOuterDiv() 이벤트 순으로 전파되어 2번의 alert가 떠야하지만 alertInnerDiv() 에서 사용된 e.stopPropagation()가 부모 엘리먼트로의 이벤트 전파를 막아 "click InnerDiv" alert 한 번만 실행되는 것을 확인하실 수 있습니다.
<html>
<head>
<script>
function alertInnerDiv(e) {
e.stopPropagation();
alert('click InnerDiv')
}
function alertOuterDiv() {
alert('click outerDiv')
}
window.onload = function() {
document.getElementById("innderDiv").addEventListener('click', alertInnerDiv, false)
document.getElementById("outerDiv").addEventListener('click', alertOuterDiv, false)
}
</script>
</head>
<body>
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
</body>
</html>
