אירועים ו-style ב-MooTools

הצמדת אירועים ושינויי CSS עם MooTools

במאמר הקודם למדנו על שמירת ערכים באלמנטים ועוגיות ב-MooTools. במאמר הזה אנו נלמד סוף סוף על אירועים ו-style.

אירועים

הוספת אירוע

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

למשל, הבה וניצור כפתור נחמד עם id של myButton1:

וכך הקוד יראה – פשוט ביותר.


function alertMe() {
	alert('Hi');
}
	
window.addEvent('domready', function() {
    $('myButton1').addEvent('click', alertMe);
});

רשימת האירועים שניתן להצמיד לאלמנטים שונים היא:

onblur / blur

onchange / change

onfocus / focus

onreset / reset

onselect / select

onsubmit / submit

onkeydown / keydown

onkeypress / keypress

onkeyup /keyup

onclick / click

ondblclick / dblclick

onmousedown / mousedown

onmouseup / mouseup

onmousemove / mousemove

onmouseout / mouseout

onmouseover / mouseover

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

הורדת אירוע

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

הנה הכפתור – לחצו עליו ואז תנסו ללחוץ על הכפתור הקודם – דבר לא השתנה.

הקוד הוא מאד פשוט והוא נראה כך – כולל הצמדת האירוע ל myButton1:


function alertMe() {
	alert('Hi');
}

function removeAlertMe() {
	$('myButton1').removeEvent('click', alertMe);
}

window.addEvent('domready', function() {
    $('myButton1').addEvent('click', alertMe);
    $('myButton2').addEvent('click', removeAlertMe);
});

הוספת אירועים

ניתן גם להוסיף כמה אירועים ביחד באמצעות addEvents. כל מה שהמתודה הזו עושה היא לקבל אובייקטים שמורכבים מאירוע + פונקציה. כך למשל, אני אוסיף שני אירועים לכפתור החביב – אירוע שהופך את הטקסט שבו לאדום ברגע שיש mouseover ולכחול ברגע שיש mouseout.

והנה הדוגמא, שוב – מאד פשוט:


    $('myButton3').addEvents({
    'mouseout': function(){
        $('myButton3').setStyle('color', 'blue');
    },
    'mouseover': function(){
        $('myButton3').setStyle('color', 'red');
    }
    });

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

הורדת אירועים

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

המתודה היא פשוטה מאד.


$('myButton3').removeEvents();

ירייה של אירוע

לפעמים אנו רוצים להפעיל אירוע של אלמנט כלשהו. בדיוק בשביל זה יש לנו את fireEvent. בדוגמא שלפנינו יש שני כפתורים. לראשון ששמו בישראל myButton5 מוצמד אירוע פשוט בשם alertMe שיורה alert בכל פעם שיש לחיצה עליו. לכפתור השני מוצמד אירוע שמפעיל את האירוע של הכפתור הראשון (בהשהיה של 1000 מילישניות). שימו לב:


איך זה קורה? מאד פשוט:


function alertMe() {
    alert('Hi');
}

function fireMyButton5() {
    $('myButton5').fireEvent('click', null, 1000);
}

window.addEvent('domready', function() {

    $('myButton5').addEvent('click', alertMe);
    $('myButton6').addEvent('click', fireMyButton5);
    
});

פונקצית fireEvent מקבלת פרמטר אחד שהוא סוג האירוע (לצורך העניין בדוגמא שלנו click). ועוד שני פרמטרים שהם בגדר רשות. הראשון (בדוגמא שלנו null) הוא אלמנט או מחרוזת שאפשר להעביר באירוע והשני הוא השהיה של מילישניות (במקרה שלנו 1000 = שניה אחת).

חשוב לשים לב ש-fireEvent לא יורה אירועים שלא הוגדרו ב-MooTools! כלומר, אם יש איזה onclick ב-DOM עצמו (כלומר, כתוב ממש ב-HTML) הוא לא יפעיל אותו.

שיבוט אירוע

לבסוף, אם אנו רוצים לשבט אירוע מסוים ולהצמיד אותו לאלמנט אחר, אפשר לעשות את זה עם cloneEvents החביב שלוקח את כל האירועים מאלמנט אחד ומשכפל אותם לאלמנט אחר.
לכפתור החביב הזה הצמדתי את האירועים של myButton5 (במקרה שלנו אירוע click שמקפיץ alert).

וכך עשיתי את זה


$('myButton7').cloneEvents($('myButton5') , 'click');

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

style

מתודות ה-style מסייעות לנו לבצע שינויים בסגנון ה-CSS של אלמנט מסוים או לקבל את התכונות של אלמנט מסוים (ללא אפקטים). יש בדיוק 4 מתודות שעוסקות ב-style. שתיים מתוכן מסוג SET ושתיים מתוכן מסוג GET.

setStyle

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

הנה דוגמא פשוטה:

וכך עשיתי את זה:


$('myButton8').setStyle('color', 'blue');

setStyles

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

וכך זה נראה בקוד:


$('myButton9').setStyles({'color' : 'blue', 'border' : '2px solid red'});

getStyle

מתודת getStyle פשוט מחזירה לנו תכונת CSS של אלמנט מסוים. למשל, לחיצה על הכפתור הבא תקפיץ לי ב-alert את התכונה של הצבע של הכפתור הקודם (זה ששינינו באמצעות setStyle).

איך עשיתי את זה? מאד פשוט:


alert($('myButton8').getStyle('color'));

getStyles

מתודת getStyles גם היא מחזירה ערכים של CSS אך הפעם מדובר באובייקט הכולל כמה ערכים. getStyles מקבלת מערך של ערכים, למשל:


alert($('myButton9').getStyle('color', 'border'));

והיא מחזירה אובייקט של ערכי CSS.

במאמר הבא אנו נדון על אפקטים ב-MooTools.

פוסטים נוספים שכדאי לקרוא

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

ESP32 מאפס לילדים

מדריך ל-ESP32 לילדים ולהורים מאפס

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

פיתוח ב-JavaScript

Axios interceptors

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

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

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