מהם אירועים ב- JavaScript ואופן הטיפול בהם?



אירועים ב- JavaScript מספקים ממשק דינמי לדף אינטרנט. אירועים אלה קשורים לאלמנטים במודל Document Object (DOM).

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

מהם אירועים ב- JavaScript?

ל- Javascript אירועים המספקים ממשק דינמי לדף אינטרנט. אירועים אלה קשורים לאלמנטים ב מודל אובייקט מסמך (פְּסַק דִין).





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

סוגי אירועים ב- JavaScript

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



  • בלחיצה
  • Onkeyup
  • Onmouseover
  • עומס
  • Onfocus

אז בואו נמשיך ונסתכל על האירועים הללו ב- JavaScript לדוגמא.

אירוע Onclick

אירוע Onclick הוא אירוע עכבר ומעורר כל היגיון שהוגדר אם המשתמש לוחץ על האלמנט אליו הוא קשור. בואו ניקח דוגמא ונראה איך זה עובד:

function edu () {alert ('ברוך הבא לאדוריקה!')} לחץ על כפתור

תְפוּקָה:



פלט 1 - אירועים ב- JavaScript - edureka

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

אירוע Onekeyup

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

var a = 0 var b = 0 var c = 0 function changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 if (a> 255) a = a - b if (b> 255) b = a if (c> 255) c = b}

תְפוּקָה:

מה זה אידיאה של ג'אווה

אחרי שאתה כותב משהו, זה נראה כך:

אירוע Onmouseover

אירוע onmouseover ב- JavaScript תואם את ריחוף מצביע העכבר מעל האלמנט וילדיו, אליו הוא מחויב. הדוגמה מוצגת להלן:

פונקציה hov () {var e = document.getElementById ('רחף') e.style.display = 'none'}

תְפוּקָה:

התיבה הצבעונית מופיעה לפני שמרחף את העכבר. ברגע שאתה מעביר את העכבר מעל התיבה, הוא נעלם.

אירוע Onload

אירוע ה- onload מתעורר כאשר אלמנט נטען לחלוטין. בואו ניקח דוגמא ונראה איך זה עובד:

  edu-Logo 

תְפוּקָה:

אירוע אונפוקוס

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

פונקציה ממוקדת () {var e = document.getElementById ('קלט') אם (אשר ('אירוע מיקוד')) {e.blur ()}}

התמקדות בתיבת הקלט:

תְפוּקָה:

אלה כמה מהאירועים הנפוצים ביותר ב- JavaScript. בכך הגענו לסוף מאמרנו. אני מקווה שהבנתם מה הם אירועים ואיך משתמשים בהם.

בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.

יש לך שאלה עבורנו? אנא הזכיר זאת במדור התגובות בבלוג זה ונחזור אליך.