אירועים ו-style ב-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.