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:

html<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:

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

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

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