[Javascript] 이벤트 버블링을 막아보자

 

 

길었던 8개월이 끝나고 가산으로 다시 돌아왔다!!!!!!!

오자마자 본사에서 진행중인 프로젝트 지원에 들어감,,,

그래도 행복하닷!!!!

 

오늘 코딩 중에 새롭고 재미있는 사실을 하나 배움

예를 들어

<ul>
	<li onclick="click_li()">
		<div>
			<div>
				<input type="button" onclick="click_btn()"/>
			</div>
		</div>
	</li>
	<li onclick="click_li()">
		<div>
			<div>
				<input type="button" onclick="click_btn()"/>
			</div>
		</div>
	</li>
</ul>

function click_li(){
	alert("you clicked li!");
}

function click_btn(){
	alert("you clicked input btn!");
}

이런 상황에서

버튼 타입의 input을 눌렀을 때,

내 예상으로는 click_btn만 실행될 것 같았지만

이상하게도 "you clicked input btn!"이 뜬 후 "you clicked li!"가 alert로 떴다.

한참을 헤매다가,,, 구글링으로 알아냄

 

이 현상은 이벤트 버블링(Event Bubbling)이라고 하며,

이벤트 버블링은 특정 element에서 이벤트가 발생했을 때

그 이벤트가 더 상위의 element로 전달되어가는 특성을 의미한다.

 

예를 들어놓은 걸 봤을 때

input→div→div→li→ul→body→html→window

window까지 가버린다는 소리임

 

그래서 해당 현상, 이벤트 버블링을 저지?하기 위해서는

자바스크립트가 제공하는 이벤트 관련 함수 stopPropagation()을 사용 할 수 있다.

 

 

출처: webisfree.com/2016-06-15/[자바스크립트]-이벤트-버블링-제거방법-stoppropagation()

[자바스크립트] 이벤트 버블링 제거방법 stopPropagation()

설명은 다른 곳에 잘 되어있으니 직접 들어가서 보는 걸로.

 

 

그래서 변경 소스

<ul>
	<li onclick="click_li()">
		<div>
			<div>
				<input type="button" onclick="click_btn(event)"/>
			</div>
		</div>
	</li>
	<li onclick="click_li()">
		<div>
			<div>
				<input type="button" onclick="click_btn(event)"/>
			</div>
		</div>
	</li>
</ul>

function click_li(){
	alert("you clicked li!");
}

function click_btn(e){
	e.stopPropagation();
	alert("you clicked input btn!");
}

그랬더니 "you clicked input btn!"만 alert로 잘 떴다.

 

 

굳!