Sự kiện change trong JavaScript

Trong bài học này, chúng ta sẽ cùng phân tích sự kiện change, xảy ra trong các trường nhập liệu khi chúng thay đổi. Điều này có nghĩa là gì? Giả sử, ví dụ, bạn có một ô input và trong đó có một văn bản nào đó. Nếu bạn thay đổi văn bản đó, thì trong trường hợp này sự kiện này sẽ phát sinh.

Hãy xem một ví dụ. Giả sử chúng ta có một ô input:

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

Hãy thực hiện in giá trị mới của nó ra console khi nó thay đổi:

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

elem.addEventListener('change', function() {
	console.log(this.value);
});

Cho một ô input và một đoạn văn. Theo sự thay đổi của ô input, hãy xuất văn bản của nó vào đoạn văn.

Cho một hộp kiểm (checkbox). Theo sự thay đổi của hộp kiểm, hãy hiển thị trạng thái mới của nó lên màn hình.

Hãy giải thích, sự khác biệt giữa các sự kiện blur và change là gì.

Cho một ô input. Theo sự thay đổi của nó, hãy kiểm tra xem số lượng ký tự trong đó có nhỏ hơn 5 hay không. Nếu nhỏ hơn - hãy tô màu viền của ô input thành màu xanh lá cây, còn nếu lớn hơn - thành màu đỏ.