אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • קבלו עדכונים במייל
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג’אווהסקריפט
ראשי » מדריכים » MooTools » אירועים ו-style ב-MooTools

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

רן בר-זיק יולי 21, 2010 7:59 am אין תגובות

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

אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום

במאמר הקודם למדנו על שמירת ערכים באלמנטים ועוגיות ב-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.

אזהרה: אחוז השימוש ב-MooTools ירדו דרמטית ועדיף שלא להשתמש בו. אם אתם מחפשים ספרית JavaScript - שווה לכם לבדוק את jQuery במקום
כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט. הפרויקט הוא הפרויקט הספרותי המוביל בהדסטארט. בשיתוף הקריה האקדמית אונו.
»שמירת ערכים באלמנטים ועוגיות ב-MooTools
»אפקטים ב-MooTools
MooTools

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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