javascript-introduction-js-جاوااسکریپتدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

رویدادها (Events) در جاوا اسکریپت

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

۱. مفهوم رویدادها

رویدادها فعالیت‌هایی هستند که در مرورگر رخ می‌دهند و می‌توانند منجر به اجرای کد خاصی در جاوا اسکریپت شوند. هر رویداد یک نام خاص دارد (مثل click, keydown, load, resize) و می‌تواند بر روی عناصر مختلف HTML اتفاق بیفتد.

نمونه‌های رایج رویدادها:

  • click: زمانی که یک عنصر (مثل دکمه) کلیک می‌شود.
  • mouseover: زمانی که موس روی یک عنصر قرار می‌گیرد.
  • keydown: زمانی که یک کلید از صفحه‌کلید فشار داده می‌شود.
  • submit: زمانی که یک فرم ارسال می‌شود.
  • load: زمانی که صفحه یا تصویر به طور کامل بارگذاری می‌شود.

۲. روش‌های افزودن رویدادها به عناصر

برای اضافه کردن یک رویداد به یک عنصر HTML، از دو روش اصلی می‌توان استفاده کرد: استفاده از ویژگی‌های HTML یا استفاده از جاوا اسکریپت.

1.2. استفاده از ویژگی‌های HTML

در این روش، رویداد را به‌طور مستقیم در ویژگی‌های HTML یک عنصر تعریف می‌کنیم.

مثال:

<button onclick="alert('دکمه کلیک شد!')">کلیک کن</button>

در این مثال، زمانی که دکمه کلیک می‌شود، پیامی به کاربر نمایش داده می‌شود.

۲.۲. استفاده از جاوا اسکریپت

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

مثال:

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("دکمه کلیک شد!");
});

در این مثال، از متد addEventListener() برای اضافه کردن رویداد click به دکمه استفاده شده است. این روش انعطاف‌پذیرتر است و امکان افزودن چندین رویداد به یک عنصر را می‌دهد.

۳. متد ()addEventListener

متد ()addEventListener یکی از بهترین روش‌ها برای اضافه کردن رویدادها به عناصر است. این متد اجازه می‌دهد که بیش از یک رویداد به یک عنصر اضافه شود و همچنین می‌توان از آن برای حذف رویداد استفاده کرد.

ساختار:

element.addEventListener(event, function, useCapture);
  • element: عنصری که می‌خواهیم رویداد را به آن اضافه کنیم.
  • event: نام رویداد (مثل click, mouseover).
  • function: تابعی که باید اجرا شود وقتی رویداد اتفاق می‌افتد.
  • useCapture: یک پارامتر اختیاری است که مشخص می‌کند رویداد باید در فاز capture یا bubble رخ دهد.

مثال:

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("دکمه کلیک شد!");
});

در این مثال، تابعی که پیغام را نمایش می‌دهد، به رویداد click روی دکمه متصل شده است.

۴. رویدادهای مختلف و نحوه استفاده از آن‌ها

1.4. رویداد click

رویداد click زمانی فعال می‌شود که یک عنصر (مثل دکمه) توسط کاربر کلیک شود.

مثال:

let button = document.getElementById("submitButton");
button.addEventListener("click", function() {
  alert("فرم ارسال شد!");
});

2.4. رویداد mouseover

رویداد mouseover زمانی فعال می‌شود که موس روی یک عنصر قرار بگیرد.

مثال:

let div = document.getElementById("hoverDiv");
div.addEventListener("mouseover", function() {
  console.log("موس روی عنصر قرار گرفت");
});

3.4. رویداد keydown

رویداد keydown زمانی فعال می‌شود که کاربر یک کلید از صفحه‌کلید را فشار دهد.

مثال:

document.addEventListener("keydown", function(event) {
  console.log("کلید فشرده شده: " + event.key);
});

در این مثال، با فشردن هر کلید از صفحه‌کلید، نام کلید فشرده شده در کنسول نمایش داده می‌شود.

۴.۴. رویداد submit

رویداد submit زمانی فعال می‌شود که یک فرم ارسال شود.

مثال:

let form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  alert("فرم ارسال شد!");
  event.preventDefault(); // از ارسال فرم جلوگیری می‌کند
});

5.4. رویداد load

رویداد load زمانی فعال می‌شود که صفحه یا یک عنصر (مانند تصویر یا ویدیو) به طور کامل بارگذاری شود.

مثال:

window.addEventListener("load", function() {
  console.log("صفحه بارگذاری شد");
});

۵. رویدادهای پیچیده‌تر و پیشرفته

1.5. رویدادهای focus و blur

  • focus: زمانی که یک عنصر (مانند فیلد ورودی) به دست آوردن فوکوس فعال می‌شود.
  • blur: زمانی که فوکوس از یک عنصر برداشته می‌شود.

مثال:

let input = document.getElementById("myInput");

input.addEventListener("focus", function() {
  console.log("فیلد ورودی فوکوس گرفت");
});

input.addEventListener("blur", function() {
  console.log("فیلد ورودی فوکوس را از دست داد");
});

2.5. رویداد resize

رویداد resize زمانی فعال می‌شود که اندازه پنجره مرورگر تغییر کند.

مثال:

window.addEventListener("resize", function() {
  console.log("اندازه پنجره تغییر کرد");
});

۶. حذف رویدادها

برای حذف یک رویداد، می‌توان از متد ()removeEventListener استفاده کرد. این متد همان پارامترهایی را که برای ()addEventListener استفاده شده‌اند نیاز دارد.

مثال:

let button = document.getElementById("myButton");

function handleClick() {
  alert("دکمه کلیک شد!");
}

button.addEventListener("click", handleClick);

// حذف رویداد
button.removeEventListener("click", handleClick);

۷. جریان رویدادها (Event Propagation)

جاوا اسکریپت دارای سیستم جریان رویداد است که به دو حالت مهم تقسیم می‌شود:

  • Capturing (Capture Phase): رویداد از بالاترین سطح (مانند document) شروع می‌شود و به عنصر هدف (مانند دکمه) می‌رسد.
  • Bubbling (Bubble Phase): رویداد از عنصر هدف شروع می‌شود و به سطح بالاتر (مانند document) صعود می‌کند.

انتخاب فاز جریان:

element.addEventListener("click", function() {
  console.log("رویداد کلیک در فاز capture");
}, true); // برای فاز capture

element.addEventListener("click", function() {
  console.log("رویداد کلیک در فاز bubble");
}, false); // برای فاز bubble

نتیجه‌گیری

رویدادها در جاوا اسکریپت ابزارهایی قدرتمند برای مدیریت تعاملات کاربر با صفحات وب هستند. با استفاده از رویدادها می‌توانیم واکنش‌های مختلفی نسبت به فعالیت‌های کاربر یا تغییرات صفحه نشان دهیم. متدهای مختلف مانند ()addEventListener و ()removeEventListener به ما این امکان را می‌دهند که رویدادها را به راحتی مدیریت کنیم و عملکردهای پیچیده‌تری را پیاده‌سازی نماییم.