ناساندنی ڕووداوەکان (Events)

ڕووداوەکان ئەو کردارانەن کە لە پەڕەی وێبدا ڕوودەدەن، وەک کلیککردن، جوڵاندنی ماوس، یان نووسین لە کیبۆرد. جاڤاسکریپت ڕێگامان پێدەدات کە گوێ لەم ڕووداوانە بگرین و لە کاتی ڕوودانیاندا کاردانەوەمان هەبێت.

ڕووداوەکانی کیبۆرد

کاتێک بەکارهێنەر دوگمەیەک لە کیبۆرد دادەگرێت، سێ ڕووداوی سەرەکی ڕوودەدەن: keydown، keypress، و keyup. زۆرترین کات ئێمە keydown بەکاردەهێنین چونکە دەستبەجێ کاتێک دوگمەکە دادەگیرێت کاردەکات.

const inputField = document.querySelector('#myInput');

inputField.addEventListener('keydown', (event) => {
  console.log('تۆ دوگمەی: ' + event.key + ' -ت داگرت');
});

لە نموونەی سەرەوەدا، ئێمە سوود لە تایبەتمەندی event.key وەردەگرین بۆ ئەوەی بزانین کام دوگمە داگیراوە. هەڵەی باو کە فێرخوازان دەیکەن ئەوەیە کە بیر دەکەنەوە event وەک ئەرگومێنت بنووسن لە ناو فانکشنەکەدا.

ڕووداوەکانی ماوس

ماوس ڕووداوی زۆری هەیە، بەڵام گرنگترینیان ئەوانەن کە پەیوەندییان بە جوڵە و کلیکەوە هەیە. بۆ نموونە mouseover کاتێک ماوس دەچێتە سەر توخمێک و mouseout کاتێک لێی دەردەچێت.

const box = document.querySelector('.box');

box.addEventListener('mouseover', () => {
  box.style.backgroundColor = 'yellow';
});

box.addEventListener('mouseout', () => {
  box.style.backgroundColor = 'white';
});

ئەمە ڕێگایەکی زۆر باوە بۆ دروستکردنی کاریگەری (Hover Effect) لەسەر دوگمەکان یان کارتەکان. تێبینی ئەوە بکە کە چۆن ڕەنگەکە دەگۆڕێت کاتێک ماوس دەچێتە سەر توخمەکە.

جیاوازی نێوان ڕووداوەکان

زۆر گرنگە بزانیت کەی کام ڕووداوە بەکاربهێنیت. بۆ نموونە mousedown کاتێکە کە پەنجە لەسەر دوگمەی ماوس دادەنێیت، بەڵام click تەنها کاتێک تەواو دەبێت کە پەنجەکە هەڵدەگریتەوە.

بەکارهێنانی ڕووداوی کلیک

کلیککردن باوترین ڕووداوە. دەتوانیت بە addEventListener بیبەستیتەوە بە هەر توخمێکەوە.

const btn = document.querySelector('button');

btn.addEventListener('click', () => {
  alert('سوپاس بۆ کلیککردن!');
});

پراکتیزەکردن (تمرین)

ئێستا کاتی ئەوەیە خۆت تاقی بکەیتەوە:

• ١. توخمێکی <input> دروست بکە.
• ٢. ڕووداوێکی keyup بەکاربهێنە بۆ ئەوەی هەرچی لە ناو خانەکەدا دەنووسرێت، لە ناو <p>-ێکدا بە ڕاستەوخۆیی نیشان بدرێت.
• ٣. هەوڵبدە ڕەنگی دەقەکە بگۆڕیت کاتێک ماوس دەچێتە سەری.