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

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

برنامه‌نویسی رویداد محور

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

را همراه با معرفی انواع رویداد، با مثال‌های عملی مورد بررسی قرار دهیم.

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

چیست؟

کاربرد Event

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

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

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

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

شنوندگان رویدادهای رایجی وجود دارند که نقش‌های محوری در مفهوم

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

Onload

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

Onclick

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

Onmouseover

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

Onfocus

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

Onblur

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

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

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

یکی از انواع متداول

، رویداد onclick است که نوعی رویداد ماوس محسوب می‌شود و وقتی کاربر روی عنصر مرتبط کلیک می‌کند فعال خواهد شد. به عنوان نمونه، مثال ساده شده زیر را در نظر بگیرید:

  
               
    


  
               
    
                                         برای دیدن رویداد اینجا کلیک کنید                
    

در مثال بالا، کد درون تگ‌های script تابعی به نام hiThere را تعریف می‌کند که هشداری را با پیام (سلام. این یک رویداد در جاوا اسکریپت است)، نمایش می‌دهد.

عنصر button در بدنه HTML دارای نوعی ویژگی onclick بوده که روی hiThere تنظیم‌شده است که رویداد کلیک را با تابع hiThere مرتبط می‌کند.

                                      برای دیدن رویداد اینجا کلیک کنید            

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

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

رویداد onkeyup نوعی

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

  
       
    


  
       
    
       
    
رنگ جعبه متنی با فشردن کلید جهت رو به بالا عوض می‌شود


  

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

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

function changeBackground()

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

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

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

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

رویداد onmouseover یکی دیگر از انواع

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

در کد فوق، تابع hov زمانی اجرا می‌شود که ماوس روی عنصر div با شناسه hover قرار می‌گیرد.

function hov()

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

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

این ویژگی دید عنصر را کنترل می‌کند و به‌طور مؤثری وقتی ماوس را روی آن قرار می‌دهیم، آن را ناپدید می‌کند.

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

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

رویداد onmouseout نوعی دیگر از انواع

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

در مثال بالا، زمانی که نشانگر ماوس از عنصر div خارج شده، تابع out اجرا می‌شود.

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

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

targetElement.style.display = 'none';

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

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

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

رویداد onload به عنوان نوعی

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

مثال بالا در اصل نشان‌دهنده کاربرد رویداد 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

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

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




  


       
    
جاوا اسکریپت