בשיעור זה נבחן את כל הדרכים לעבודה עם אירועים ב-JavaScript.

אירועים באמצעות תכונות

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

הרשו לי להזכיר לכם שוב את השיטה הזו באמצעות דוגמה: כעת, כאשר תלחצו על הכפתור, תפעל פונקציית func אשר מציגה התראה על המסך:

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

אז בואו נראה מה עוד JavaScript יכול להציע לנו בעבודה עם אירועים.

אירועים באמצעות עבודה עם תכונות

בעיקרו של דבר, תכונת onclick היא אותה תכונה כמו, למשל, value . ואם נוכל לשנות את תכונת הערך כך - elem.value, אז נוכל לשנות את תכונת onclick באותו אופן.

אם נעשה את זה: elem.onclick = func, אז נקשר את הפונקציה func לאלמנט elem. תסתכל על הדוגמה ולהלן נדון בכל הניואנסים של שיטה זו:

var elem = document.getElementById("test"); elem.onclick = func; function func() ( alert("!"); )

עכשיו אני צריך לספר לכם את הסוד האפל של JavaScript: אם פונקציה כתובה ללא סוגריים, למשל. func, ואז היא מחזירה את שלה מָקוֹר, ואם עם סוגריים, למשל func(), ואז מחזיר את התוצאה של הפונקציה.

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

//הפונקציה מחזירה את המחרוזת "!" function func() ( החזר "!"; ) alert(func()); //תראה את השורה "!" alert(func); //עכשיו תראה את קוד המקור של הפונקציה func!

עכשיו, בידיעת הסוד הנורא הזה, בואו נחזור לקו elem.onclick = func- V במקרה הזהאני כותב את קוד המקור של הפונקציה בתכונה onclick, לא התוצאה שלה - והכל עובד. אם אתה עושה את זה - elem.onclick = func()- ואז רשום את התוצאה של הפונקציה ושום דבר לא יעבוד.

אגב, התוצאה של func() תהיה לא מוגדרכי אין לו פקודת החזרה. הרשו לי להזכיר לכם את הקוד של הפונקציה המדוברת:

function func() ( alert("!"); )

בואו נזכור את שיטת setInterval (ראה את השיעור על עבודה עם טיימרים ב-JavaScript) כשהשתמשנו בה כך window.setInterval(טיימר, 1000)- במקרה זה, כתבנו גם את פונקציית הטיימר ללא סוגריים, כי לא התעניינו בתוצאת הפונקציה, אלא בקוד שלה.

נדבר ביתר פירוט על כל הניואנסים הללו, לעת עתה זכור את הדברים שאמרתי, אפילו בלי הבנה מלאה. זה יגיע בזמן.

יתרונות וחסרונות של שיטה זו

כעת נדון ביתרונות ובחסרונות של שיטה זו.

יתרונות

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

בוא נעשה את זה. הבה נקבל את כל הקלטים באמצעות getElementsByTagName ונקשר את האירוע הבא לכל אחד בלולאה: ניתן לכל קלט להפיק טקסט התראה "!"

/* קוד זה יפעל כאשר הדף נטען. אני מזכיר לך שאתה צריך לכתוב את זה אחרי קוד ה-HTML. */ var elems = document.getElementsByTagName("input"); עבור (var i = 0; i< elems.length; i++) { elems[i].onclick = func; } function func() { alert("!"); }

כעת לחיצה על כל קלט תגרום להפעלת הפונקציה func, שתציג "!" כהתראה.

משתמש בזה

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

כדי לעשות זאת, אתה צריך להשתמש בזה, רק לא באותו אופן כמו שעשינו קודם. בעבר, כשכתבנו אירוע ישירות לתוך תכונה, עשינו את זה: onclick="func(this)", אבל עכשיו זה ככה - elems[i].onclick = func(this)- אנחנו לא יכולים לעשות את זה.

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

שנית, זה מצביע על אלמנטים שונים בהתאם הֶקשֵׁר(תלוי במקום שבו זה כתוב). ובמקרה שלנו, זה לא יקשר לאלמנט שאנחנו צריכים (כלומר, זה שהקלצנו עליו). נדבר על הקשר הביצוע קצת מאוחר יותר, לעת עתה רק דעו שהוא קיים.

אתה יכול לשאול למה כאן - onclick="func()"- הפונקציה מכילה סוגריים, אם כי מבחינה לוגית היא דורשת גם את קוד המקור, לא את התוצאה. תוכלו ללמוד על כך בשיעור על פונקציות אנונימיות מעט מאוחר יותר.

אז מהי הדרך הנכונה להשתמש בזה בבנייה שלנו? elems[i].onclick = func? למעשה, כאן זה זמין בתוך הפונקציה func וזה מתייחס לאלמנט שבו התרחש האירוע שגרם לפונקציה הזו. כלומר, אם אני לוחץ על הקלט הראשון, זה יכיל קישור אליו, ואם אני לוחץ על השני אז אליו.

במקרה זה, חשבו על זה כעל משתנה elem המתקבל באמצעות getElementById . לְמָשָׁל, elem.valueמאפשר לך לגשת לתכונת הערך, כלומר ערך זהיעשה את אותו הדבר.

אז, סוף סוף נפתור את הבעיה שלנו - בואו נגרום להתראה להציג את התוכן של תכונת הערך של הקלט שעליו לחצו:

< elems.length; i++) { elems[i].onclick = func; } function func() { alert(this.value); //изменение только здесь }

שימו לב שאם תנסו להשתמש בזה בתוך פונקציה שנכתבה ישירות בתכונה (כלומר, הדרך הראשונה להגדיר אירוע), שום דבר לא יעבוד. ראה דוגמה לקוד שגוי:

function func() ( alert(this.value); //לא יציג את הצפוי)

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

הרשו לי להזכיר לכם שהאפשרות הנכונה היא:

function func(elem) ( alert(elem.value); //יציג את התוכן של תכונת הערך)

פגמים

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

בדוגמה הבאה, אנו מנסים לאגד שתי פונקציות func1 ו-func2 לאירוע onclick. עם זאת, כאשר אתה לוחץ על אלמנט, רק הפונקציה השנייה תעבוד, מכיוון שהיא תחליף את הראשונה:

var elem = document.getElementById("test"); elem.onclick = func1; //כאן קשרנו לראשונה func1 elem.onclick = func2; //ועכשיו func2 ו-func1 כבר לא קשורים הפונקציה func1() ( alert("1"); ) function func2() ( alert("2"); )

באופן עקרוני, ניתן לעקוף בעיה זו בקלות על ידי הצגת פונקציה שלישית, func3. בואו נקשר רק func3 לתכונה onclick, וניתן לו לקרוא func1 ו-func2 באופן פנימי:

var elem = document.getElementById("test"); elem.onclick = func3; //רק הפונקציה func3 קשורה כאן //func3 קוראת לfunc1 ול-func2: function func3() ( func1(); func2(); ) function func1() ( alert("1"); ) function func2() ( alert( "2");

כפי שאתה יכול לראות, חסרון זה אינו משמעותי מדי וקל לעקוף אותו. זה רק מציג פונקציה נוספת, וזה קצת לא נוח.

עם זאת, יש חיסרון נוסף - אנחנו לא יכולים בקלות לבטל את הקשר, למשל, רק את הפונקציה func1 מ-onclick, ולהשאיר את func2 כבול. אתה יכול, כמובן, לגבש מבני קוד גדולים, אבל זה לא הכרחי אם אתה משתמש בדרך מתקדמת עוד יותר לאגד אירוע - דרך addEventListener. בוא נראה איך לעבוד עם הפונקציה הזו:

עבודה עם addEventListener

שיטת addEventListener לוקחת את שם האירוע כפרמטר הראשון שלו, ואת הפונקציה שצריך להיות קשורה לאירוע זה כפרמטר השני שלה. במקרה זה, שם האירוע נכתב ללא "על": "קליק" במקום "על העכבר", "עבר עכבר" במקום "על העכבר" וכן הלאה. שם הפונקציה (פרמטר שני) נכתב ללא מרכאות וללא סוגריים (למה זה נחוץ, כבר דנו למעלה).

בואו נוודא שכאשר לוחצים על הכפתור, הפונקציה func נקראת:

var elem = document.getElementById("test"); elem.addEventListener("קליק", func); function func() ( alert("!"); )

הבה נקשר כעת שני אירועים בו זמנית. במקרה זה לא יהיו לנו בעיות כמו במקרה הקודם - אירועים לא יוחלפו אחד את השני, לא משנה כמה מהם יוכרזו:

var elem = document.getElementById("test"); elem.addEventListener("קליק", func1); elem.addEventListener("קליק", func2); function func1() ( alert("1"); ) function func2() ( alert("2"); )

אם תעתיק את הקוד הזה ותפעיל אותו בעצמך, גם הפונקציות func1 וגם func2 יפעלו.

עובד עם זה עבור addEventListener

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

בוא נסתכל על דוגמה: קשר אירוע onclick לכפתור, שיפעיל את הפונקציה func. פונקציה זו תציג את הערך של הכפתור שלנו:

var elem = document.getElementById("test"); elem.addEventListener("קליק", func); function func() ( alert(this.value); )

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

var elem1 = document.getElementById("test1"); elem1.addEventListener("קליק", func); var elem2 = document.getElementById("test2"); elem2.addEventListener("קליק", func); function func() ( alert(this.value); )

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

ובכן, כעת נקבל מערך של כפתורים באמצעות getElementsByTagName ונקצה לכל אחד מהם פונקציה func.

var elems = document.getElementsByTagName("input"); עבור (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", func); } function func() { alert(this.value); }

הסרת כריכה באמצעות removeEventListener

כעת נתמודד עם העובדה שנמחק פונקציות הקשורות לאירוע. מה נקבל: אם, למשל, הפונקציות func1 ו-func2 קשורות לאירוע onclick, אז נוכל לבטל את הקישור של הפונקציה func1 מבלי להשפיע על func2 ולהיפך.

בואו נקשר 3 פונקציות לאלמנט: func1, func2 ו-func3, שיציגו את המספרים 1, 2 ו-3 על המסך:

var elem = document.getElementById("test"); elem.addEventListener("קליק", func1); elem.addEventListener("קליק", func2); elem.addEventListener("קליק", func3); function func1() ( alert("1"); ) function func2() ( alert("2"); ) function func3() ( alert("3"); )

כעת, מיד לאחר הכריכה, נבטל את הקישור של הפונקציות func1 ו-func2. זה נעשה באמצעות שיטת removeEventListener, אשר לוקחת את אותם פרמטרים כמו addEventListener:

var elem = document.getElementById("test"); elem.addEventListener("קליק", func1); elem.addEventListener("קליק", func2); elem.addEventListener("קליק", func3); elem.removeEventListener("click", func1); elem.removeEventListener("קליק", func2); function func1() ( alert("1"); ) function func2() ( alert("2"); ) function func3() ( alert("3"); )

אם תפעיל את הדוגמה הזו, תראה ש-func3 יעבוד, אבל השניים הראשונים לא.

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

אני אראה לך כמה דרכים לעבוד עם הכלי הזה, אסביר את היתרונות והחסרונות שלהן, וגם אתאר איך jQuery עובד עם אירועים. כעת נעבור לניתוח החומר!

הקצאת מטפלי אירועים

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

על פי כללי הכתיבה, כל המטפלים כוללים "on+event name" בשמם, הנצפה ב-onclick(). בהתאם לאירוע שנבחר, העיבוד יתרחש עקב פעולות שונות. במקרה שלנו, בעת שימוש ב-onclick(), רק אותם אירועים שנגרמו על ידי לחיצת העכבר השמאלית יבוצעו.

דרכים שונות להקצות מטפל באירועים

כיום, ישנן מספר אפשרויות להכנסת מטפל לאירועים או אירועים מסוימים לקוד.

שימוש באירועים פשוטים

נתחיל עם אפשרות פשוטה, שהיא ליישם את onclick() בסימון של מסמך ה-html עצמו. זה נראה כמו זה:

כפי שאתה יכול לראות, כאשר אתה לוחץ על הכפתור עם לחצן העכבר השמאלי, תופיע ההודעה "לחץ-קליק!". ברצוני להסב את תשומת לבכם לפרט אחד קטן אך משמעותי. אתה יכול להשתמש רק במירכאות בודדות ('') בתוך התראה.

גם במקרה זה אתה יכול להשתמש מילת מפתחזֶה. הוא מתייחס לאלמנט הנוכחי ומספק את כל השיטות הזמינות לו.

לחץ עליי

שורת קוד זו יוצרת כפתור עם הטקסט "לחץ עליי". לאחר הלחיצה, תראה הודעה על המסך: "לחץ!" זה יחליף את השם הפרטי של הכפתור.

שיטה זו היא ללא ספק פשוטה מאוד. עם זאת, הוא מתאים רק למשימות דומות, כלומר. להציג הודעות או לבצע פקודות פשוטות.

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

במקרה זה, עליך לפנות לפונקציות.

עבודה עם פונקציות

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

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

לפיכך, באמצעות המטפל המשויך לפונקציה הנ"ל, בוצעו חישובים והוצגו על המסך.

var result =1; הפונקציה countPow(n) ( for(var i=1; i