בJavascript כשמתעסקים עם Events קיים גם המושג Event Handler,
הHandler נועד לבצע את הפעולה ברגע שהאירוע נורה.

עכשיו בPure Javascript יש מספר דרכים לכתוב את מה שכתבת:

element.onmouseover = function () { };

var func = function () { };
element.onmouseover = func;

element.addEventListener("mouseover", function () { });

עכשיו עקרונית כול הפעולות האלה מבצעות את אותו תהליך, אבל ואבל חשוב, לחלק מהן יש ייתרון משמעותי על השניה:

למשל בקטע קוד הראשון אחנו נשתמש בעיקר כשאנחנו רוצים להעביר פונקציה פשוטה אל תוך האירוע או להעביר פונקציה שבתוכה אנחנו מבצעים apply/call לפונקציות אחרות ויש לנו גם שליטה על הscope של אותן פונקציות.

הקטע קוד השני הוא בדרך כלל כשאנחנו מעוניינים לשמור על הscope אז אנחנו יוצרים את הפונקציה מחוצה לו כותבים את הקוד כרגיל(אם בתוך אובייקט אז משתמשים בthis רגיל מתי שצריכים), ואז פשוט מעבירים reference לאותה פונקציה ואין לנו שום דאגה אם הthis שלנו קיים או לא....

הקטע קוד השלישי הוא בערך כמו הראשון, אני חושב שהוא אפילו טיפה יותר יעיל, כי הראשון סביר להניח עוטף אותו וכאן אנחנו שלב אחד לפני קריאה לNative.

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

גם זאת המטרה בEvents להעביר תמיד callback רוב הEventים חוץ מטעינה של העמוד הם אסינכרונים(למרות שאני חושב שיש גם onunload) אבל זה לא משנה פעולה אסינכרונית צריכה לקבל callback תמיד, ותאמין לי גם שזה תיכנות הרבה יותר נכון.