אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery למתקדמים » אופטימיזצית אירועים ב-jQuery

אופטימיזצית אירועים ב-jQuery

רן בר-זיק אפריל 15, 2012 8:05 am אין תגובות

סקירה של מגוון הדרכים להצמדות אירועים ב-jQuery והסבר על הדרך היעילה ביותר כולל דוגמאות.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הקודם הסברתי על איך לעשות אופטימיזציה לסלקטורים עם jQuery. הפעם, אנחנו נדבר על הצמדת אירועים ואיך לבחור את הצמדת האירועים באופן האופטימלי ביותר.

באופן עקרוני, נכון לגרסה 1.7, יש לנו מספר דרכים שונות להצמיד אירועים, בואו ונסקור אותן בקצרה תוך כדי התמקדות בהבדלים ביניהן.

bind

לדוגמה:


$('#nav a').bind('click', function(e) {
  e.preventDefault();
});

בעבר זו היתה הדרך היחידה להצמיד אירועים באמצעות jQuery, פשוט בוחרים את האלמנט המתאים ומצמידים לו את האירוע. זו דרך פשוטה מאד. החסרון המרכזי שלה – אם יש אלמנטים רבים, מנוע ה-JavaScript צריך להצמיד אירוע לכל אלמנט בנפרד. ההשפעה על הביצועים, כפי שאתם יכולים לדמיין, היא כמו השפעת תמונה של רוזאן בר בעירום על שחקן פורנו (לא השפעה טובה).

הצמדת אירוע באמצעות קיצור ל-bind

לדוגמה:


$('#nav a').click(function(e) {
  e.preventDefault();
});

זה פשוט קיצור דרך ל-bind, אם אין לכם כוח או יכולת (???) לכתוב את ה-bind, ניתן להשתמש בקיצור הזה. הדוגמה היא של אירוע הקלקה, אבל יכולים להיות אירועים נוספים. זה די דומה ל-bind, אך בדומה לרוב הקיצורים, הוא איטי אף יותר מה-bind.

delegate

לדוגמה:


$('#nav').delegate('a', 'click', function(e) {
  e.preventDefault();
});

השיטה הזו נכנסה לגרסה 1.4.3 ונכון לגרסה 1.7 ממליצים שלא להשתמש בה אלא להשתמש ב-on. אבל חשוב מאד לעבור עליה כי שווה להכיר את הקונספט מאחוריה לשימוש ב-on. באופן עקרוני, על מנת להשתמש ב-delegate, אנו צריכים את אלמנט אב כלשהו ואת האלמנט שאליו אנו צריכים להצמיד את האירוע. מה שה-delegate עושה זה להצמיד את האירוע לאלמנט האב וכאשר האירוע מופעל, אז לשאול את האירוע מי הפעיל אותו ואם זה האלמנט הנכון – להפעיל את מה שאנחנו רוצים.
מסובך? בואו ונסביר שוב – נניח ויש לי div חביב שבו יש מיליון input שלכל אחד מהם יש id שונה. במקום להצמיד אירוע לכל input, אני יכול להצמיד אירוע ל-div החביב, לחיצה על אחד ה-input תפעיל את האירוע של ה-div (כי ב'תכלס לחצתי בתוך ה-div), בתוך האירוע אני שואל – מי ה-input שעליו לחצתי ולפעול בהתאם לזהות ה-input.

מה היתרון? הצמדת אירוע אחד לאלמנט אב במקום מלנת'לפים אירועים לאלוהים יודע כמה אלמנטים… השיפור בביצועים הוא כמובן דרמטי.

live

לדוגמה:


$('#nav a').live('click', function(e) {
  e.preventDefault();
});

זו פונקציה שנכנסה החל מגרסה 1.3, היא זהה למדי ל-bind, אבל יש בה טוויסט – היא מצמידה אירועים לאלמנטים גם בעתיד ולא רק בהווה. מה זאת אומרת? נניח ואני עשיתי bind לאירוע קליק לקישור ואחרי שעשיתי bind יצרתי אלמנט מסוג קישור, ה-bind לא יתפוס, כי הוא מתיחס רק לאלמנטים בהווה. אם אני משתמש ב-live הוא יתפוס.
איך jQuery עושה את זה? היא פשוט עושה delegate ל-body (או לאלוהים יודע איזה אלמנט אב) ותופסת את האלמנטים שפירטנו ב-live. איך זה מבחינת יעילות? יעיל בהרבה מ-bind, ולו רק בגלל שלא צריך לבצע הצמדת אירועים למלא אלמנטים, אבל פחות יעיל מ-delegate, כי delegate משתמש בהכרח באלמנט אב נמוך יותר מאלמנט האב הכללי של live.

אפשר לנסות וליעל את live באמצעות שטיקים שונים כמו שימוש ב-each:


$('#nav').each(function() {
  $('a', this).live('click', function(e) {
    e.preventDefault();
  });
});

כך אנחנו מכריחים את jQuery להשתמש באלמנט אב ספציפי יותר ויעיל יותר, אבל עדיין זה יעיל פחות מ-delegate.

שימוש ב-on

החל מגרסה 1.7 יש לנו את on שהיא נכון לעכשיו השיטה היעילה ביותר להצמדת אירועים:


$('#nav').on('click', 'a', function(e) {
  e.preventDefault();
});

זו שיטה שבעצם משלבת את כל היתרונות של live ו-delegate ונכון לעכשיו היא היעילה והמהירה ביותר מבין כל השיטות. כמובן שעלינו לבחור אלמנט אב ספציפי ולא body או משהו דומה כיוון שאז, כפי שראינו בהבדל בין היעילות של delegate ל-live, אנחנו לא מרוויחים דבר.

אז למה בעצם לא לכתוב 'תשתמשו תמיד ב-on' במקום להכריח אתכם לקרוא 500 מילים על השיטות השונות? ראשית, לא כולם משתמשים בגרסה 1.7. שנית, חשוב להבין מה זה event delegation ולמה בדיוק on עובד יותר מהר – בכך שאנחנו בעצם לא מצמידים אירוע לכל אלמנט ומצמידים אירוע רק לאלמנט האב. מההבנה הזו אנו גם יכולים להסיק כיצד ליצור on יותר מהיר.

כיוון שאסור לכם להאמין לי סתם כך, אני מצרף קישור למבחן הרלוונטי ב-jsperf שהוא כלי נהדר לבחינת ביצועים של JavaScript. אני מודה בהכנעה שבדקתי בעיקר בכרום – הנה התוצאות בגרף:

השוואת יעילות בין הצמדות אירועים ב-jQuery
השוואת יעילות בין הצמדות אירועים ב-jQuery
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ג'אווה סקריפט ו-jQuery באתרי אינטרנט

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

    הפרויקטים שאני כותב ושוחררו לציבור ברישיון קוד פתוח נמצאים ברובם בגיטהאב.
חיפוש

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד