Έχω μια τεράστια εφαρμογή jQuery και χρησιμοποιώ τις παρακάτω δύο μεθόδους για συμβάντα κλικ.
Πρώτη μέθοδος
<div id="myDiv">Some Content</div>
$('#myDiv').click(function(){
//Some code
});
Δεύτερη μέθοδος
<div id="myDiv" onClick="divFunction()">Some Content</div>
function divFunction(){
//Some code
}
Χρησιμοποιώ είτε την πρώτη είτε τη δεύτερη μέθοδο στην εφαρμογή μου. Ποια από τις δύο είναι καλύτερη; Καλύτερη για την απόδοση; Και τυπικά;
Η χρήση του $('#myDiv').click(function(){
είναι καλύτερη καθώς ακολουθεί το τυπικό μοντέλο καταχώρησης συμβάντων. (Η jQuery εσωτερικά χρησιμοποιεί addEventListener
και attachEvent
).
Βασικά, η εγγραφή ενός συμβάντος με σύγχρονο τρόπο είναι ο διακριτικός τρόπος χειρισμού συμβάντων. Επίσης, για να καταχωρήσετε περισσότερους από έναν ακροατές συμβάντων για το στόχο μπορείτε να καλέσετε την addEventListener()
για τον ίδιο στόχο.
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
Γιατί να χρησιμοποιήσετε το addEventListener; (Από το MDN) >, addEventListener είναι ο τρόπος για να καταχωρήσετε έναν ακροατή συμβάντων όπως ορίζεται στο W3C DOM. Τα πλεονεκτήματά του είναι τα εξής: >,
- Επιτρέπει την προσθήκη περισσότερων του ενός χειριστή για ένα συμβάν. Αυτό είναι ιδιαίτερα χρήσιμο για βιβλιοθήκες DHTML ή επεκτάσεις Mozilla που πρέπει να λειτουργούν καλά ακόμη και αν χρησιμοποιούνται άλλες βιβλιοθήκες/επεκτάσεις.
- Σας δίνει πιο λεπτομερή έλεγχο της φάσης κατά την οποία ενεργοποιείται ο ακροατής (σύλληψη έναντι φυσαλίδων).
- Λειτουργεί σε οποιοδήποτε στοιχείο DOM, όχι μόνο σε στοιχεία HTML.
Περισσότερα για τη σύγχρονη εγγραφή συμβάντων -> http://www.quirksmode.org/js/events_advanced.html
Άλλες μέθοδοι, όπως ο καθορισμός των HTML attributes, παράδειγμα:
<button onclick="alert('Hello world!')">
Ή ιδιότητες στοιχείου DOM, παράδειγμα:
myEl.onclick = function(event){alert('Hello world');};
είναι παλιές και μπορούν να υπεργραφούν εύκολα.
Το HTML attribute θα πρέπει να αποφεύγεται καθώς κάνει τη σήμανση μεγαλύτερη και λιγότερο ευανάγνωστη. Οι ανησυχίες του περιεχομένου/δομής και της συμπεριφοράς δεν είναι καλά διαχωρισμένες, κάνοντας πιο δύσκολο να βρεθεί ένα σφάλμα.
Το πρόβλημα με τη μέθοδο DOM element properties είναι ότι μόνο ένας χειριστής συμβάντος μπορεί να δεσμευτεί σε ένα στοιχείο ανά συμβάν.
Περισσότερα για τον παραδοσιακό χειρισμό συμβάντων -> http://www.quirksmode.org/js/events_tradmod.html
Αναφορά MDN: https://developer.mozilla.org/en-US/docs/DOM/event
Η πρώτη μέθοδος είναι να προτιμάτε. Χρησιμοποιεί το advanced event registration model[s], το οποίο σημαίνει ότι μπορείτε να συνδέσετε πολλαπλούς χειριστές στο ίδιο στοιχείο. Μπορείτε εύκολα να αποκτήσετε πρόσβαση στο αντικείμενο συμβάντος και ο χειριστής μπορεί να ζει σε οποιαδήποτε λειτουργία's scope. Επίσης, είναι δυναμικός, δηλαδή μπορεί να κληθεί ανά πάσα στιγμή και είναι ιδιαίτερα κατάλληλος για δυναμικά παραγόμενα στοιχεία. Το αν χρησιμοποιείτε την jQuery, μια άλλη βιβλιοθήκη ή τις εγγενείς μεθόδους απευθείας δεν έχει πραγματικά σημασία.
Η δεύτερη μέθοδος, που χρησιμοποιεί inline attributes, χρειάζεται πολλές παγκόσμιες συναρτήσεις (πράγμα που οδηγεί σε ρύπανση του χώρου ονομάτων) και αναμειγνύει το περιεχόμενο/δομή (HTML) με τη συμπεριφορά (JavaScript). Μην το χρησιμοποιείτε αυτό.
Η ερώτησή σας σχετικά με τις επιδόσεις ή τα πρότυπα δεν μπορεί να απαντηθεί εύκολα. Οι δύο μέθοδοι είναι απλώς εντελώς διαφορετικές και κάνουν διαφορετικά πράγματα. Η πρώτη είναι ισχυρότερη, ενώ η δεύτερη περιφρονείται (θεωρείται κακό στυλ).