آموزش مفهوم Event در جاوا اسکریپت

Event در جاوا اسکریپت که به معنای رویداد از آن یاد می‌شود نوعی تعامل خاص در صفحه وب یا برنامه است که اجرای قطعه کدی را آغاز می‌کند و معمولاً به عنوان کنترل‌کننده رویداد شناخته می‌شود. رویدادها می‌توانند از اقدامات کاربر مانند کلیک، فشار دادن کلید یا حرکت ماوس تا رویدادهای ایجاد شده توسط سیستم مانند تکمیل یک عملیات ناهم‌زمان متغیر باشند. توانایی پاسخگویی به رویدادها جنبه اساسی توسعه وب تعاملی را تشکیل می‌دهد و به توسعه‌دهندگان این امکان را خواهد داد تا رابط‌های کاربری پویا و واکنشگرایی ایجاد کنند. برنامه‌نویسی رویداد محور در جاوا اسکریپت شامل تعریف توابع (کنترل‌کننده رویداد) است که به رویدادهای خاص پاسخ می‌دهد و توسعه‌دهندگان را قادر می‌سازد تا جریان برنامه‌های خود را بر اساس تعاملات کاربر یا سایر رویدادهای ایجاد شده توسط سیستم کنترل کنند. در این مطلب از مجله سبز لرن قصد داریم که مبحث Event در جاوا اسکریپت را همراه با معرفی انواع رویداد، با مثال‌های عملی مورد بررسی قرار دهیم.

Event در جاوا اسکریپت چیست؟

جاوا اسکریپت از رویدادها برای ایجاد تعاملات پویا در صفحه وب استفاده می‌کند و این رویدادها را به عناصر درون مدل شی سند (DOM) پیوند می‌دهد. این رویدادها ذاتاً با مفهوم bubbling propagation مرتبط هستند که در آن رویداد در سلسله‌مراتب DOM از عناصر فرزند به والد خود به سمت بالا حرکت می‌کند. رویدادها را می‌توان مستقیماً در زبان نشانه‌گذاری HTML یا از طریق نوعی اسکریپت خارجی به عناصر متصل کرد.

کاربرد Event در جاوا اسکریپت چیست؟

Event در جاوا اسکریپت اقداماتی هستند که بر اساس دستورالعمل‌های کاربر رخ می‌دهند و خروجی‌های مربوطه را ارائه می‌دهند. این دستورالعمل‌ها می‌توانند شامل ورودی‌های مختلفی مانند کلیک ماوس، فشار دادن دکمه‌ها یا تغییرات در جعبه‌های متن باشند. به عنوان مثال، هنگامی‌که کاربر با فشار دادن یک دکمه با یک صفحه وب در تعامل است، جاوا اسکریپت درخواست را پردازش می‌کند و پاسخی را ارائه می‌دهد. در جاوا اسکریپت، ما از کنترل‌کننده‌های رویداد برای تشخیص اقدامات خاصی که توسط رویدادها ایجاد می‌شوند، استفاده می‌کنیم. کنترل‌کننده رویداد اساساً نوعی تابع جاوا اسکریپت سفارشی است که هنگام وقوع رویدادی خاص اجرا می‌شود.

انواع شنوندگان رویداد در جاوا اسکریپت

شنوندگان رویدادهای رایجی وجود دارند که نقش‌های محوری در مفهوم Event در جاوا اسکریپت دارند، از مهم‌ترین Addeventlistener در جاوا اسکریپت می‌توان فهرست موارد زیر را نام برد:

Onload

• این رویداد زمانی رخ می‌دهد که یک صفحه بارگذاری می‌شود و اجازه می‌دهد تا اقدامات خاصی در آن لحظه انجام شود.

Onclick

• زمانی این رویداد فعال می‌شود که کاربر روی دکمه یا سایر عناصر تعاملی کلیک کرده و اقدامات مرتبطی را اجرا می‌کند.

Onmouseover

• زمانی این ایونت در جاوا اسکریپت فعال می‌شود که کاربر موس را روی عنصر خاص مانند دکمه حرکت می‌دهد و پاسخ‌های خاصی را ایجاد می‌کند.

Onfocus

• زمانی این رویداد در جاوا اسکریپت اتفاق می‌افتد که کاربر مکان‌نما را در فیلد فرم قرار می‌دهد و فرصت‌هایی را برای پاسخ‌های متناسب در سناریوهای خاص فراهم می‌کند.

Onblur

• Onblur در جاوا اسکریپت زمانی اتفاق می‌افتد که کاربر مکان‌نما را از فیلد فرم خاص خارج کرده و امکان انجام اقدامات خاصی را در هنگام خروج فراهم می‌کند.

درک این شنوندگان Event در جاوا اسکریپت برای اجرای عملکردهای پویا و پاسخگو در توسعه وب بسیار مهم است. در ادامه هر کدام از شنوندگان رویداد را با مثال‌هایی کاملاً عملی مورد بررسی قرار خواهیم داد.

رویداد Onclick در جاوا اسکریپت

یکی از انواع متداول Event در جاوا اسکریپت، رویداد onclick است که نوعی رویداد ماوس محسوب می‌شود و وقتی کاربر روی عنصر مرتبط کلیک می‌کند فعال خواهد شد. به عنوان نمونه، مثال ساده شده زیر را در نظر بگیرید: در مثال بالا، کد درون تگ‌های script تابعی به نام hiThere را تعریف می‌کند که هشداری را با پیام (سلام. این یک رویداد در جاوا اسکریپت است)، نمایش می‌دهد. عنصر button در بدنه HTML دارای نوعی ویژگی onclick بوده که روی hiThere تنظیم‌شده است که رویداد کلیک را با تابع hiThere مرتبط می‌کند. هنگامی‌که روی دکمه کلیک صورت بگیرد، تابع اجرا شده و در نتیجه پیام هشدار نمایش داده می‌شود. این مثال نشان‌دهنده استفاده ساده از رویدادهای جاوا اسکریپت برای افزایش تعامل کاربر در یک صفحه وب است. خروجی قطعه کد بالا به صورت زیر خواهد بود:

رویداد onkeyup جاوا اسکریپت

رویداد onkeyup نوعی Event در جاوا اسکریپت از نوع صفحه‌کلید است که وقتی کلیدی پس از فشار دادن آزاد می‌شود، اقداماتی را آغاز می‌کند. در مثال ارائه‌شده زیر، هدف تغییر رنگ پس‌زمینه باکس متنی با فشار دادن کلید فلش بالا است. در اینجا توضیح ساده‌ای از کد ارائه‌شده است: در کد بالا از سه متغیر (قرمز، سبز و آبی) برای کنترل مقادیر RGB رنگ پس‌زمینه استفاده می‌شود.

var red = 0;
var green = 0;
var blue = 0;

سپس تابع changeBackground هر زمان که کلیدی در کادر ورودی آزاد شود فراخوانی می‌شود.

function changeBackground()

این تابع رنگ پس‌زمینه را به‌روزرسانی می‌کند، مقادیر RGB را افزایش می‌دهد تا جلوه‌ای پویا ایجاد کرده و اگر از حداکثر مقدار 255 تجاوز کند، آن‌ها را بازنشانی می‌کند. نتیجه تغییر رنگ پس‌زمینه با فشار دادن کلید فلش رو به بالا در صفحه‌کلید است.

backgroundElement.style.backgroundColor = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

خروجی کدهای بالا به صورت زیر است:

رویداد از نوع onmouseover در جاوا اسکریپت

رویداد onmouseover یکی دیگر از انواع Event در جاوا اسکریپت است و زمانی فعال می‌شود که نشانگر ماوس روی عنصر مشخص‌شده و عناصر فرزند آن قرار می‌گیرد. در مثال ارائه‌شده زیر، هدف این است که وقتی ماوس روی عنصر قرار می‌گیرد، جعبه رنگی ناپدید شود. در کد فوق، تابع hov زمانی اجرا می‌شود که ماوس روی عنصر div با شناسه hover قرار می‌گیرد.

function hov()

این تابع عنصر را با استفاده از document.getElementById('show') دریافت می‌کند و سپس ویژگی نمایش آن را به none تغییر می‌دهد.

var e = document.getElementById("hover");
e.style.display = "none";

این ویژگی دید عنصر را کنترل می‌کند و به‌طور مؤثری وقتی ماوس را روی آن قرار می‌دهیم، آن را ناپدید می‌کند. استفاده از رویداد onmouseover برای ایجاد رفتاری خاص است، مانند ناپدید شدن یک عنصر، زمانی که نشانگر ماوس روی آن قرار دارد. خروجی کد بالا برای این نوع ایونت در جاوا اسکریپت به صورت زیر است:

رویداد Onmouseout در جاوا اسکریپت

رویداد onmouseout نوعی دیگر از انواع Event در جاوا اسکریپت بوده و زمانی فعال می‌شود که نشانگر ماوس از عنصری مشخص‌شده خارج شود و اجرای تابعی مرتبط را تحریک کند. در مثال ارائه‌شده زیر، هدف این است که جعبه رنگی زمانی که نشانگر ماوس از آن خارجی می‌شود ناپدید شود. در مثال بالا، زمانی که نشانگر ماوس از عنصر div خارج شده، تابع out اجرا می‌شود.

function out() {
  var targetElement = document.getElementById('hover');

تابع با استفاده از document.getElementById('show') عنصر را واکشی می‌کند و سپس ویژگی نمایش آن را به none تغییر می‌دهد و باعث ناپدید شدن عنصر می‌شود.

targetElement.style.display = 'none';

در اصل این مثال نشان می‌دهد که چگونه می‌توان از رویداد onmouseout برای راه‌اندازی یک عمل خاص، مانند پنهان کردن یک عنصر، زمانی که مکان‌نمای ماوس آن را ترک می‌کند، استفاده کرد. خروجی مثال فوق به صورت زیر است:

رویداد onchange از انواع Event در جاوا اسکریپت

رویداد onchange جاوا اسکریپت برای شناسایی تغییرات عنصری که به این رویداد گوش می‌دهد طراحی شده است. در مثال ارائه‌شده زیر، هدف این است که هنگام تغییر محتوای یک فیلد ورودی، هشداری را ایجاد کند که مقدار فعلی را نشان دهد. در قطعه کد بالا، یک عنصر input از نوع number تعریف‌شده است. ویژگی onchange روی alert(this.value) تنظیم‌شده است، به این معنی که وقتی مقدار در فیلد ورودی تغییر می‌کند، مرورگر کد جاوا اسکریپت ارائه‌شده را اجرا می‌کند. this.value مقدار فعلی فیلد ورودی را نشان می‌دهد. در نتیجه، هنگامی‌که کاربر محتوای فیلد ورودی را تغییر می‌دهد، یک هشدار ظاهر می‌شود و مقدار به‌روز شده را نمایش می‌دهد. این نشان‌دهنده استفاده از رویداد onchange برای شناسایی و پاسخ به تغییرات در مقدار عنصری HTML است که خروجی آن به صورت زیر خواهد بود:

رویداد onload در جاوا اسکریپت

رویداد onload به عنوان نوعی Event در جاوا اسکریپت  زمانی فعال می‌شود که بارگیری نوعی عنصر، مانند تصویری خاص، به صورت کامل پایان برسد. در مثال ارائه‌شده زیر هدف نشان دادن پیام هشدار در زمانی است که تصویر به طور کامل بارگذاری شده باشد. در قطعه کد فوق، عنصر img برای نمایش یک تصویر با منبع مشخص‌شده در ویژگی src استفاده می‌شود. ویژگی onload روی هشدار Image completely loaded تنظیم‌شده است، به این معنی که پس از بارگیری تصویر، یک هشدار جاوا اسکریپت فعال می‌شود و پیام  Image completely loaded را نمایش می‌دهد.

مثال بالا در اصل نشان‌دهنده کاربرد رویداد onload برای اجرای نوعی تابع در زمانی است که عنصر به طور کامل در صفحه وب بارگذاری شده است. خروجی کد بالا به صورت زیر است:


رویداد onfocus در جاوا اسکریپت
رویداد onfocus جاوا اسکریپت زمانی فعال می‌شود که تمرکز روی عنصری خاص، مانند فیلد ورودی، قرار بگیرد. در مثال ارائه‌شده زیر هدف اجرای دستورالعمل‌های خاص در زمانی است که فیلد ورودی فوکوس دریافت می‌کند.



  
       
    
  
  
       
    
       
    

              Take the focus into the input box below:    
    
        
  


[sthe_section title="نکته: منظور از فوکوس یا تمرکز روی عنصری خاص زمانی است که کاربر روی آن عنصر کلیک می‌کند." color="red"/]

در کد ارائه‌شده بالا برای Event در جاوا اسکریپت، تابع focused زمانی اجرا می‌شود که فیلد ورودی با شناسه inp فوکوس پیدا کند.

function focused() {
  // Get the input element with the id 'inp'
  var inputElement = document.getElementById("inp"); // Display a confirmation dialog and take action if confirmed
  if (confirm("Got it?")) {
  // Remove focus from the input element
    inputElement.blur();
  }
}

تابع عنصر ورودی را با استفاده از document.getElementById('inp') واکشی می‌کند و گفتگوی تائید را نمایش می‌دهد. اگر کاربر با کلیک کردن روی OK تائید کند، این تابع از inputElement.blur برای حذف فوکوس از فیلد ورودی استفاده می‌کند.
    
این مثال نشان می‌دهد که چگونه می‌توان از رویداد onfocus برای راه‌اندازی کنش‌ها زمانی که عنصری روی صفحه وب تمرکز می‌کند، استفاده کرد.


رویداد onblur
رویداد onblur به عنوان نوعی Event در جاوا اسکریپت زمانی فعال می‌شود که تمرکز از عنصری، مانند یک فیلد ورودی، برداشته می‌شود. در مثال ارائه‌شده زیر، هدف اجرای دستورالعمل‌های خاص در زمانی است که تمرکز روی فیلد ورودی برداشته شود:



  
  
       
    
جاوا اسکریپت