Βασικές αρχές εργασίας με το αντικείμενο Event στην JavaScript

Σε αυτό το μάθημα θα μελετήσουμε τις βασικές αρχές εργασίας με το αντικείμενο Event. Αυτό το αντικείμενο περιέχει πληροφορίες σχετικά με το συμβάν που προέκυψε. Για παράδειγμα, εάν γίνει κλικ σε ένα στοιχείο, μπορούμε να μάθουμε τις συντεταγμένες αυτού του κλικ, εάν πατήθηκε το πλήκτρο Ctrl, Alt ή Shift τη στιγμή του κλικ και ούτω καθεξής.

Ας δούμε πώς να πάρουμε το αντικείμενο Event. Ας υποθέσουμε ότι έχουμε ένα κουμπί:

<button id="elem">text</button>

Ας υποθέσουμε ότι upon click σε αυτό το κουμπί εκτελείται μια συγκεκριμένη function:

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

elem.addEventListener('click', function() {

});

Μέσα στη συνδεδεμένη function υπάρχει ήδη το αντικείμενο Event - απλά δεν ξέρουμε ακόμα πώς να το πάρουμε. Λαμβάνεται ως εξής: χρειάζεται κατά τη δήλωση της function μας να περάσουμε σε αυτή ως παράμετρο οποιαδήποτε μεταβλητή (συνήθως, event - αλλά το όνομα μπορεί να είναι οποιοδήποτε) και σε αυτή τη μεταβλητή ο browser αυτόματα θα βάλει το αντικείμενο Event:

elem.addEventListener('click', function(event) {
	console.log(event); // θα δούμε το αντικείμενο με το συμβάν
});

Πραγματοποιήστε μόνοι σας τις περιγραφόμενες χειρισμούς και εμφανίστε το αντικείμενο με το συμβάν στην κονσόλα. Μελετήστε τη δομή αυτού του αντικειμένου.