자바스크립트 이벤트 전파, 중단 정리

이벤트 전파

- 상위태그, 하위태그에 이벤트를 실행시켰을 때 전파가 되어 같이 실행되는것을 말한다.

 

<div id="divArea">
	<span id="spanArea">
		<button type="button" id="btn">클릭</button>
	</span>
</div>

<script>
	const divArea = document.getElementById("divArea");
	const spanArea = document.getElementById("spanArea");
	const btn = document.getElementById("btn");

	divArea.addEventListener("click", fnDivArea);
	spanArea.addEventListener("click", fnSpanArea);
	btn.addEventListener("click", fnBtnArea);

	function fnDivArea(event){
		alert('div 영역!!! ');
	}

	function fnSpanArea(e){
		alert('span 영역!!! ');
	}

	function fnBtnArea(e){
		alert('btn 영역!!! ');
	}
</script>

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen.

 

codepen에서 클릭을 해보면 한번 클릭으로 세가지 알림창이 뜨는걸 볼 수 있다.

 

전파를 중단시키려면?

이벤트 전파를 막는 함수를 사용하면 된다.

 

stopPropagation

- 크롭, 사파리, 파이어폭스

 

cancelBubble

- IE8 속성 true 

	function fnDivArea(event){
    event.stopPropagation();
		alert('div 영역!!! ');
	}

	function fnSpanArea(e){
    event.stopPropagation();
		alert('span 영역!!! ');
	}

	function fnBtnArea(e){
    event.stopPropagation();
		alert('btn 영역!!! ');
	}

---

preventDefault

- 이벤트 동작 중단 함수