이벤트 버블링에서 대상 요소 얻기

두 개의 요소가 있다고 가정해 봅시다: div 와 그 안에 있는 문단 p:

<div>
	<p></p>
</div>

div에 대한 참조를 변수에 저장합시다:

let div = document.querySelector('div');

태그에 몇 가지 스타일을 추가해 봅시다:

div {
	padding: 20px;
	border: 1px solid red;
}

p {
	width: 200px;
	height: 200px;
	border: 1px solid green;
}

이제 div에 클릭 이벤트 핸들러를 추가합니다:

div.addEventListener('click', function() {
	console.log('click');
});

div에 padding이 있기 때문에, div를 클릭할 때, 문단을 클릭할 수도 있고, 문단이 없는 곳, 즉 div 자체를 직접 클릭할 수도 있습니다.

이때 클릭 핸들러 내의 this는 항상 핸들러가 연결된 요소를 가리킵니다. 우리의 경우 이는 div입니다:

div.addEventListener('click', function() {
	console.log(this); // div
});

그러나, 실제로 이벤트가 발생한 정확한 태그를 얻을 수 있습니다. 이를 위해 event.target에 무엇이 있는지 확인할 수 있습니다:

div.addEventListener('click', function(event) {
	console.log(event.target); // div 또는 p
});

조건문을 사용하여 이 두 가지 경우를 구분할 수 있습니다:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('div를 직접 클릭함');
	}
	if (event.target.tagName === 'P') {
		console.log('문단을 직접 클릭함');
	}
});

tagName 대신 matches를 사용할 수 있습니다:

let div = document.querySelector('div');

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('div를 직접 클릭함');
	}
	if (event.target.matches('p')) {
		console.log('문단을 직접 클릭함');
	}
});

다음 요소들이 주어졌습니다:

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
</div>

div, ul, li {
	padding: 20px;
}

div {
	border: 1px solid red;
}
ul {
	border: 1px solid orange;
}
li {
	border: 1px solid green;
}

div에 클릭 이벤트 핸들러를 추가하세요. 이 핸들러 내에서 이벤트가 어떤 태그에서 발생했는지 판별하세요.

이전 문제를 수정하세요. li를 클릭하면 그 끝에 느낌표가 추가되고, ul를 클릭하면 콘솔에 그 정보가 출력되도록 만드세요.