Το συμβάν change στην JavaScript

Σε αυτό το μάθημα εσείς κι εγώ θα αναλύσουμε το συμβάν change, που προκύπτει στα πεδία εισαγωγής όταν αλλάζουν. Τι σημαίνει αυτό; Ας υποθέσουμε, για παράδειγμα, ότι έχετε ένα input και έχει κάποιο κείμενο. Εάν αλλάξετε αυτό το κείμενο, τότε σε αυτή την περίπτωση θα προκύψει αυτό το συμβάν.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε ένα input:

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

Ας εκτυπώσουμε στην κονσόλα την νέα του τιμή όταν αλλάξει:

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

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

Δίνεται ένα input και μια παράγραφος. Όταν αλλάξει το input, εκτυπώστε το κείμενό του στην παράγραφο.

Δίνεται ένα checkbox. Όταν αλλάξει το checkbox, εκτυπώστε στην οθόνη την νέα του κατάσταση.

Εξηγήστε, ποια είναι η διαφορά μεταξύ των συμβάντων blur και change.

Δίνεται ένα input. Όταν αλλάξει, ελέγξτε εάν ο αριθμός των χαρακτήρων σε αυτό είναι μικρότερος από 5 ή όχι. Εάν είναι μικρότερος - βάψτε το περίγραμμα του input σε πράσινο χρώμα, και εάν είναι μεγαλύτερος - σε κόκκινο.