Phần tử sự kiện trong đối tượng Event trong JavaScript

Đối tượng Event cũng cho phép lấy phần tử nơi sự kiện xảy ra. Phần tử này được chứa trong thuộc tính target. Tại sao cần điều này nếu phần tử này đã có trong this?

Vấn đề là this luôn chứa phần tử, mà sự kiện được gắn vào, còn thuộc tính target - phần tử thực sự được nhấp vào. Phần tử thực sự này có thể trùng với this, hoặc có thể không trùng.

Hãy xem xét một ví dụ. Giả sử chúng ta có một div, và bên trong nó là một đoạn văn:

<div id="elem">
	<p>text</p>
</div>

Hãy gắn sự kiện vào div, nhưng nhấp vào đoạn văn. Rõ ràng, việc nhấp vào đoạn văn đồng thời cũng là nhấp vào div, vì đoạn văn nằm trong div của chúng ta.

Trong trường hợp được mô tả, thuộc tính target sẽ chứa thẻ cuối cùng, nơi sự kiện xảy ra - tức là đoạn văn, chứ không phải div. Hãy kiểm chứng điều này:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	console.log(event.target); // sẽ in ra đoạn văn của chúng ta
	console.log(this);         // sẽ in ra div của chúng ta
});

Giả sử bạn có danh sách ul với các thẻ li:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Hãy gắn trình xử lý nhấp chuột vào thẻ ul. Trong trình xử lý này, hãy kiểm tra bằng thuộc tính tagName, xem nhấp chuột vào thẻ nào. Nếu nhấp chuột vào thẻ li - hãy thêm dấu chấm than vào cuối văn bản của thẻ đó. Còn nếu nhấp chuột vào thẻ ul - hãy xuất thông tin về điều đó vào console.