Đối tượng this trong JavaScript

Bây giờ chúng ta sẽ làm việc với đối tượng đặc biệt this, có sẵn trong hàm xử lý sự kiện. Đối tượng này chỉ đến phần tử nơi sự kiện xảy ra.

Đối tượng this rất tiện lợi khi phần tử nơi sự kiện xảy ra và phần tử được thao tác như là kết quả của sự kiện, là cùng một phần tử.

Ví dụ, nếu chúng ta có một input, chúng ta có thể gắn một trình xử lý sự kiện mất focus cho nó và khi sự kiện đó xảy ra thì làm điều gì đó với văn bản trong input. Hãy thực hiện điều đã mô tả. Giả sử chúng ta có input:

<input id="elem" value="text">

Hãy lấy tham chiếu đến nó vào biến elem:

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

Gắn hàm xử lý sự kiện blur cho nó:

elem.addEventListener('blur', func);

Bên trong hàm func này, đối tượng this sẽ có sẵn, chỉ đến input của chúng ta:

function func() {
	console.log(this); // chứa tham chiếu đến phần tử của chúng ta
}

Hãy xuất nội dung của thuộc tính value của input của chúng ta:

function func() {
	console.log(this.value); // xuất nội dung của thuộc tính
}

Bây giờ, hãy ghi một văn bản nào đó vào input:

function func() {
	this.value = '!!!';
}

Cũng có thể sử dụng hàm ẩn danh:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

Cho một input. Khi input này nhận được focus, hãy ghi số 1 vào nó, và khi mất focus - ghi số 2. Để truy cập input bên trong hàm xử lý, hãy sử dụng đối tượng this.

Cho một nút bấm, giá trị của nó là số 1. Hãy làm sao cho khi nhấp vào nút này, giá trị của nó mỗi lần lại tăng lên một đơn vị.