[Javascript] 이벤트 전파 중단하기

Jinny Kim·2021년 9월 22일

JQuery

목록 보기

2/5

이벤트 전파

//html code
<div id="div">
 <p id="p">
   <span id="span"> </span>
 </p> 
</div>

//javascirpt code
$("#div").on("click", function(event) {
	console.log("div clicked");
})
$("p").on("click", function(event) {
	console.log("p clicked");
})
$("#span").on("click", function(event) {
	console.log("span clicked");
})

위의 코드에서 가장 하위에 있는 자식 태그인 <span> 태그를 클릭했을 때, 그의 상위 태그(부모 태그)인 <div>, <p>의 클릭 이벤트까지도 모두 동작하게 된다. 이를 '이벤트가 전파'된다고 표현한다.

이러한 이벤트 전파를 중단하기 위해 사용되는 코드들은 다음과 같다.

01. event.stopPropagation()

event.stopPropatation() 은 이벤트가 상위 DOM으로 전파되지 않도록 하는 코드이다.

//event.stopPropagation() 예제
$("#div").on("click", function(event) {
	console.log("div clicked");
})
$("p").on("click", function(event) {
	console.log("p clicked");
})
$("#span").on("click", function(event) {
	console.log("span clicked");	
  	event.stopPropagation();
})

위의 예제는 <span> 태그의 클릭 이벤트에 event.stopPropagation(); 코드를 추가하여, 상위 DOM으로 이벤트가 전파되지 않도록 하는 코드이다. <span> 태그를 클릭했을 때, <span> 의 이벤트만 동작하고, 그 상위의 DOM인 <p>와 <div>이 호출되지 않으며, 부모 태그의 클릭 이벤트도 동작하지 않는다.

02. event.stopImmediatePropagation

1번의 event.stopPropagation()은 이벤트가 상위 DOM으로 전파되지 않도록 하는 코드이다. 하지만 같은 DOM에 여러개의 이벤트가 걸려있는 경우에는 전파를 막아주지 못한다.

//event.stopPropagation() , event.stopImmediatePropagation() 비교 예제 1
$("#div").on("click", function(event) {
	console.log("div clicked");
})
$("p").on("click", function(event) {
	console.log("p clicked");
})
$("#span").on("click", function(event) {
	console.log("span clicked 1번");	
  	event.stopPropagation();
})
//span 영역에 두번째 클릭 이벤트 설정
$("#span").on("click", function(event) {
	console.log("span clicked 2번");	
  	event.stopPropagation();
})

이 경우에 span을 클릭했을 때, p나 div까지 이벤트가 전파되지는 않지만, span에 걸린 두 개의 이벤트 모두가 반응하여,
콘솔에는

span clicked 1번
span clicked 2번

과 같은 내용이 출력된다.

//event.stopPropagation() , event.stopImmediatePropagation() 비교 예제 2
$("#div").on("click", function(event) {
	console.log("div clicked");
})
$("p").on("click", function(event) {
	console.log("p clicked");
})
$("#span").on("click", function(event) {
	console.log("span clicked 1번");
  	//상위 뿐 아니라 같은 레벨로도 이벤트가 전파되지 않도록 중단
  	event.stopImmediatePropagation();
})
//span 영역에 두번째 클릭 이벤트 설정
$("#span").on("click", function(event) {
	console.log("span clicked 2번");	
  	//상위로 이벤트가 전파되지 않도록 중단
  	event.stopPropagation();
})

이 경우에는 span을 클릭하면 span에 걸려있던 두 개의 이벤트 중, 첫번째 이벤트만 호출되고 이 후의 이벤트는 중단된다.
즉, 콘솔에는

span clicked 1번

과 같은 내용이 출력된다.

03. event.preventDefault()

event.preventDefault()는 현재 이벤트의 기본 동작을 중단한다.
아래는 기존 html 태그에서 span 태그를 a 태그로 변경한 코드이다.

//html code
<div id="div">
 <p id="p">
   <a id="a" href="http://www.google.com" target="_blacnk"> a 태그 구글 링크 </a>
 </p> 
</div>

//javascirpt code
$("#div").on("click", function(event) {
	console.log("div clicked");
})
$("p").on("click", function(event) {
	console.log("p clicked");
})
$("#a").on("click", function(event) {
	console.log("a clicked");
  	event.stopPropagation();
})

이 경우, a 태그를 클릭했을 때 a태그에 걸린 클릭 이벤트를 수행하면서 동시에 a태그 가 가지고 있는 기본 동작인 URL 이동의 기능까지 수행하게 된다. 즉 , event.stopPropagation() 코드는 이벤트의 전파만 막을 수 있을 뿐 a태그의 기본 동작인 URL 이동 기능은 막지 못한다.

//event.preventDefault() 예제
$("#div").on("click", function(event) {
	console.log("div clicked");
})
$("p").on("click", function(event) {
	console.log("p clicked");
})
$("#a").on("click", function(event) {
	console.log("a clicked");
  	event.preventDefault();
})