Γεγονότα στη Javascript (Events)

Γεγονότα στη Javascript

Τα γεγονότα στη Javascript είναι “κάτι” το οποίο συμβαίνει σε στοιχεία της HTML. Όταν χρησιμοποιούμε Javascript στην ιστοσελίδα μας, αυτή μπορεί να δράσει στα γεγονότα (events) των στοιχείων της HTML.

Ένα γεγονός (event) της HTML μπορεί να συμβεί από ενέργειες του προγράμματος περιήγησης (browser) ή από ενέργειες του χρήστη της ιστοσελίδας.

Παραδείγματα

• η ολοκλήρωση της φόρτωσης μιας ιστοσελίδας
• το πάτημα ενός κουμπιού
• όταν μία φόρμα συμπληρωθεί
• και άλλα…

Για να χρησιμοποιήσουμε τα γεγονότα στη Javascript πρέπει να ορίσουμε να εκτελεσθεί κώδικας της Javascript όταν ανιχνευθεί ένα γεγονός (event) στην HTML. Η HTML μας επιτρέπει να ορίσουμε ιδιότητες χειριστών συμβάντων (event handlers), με κώδικα Javascript, στα στοιχεία της.

Οι χειριστές συμβάντων (event handlers) χρησιμοποιούνται για να χειριστούν και να επαληθεύσουν τις πληροφορίες που θα εισάγει ο χρήστης (user input), τις ενέργειες του χρήστη και τις ενέργειες του προγράμματος περιήγησης (browser).

Παραδείγματα

• Ενέργειες που πρέπει να εκτελεσθούν κάθε φορά που μία ιστοσελίδα φορτώνει
• Ενέργειες που πρέπει να εκτελεσθούν κάθε φορά που μία ιστοσελίδα κλείνει
• Ενέργειες που πρέπει να εκτελεσθούν κάθε φορά που ο χρήστης κάνει “κλικ” ένα κουμπί
• Περιεχόμενο που πρέπει να επαληθευτεί όταν ένας χρήστης εισάγει πληροφορίες
• Και άλλα…

Πολλές διαφορετικές μέθοδοι μπορούν να χρησιμοποιηθούν για να επιτραπεί στη Javascript να εργαστεί με τα γεγονότα (events) της HTML.

Παραδείγματα

• Τα γεγονότα (events) μπορούν να εκτελέσουν κώδικα Javascript κατευθείαν
• Τα γεγονότα (events) μπορούν να καλέσουν συναρτήσεις (functions) της Javascript
• Μπορούμε να ορίσουμε τους δικούς μας χειριστές συμβάντων για να καλέσουμε συναρτήσεις (functions) στα στοιχεία της HTML.
• Και άλλα…

Μερικά από τα πιο συνηθισμένα γεγονότα (events) είναι τα εξής:

• onclick
• onmouseover
• onkeypress
• onload
• onchange

Onclick

Το γεγονός (event) onclick είναι όταν ο χρήστης κάνει “κλικ” σ’ ένα κουμπί στην ιστοσελίδα μας.

Παράδειγμα

<p id="demo" onclick="myFunction()">Πάτησε το κουμπί για να αλλάξει το χρώμα του κειμένου.</p>

<script>
  function myFunction() {
    document.getElementById("demo").style.color = "red";
  }
</script>

Onmouseover

Το γεγονός (event) onmouseover είναι όταν ο δείκτης του ποντικιού περάσει πάνω από ένα στοιχείο της HTML στην ιστοσελίδα μας.

Παράδειγμα

<div onmouseover="myOverFunction()">
  <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

<script>
  function myOverFunction() {
    document.getElementById("demo3").innerHTML = y+=1;
  }
</script>

Onkeypress

Το γεγονός (event) onkeypress είναι όταν ο χρήστης πατήσει ένα κουμπί του πληκτρολογίου στην ιστοσελίδα μας.

Παράδειγμα

<input type="text" onkeypress="myFunction()">

<script>
  function myFunction() {
    alert("Πατήσατε ένα κουμπί από το πληκτρολόγιο σας, μέσα στο πλαίσιο εισαγωγής κειμένου");
}
</script>

Onload

Το γεγονός (event) onload είναι όταν η ιστοσελίδα ολοκληρώνει τη φόρτωση της.

Παράδειγμα

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

<script>
  function loadImage() {
    alert("Η φωτογραφία εμφανίστηκε");
}
</script>

Onchange

Το γεγονός (event) onchange είναι όταν χρήστης αλλάζει την επιλογή σ’ ένα στοιχείο select.

Παράδειγμα

<select id="mySelect" onchange="myFunction()">
  <option value="Audi">Audi
  <option value="BMW">BMW
  <option value="Mercedes">Mercedes
  <option value="Volvo">Volvo
</select>

<p id="demo"></p>

<script>
  function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "Επιλέξατε: " + x;
}
</script>