[JS] 이벤트 버블링 적용 및 제한

산을넘는다 2020. 6. 19. 16:09

이벤트 버블링

이벤트를 실행하면, 상위에 있는 같은 이벤트를 순차적으로 실행함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

	window.onload = function() {
		// 이벤트 버블링 :  (onlclick) 이벤트를 실행하면, 상위에 같은 이벤트를 모두 실행시킴
		var span = document.querySelector('span')
		var h1 = document.querySelector('h1')
		var div = document.querySelector('div')
				
		span.onclick = function() {
			alert('click span...')
		}
		
		h1.onclick = function() {
			alert('click h1...')
		}
		
		div.onclick = function() {
			alert('click div...')
		}
	}
	
</script>
</head>
<body>
	<div>
		<h1>
			<span>Hello</span>
		</h1>
	</div>
</body>
</html>

이벤트 버블링 제한하기

클릭했을 때의 이벤트(MouseEvent)를 e로 받는다. 매개변수명은 내 멋대로 정하면 됨.
MouseEvent를 항상 날리고 있었는데, 우리가 사용하지 않은 것 뿐임.

arguments[0] 으로 활용해도 같은 결과를 얻을 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

	window.onload = function() {
		// 이벤트 버블링 :  (onlclick) 이벤트를 실행하면, 상위에 같은 이벤트를 모두 실행시킴
		var span = document.querySelector('span')
		var h1 = document.querySelector('h1')
		var div = document.querySelector('div')
				
		span.onclick = function(e) { // 클릭했을 때의 이벤트를 e로 받는다.
			alert('click span...')
			console.log(e)
		}
		
		h1.onclick = function(e) {
			alert('click h1...')
			e.cancelBubble = true // 나보다 상위의 같은 이벤트에 가지 맙시다!
		}
		
		div.onclick = function(e) {
			alert('click div...')
		}
	}
	
</script>
</head>
<body>
	<div>
		<h1>
			<span>Hello</span>
		</h1>
	</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>

	window.onload = function() {
		// 이벤트 버블링 :  (onlclick) 이벤트를 실행하면, 상위에 같은 이벤트를 모두 실행시킴
		var span = document.querySelector('span')
		var h1 = document.querySelector('h1')
		var div = document.querySelector('div')
				
		span.onclick = function() { 
			// 클릭했을 때의 이벤트(MouseEvent)를 e로 받는다. 매개변수명은 내 멋대로 정하면 됨.
			// MouseEvent를 항상 날리고 있었는데, 우리가 사용하지 않은 것 뿐임.
			alert('click span...')
			console.log(arguments[0])
		}
		
		h1.onclick = function() { // 클릭했을 때의 이벤트(MouseEvent)를 e로 받는다.
			alert('click h1...')
			arguments[0].cancelBubble = true // 나보다 상위의 같은 이벤트에 영향을 미치지 맙시다!
		}
		
	/* 	func()
		
		func(1,2,3) */
		
		div.onclick = function() { // 클릭했을 때의 이벤트(MouseEvent)를 e로 받는다.
			alert('click div...')
		}
	}
	
</script>
</head>
<body>
	<div>
		<h1>
			<span>Hello</span>
		</h1>
	</div>
</body>
</html>