گوێگرتن لە ڕووداوەکان (Events)

لە جافاسکریپتدا، ڕووداوەکان ئەو کردارانەن کە لەسەر پەڕەی وێب ڕوودەدەن، وەک کلیککردنی ماوس، نووسین لە ناو خانەیەک، یان بارکردنی لاپەڕەکە. بۆ ئەوەی بەرنامەکەمان بتوانێت وەڵامی ئەم کردانە بداتەوە، پێویستە 'گوێگر' (Event Listener) دابنێین.

بەکارهێنانی addEventListener

باشترین و ستانداردترین ڕێگا بۆ گوێگرتن لە ڕووداوەکان بەکارهێنانی فەرمانی addEventListener-ە. ئەم فەرمانە دوو بەهای سەرەکی وەردەگرێت: یەکەم ناوی ڕووداوەکە (وەک 'click') و دووەم ئەو کردارەی کە دەبێت ئەنجام بدرێت (کە بەزۆری فەنکشنێکە).

نموونەی یەکەم: کلیککردن لەسەر دوگمە

لەم نموونەیەدا، کاتێک بەکارهێنەر کلیک لەسەر دوگمەکە دەکات، پەیامێک پیشان دەدەین:

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

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

شیکردنەوە: لەم کۆدەدا، سەرەتا دوگمەکەمان دۆزیوەتەوە، پاشان گوێگرێکمان بۆ داناوە. ئەگەر بەکارهێنەر دوگمەکە کلیک بکات، فەنکشنەکە کار دەکات. هەڵەی باو لێرەدا ئەوەیە کە ناوی ڕووداوەکە بە هەڵە بنووسرێت، بۆ نموونە 'Click' بە پیتی گەورە، کە پێویستە هەمیشە بە پیتی بچووک بێت.

جۆرەکانی تری ڕووداوەکان

تەنها کلیککردن نییە کە دەتوانین گوێی لێ بگرین. چەندین ڕووداوی تر هەن کە زۆر بەکاردێن:

• mouseover: کاتێک ماوس دەچێتە سەر توخمێک.
• keydown: کاتێک کلیلێک لە کیبۆرد دادەگیرێت.
• input: کاتێک دەقێک لە ناو خانەیەکدا دەنووسرێت.

نموونەی دووەم: ڕووداوی mouseover

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

box.addEventListener('mouseover', function() {
  box.style.backgroundColor = 'red';
});

لێرەدا کاتێک ماوس دەچێتە سەر توخمەکە، ڕەنگەکەی دەبێتە سوور. تێبینی بکە کە چۆن بە ئاسانی دەتوانین شێوازی CSS-یش بگۆڕین لە ڕێگەی ڕووداوەکانەوە.

تێبینی و ئاگادارییەکان

بەکارهێنانی Arrow Functions

لە جافاسکریپتی مۆدێرندا، دەتوانیت فەنکشنەکان کورتتر بکەیتەوە بە بەکارهێنانی Arrow Functions:

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

btn.addEventListener('click', () => {
  console.log('دوگمەکە بە سەرکەوتوویی کلیک کرا');
});

ئەم شێوازە پاکتر و خوێندنەوەی ئاسانترە، بەتایبەت کاتێک فەنکشنەکەت کورتە.

ڕاهێنانی پراکتیکی

هەوڵ بدە ئەمە ئەنجام بدەیت: دوگمەیەک لە HTML دروست بکە، پاشان لە جافاسکریپتدا گوێگرێک دابنێ کە کاتێک کلیک کرا، ڕەنگی پاشبنەمای لاپەڕەکە (document.body.style.backgroundColor) بگۆڕێت بۆ ڕەنگێکی تر.