Lấy phần tử mục tiêu khi sự kiện nổi bọt

Giả sử chúng ta có hai phần tử: div và đoạn văn p, nằm bên trong div này:

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

Lấy tham chiếu đến div của chúng ta vào một biến:

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

Thêm một số kiểu cho các thẻ của chúng ta:

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

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

Bây giờ giả sử một trình xử lý sự kiện click được gắn vào div:

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

Do div của chúng ta có padding, nên khi chúng ta click vào div, chúng ta có thể click vào đoạn văn, hoặc có thể click vào nơi không có đoạn văn đó, tức là trực tiếp vào div.

Trong trình xử lý sự kiện click, this sẽ luôn trỏ đến phần tử mà trình xử lý được gắn vào. Trong trường hợp của chúng ta đó là div của chúng ta:

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

Tuy nhiên, chúng ta có thể lấy chính xác thẻ nơi sự kiện xảy ra. Để làm điều này, chúng ta có thể xem nội dung của event.target:

div.addEventListener('click', function(event) {
	console.log(event.target); // hoặc div, hoặc đoạn văn
});

Có thể phân biệt hai trường hợp này bằng điều kiện:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('click trực tiếp vào div');
	}
	if (event.target.tagName === 'P') {
		console.log('click trực tiếp vào đoạn văn');
	}
});

Có thể sử dụng matches thay vì tagName:

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

div.addEventListener('click', function(event) {
	if (event.target.matches('div')) {
		console.log('click trực tiếp vào div');
	}
	if (event.target.matches('p')) {
		console.log('click trực tiếp vào đoạn văn');
	}
});

Cho các phần tử sau:

<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;
}

Gắn một trình xử lý sự kiện click vào div. Trong trình xử lý đó, xác định sự kiện đã xảy ra trong thẻ nào.

Sửa đổi bài toán trước. Hãy làm sao để khi click vào li, một dấu chấm than được thêm vào cuối nó, còn khi click vào ul thì thông tin về điều này được in ra console.