---

220516

---

DOM

---

preventDefault();

브라우저의 기본 이벤트 동작을 취소합니다.

• 이벤트 타입 contextmenu를 이용해 브라우저 오른쪽 버튼 이벤트 막고 '해당 페이지에서는 오른쪽 클릭을 제한합니다.’ 경고 띄우기

 <form action="">
     <button type="submit" class="submit">제출</button>
 </form>

<script>
        window.addEventListener('', (event) => {
            alert('오른쪽 클릭이 제한됩니다!');
            event.preventDefault();

        })
</script>

stopPropagation();

preventDefault로 기본 이벤트 동작은 취소했지만, 이벤트 흐름, 즉 이벤트 전파(이벤트 프로파게이션)를 막지는 못합니다.

<form action="">
	<button type="submit" class="submit">제출</button>
</form>

<script>
	const submit = document.querySelector('.submit');
	submit.addEventListener('click', (event) => {
	    console.log('clicked');
	    event.preventDefault();
			// event.stopPropagation(); => 이벤트 전파를 막고 싶을때 추가한다.
	});
	
	document.body.addEventListener('click', () => {
	    console.log('event still alive!');
	});
</script>

---