آموزش چگونگی کار با رویدادها در جاوااسکریپت + معرفی دوره آموزشی جاوااسکریپت

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

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

ساختار پروژه

برای آنکه رویدادها را به خوبی بررسی کنیم نیاز است که این کار را به صورت عملی انجام دهید. برای همین من یک دایرکتوری جدید با نام javascript events ایجاد کرده و در آن سه فایل index.html، main.js و main.css را قرار می‌دهم. تمام این فایل‌ها خالی از اطلاعات بوده، در نتیجه نیازی به نگرانی در این زمینه نیست.

آشنایی با مفهوم Event handler

Event handler به قطعه کدهایی اشاره دارند که برنامه‌نویسان آن را نوشته‌اند. این قطعه کدها به محض اجرا شدن یک Event اجرا شده و دستورالعمل مورد نیازمان را اجرا می‌کنند. بنابراین Event handler بصورت مداوم در حال گوش کردن به هر رویدادی‌ست که از سمت کاربر اعمال می‌شود.

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

رویدادهای مربوط به Mouse
رویدادهای مربوط به Keyboard
رویدادهای مربوط به Window
رویدادهای مربوط به Form

در ادامه این مقاله، ما به صورت جداگانه در رابطه با هر کدام این موضوعات صحبت خواهیم کرد.

رویدادهای مربوط به Mouse

این دسته از رویدادها اشاره به مواردی دارند که کاربران با استفاده از دستگاه‌های اشاره‌گر یا Pointing Devices باعث بوجود آمدن آن‌ها می‌شوند. شناخته شده‌ترین دستگاه در این دسته‌بندی ماوس یا Mouse است. در بین رویدادهایی که در این دسته‌بندی قرار دارند چهار مورد از پراستفاده‌ترین‌ها هستند: (Single Click)، (Double Click)، (Mouse Up) و (Mouse Down).

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

رویداد MouseClick: این رویداد مربوط به زمانی خواهد بود که کاربر روی یک المان کلیک کند. در قطعه کد زیر می‌توانید روش استفاده از رویداد mouseClick() را متوجه شوید:

ابتدای کار در فایل index.html خود قطعه کد زیر را وارد کنید:

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <title>JavaScript Events</title>
</head>
<body>
    <!-- container -->
    <div class="container">
        <!-- heading -->
        <h1>Section Engineering Education</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis officiis numquam, 
            cum necessitatibus, reprehenderit tempora pariatur ab maiores aut deleniti, 
            a voluptas sed minus inventore quod ipsam dolores velit animi.
        </p>
    </div>
    <button id="button">Click me</button>
       <!-- close container -->
    <script src="main.js"></script>
</body>
</html>

برای آنکه بتوانیم از این رویداد استفاده کنیم نیاز به یک Event Handler داریم، که برای این موضوع می‌توانیم از click استفاده کنیم.

const button = document.getElementById("button");

button.addEventListener('click', handleClickEvent)
function handleClickEvent(){
    alert("The button was clicked!")
}

اولین کاری که در قطعه کد بالا انجام داده‌ایم دریافت المان مورد نظر با استفاده از تکنولوژی DOM است. مقدار دریافتی را در ثابت button قرار داده‌ایم.
دومین کار فراخوانی Event Handler مربوط به click است. تابع addEventListener در این فرایند از ما دو ورودی را دریافت می‌کند، ورودی اول همان رویداد اتفاق افتاده است (که در این مثال Click است) و ورودی بعدی مربوط به کاری می‌شود که ما قصد داریم با کلیک روی button صورت بگیرد. به همین دلیل نیاز است که یک تابع را فراخوانی کنیم. تابع handleClickEvent همان تابعی‌ست که به آن نیاز داریم.
سومین کار تعریف کارکرد تابع handleClickEvent است. به همین دلیل ما تابع ساده‌ای را در آخرین خط‌های قطعه کد بالا ایجاد کرده‌ایم که تنها کار نمایش یک متن ساده «The button was clicked!» به صورت Alert انجام می‌دهد.

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

button.addEventListener('mouseover', () =>{
    document.documentElement.setAttribute("data-theme", "light")
})

رویداد Mouseout: این رویداد مربوط به زمانی خواهد بود که کاربر اشاره‌گر ماوس خود را از روی یک المان برمی‌دارد. مثال قبل را در نظر بگیرید که چگونه کاربر با قرار دادن اشاره‌گر روی المان پوسته وبسایت را تغییر می‌دهد. حال قصد داریم بعد از برداشته شدن ماوس از روی یک المان پوسته ما به حالت قبلی خود بازگردد.

button.addEventListener('mouseout', () =>{
    document.documentElement.setAttribute("data-theme", "dark")
})

رویدادهای Mouseup و Mousedown: این رویدادها مربوط به زمانی خواهند بود که کاربر روی یک المان کلیک چپ ماوس را فشرده و آن را نگه دارد (Mousedown) و دیگری (Mouseup) درست برعکس، مربوط به زمانی خواهد بود کاربر انگشتش را از روی کلیک چپ بردارد. (کلیک چپ به عنوان پیشفرض کلیک انتخابی است).

button.addEventListener('mousedown', () =>{
    document.documentElement.setAttribute("data-theme", "dark")
})

button.addEventListener('mouseup', () =>{
    document.documentElement.setAttribute("data-theme", "light")
})

رویدادهای مربوط به Keyboard

رویدادهای مربوط به Keyboard زمانی اتفاق می‌افتد که یک کاربر دکمه‌ای خاص یا هر دکمه‌ای را روی کیبورد فشار دهد. در این مجموعه رویداد ما می‌توانیم با ۳ رویداد متفاوت کار کنیم که عبارت هستند از: keydown events، keypress events و keyup events. به ترتیب این رویدادها مربوط به زمانی می‌شود که: یک کلید فشار داده شود، هر کلید در مجموعه الفبا فشار داده شود و آخرین مورد (keyup events) مربوط به زمانی می‌شود که کلید فشار داده شده رها شود.

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

document.addEventListener('keydown', (e) => {
    var keyName = e.key;
    var keyCode = e.code;
    alert(`Key pressed ${keyName} \r\n Key code value: ${keyCode}`);
}, false);
document.addEventListener('keydown', (e) => {
    var keyName = e.key;
    var keyCode = e.code;
    alert(`Key pressed ${keyName} and  Key code value: ${keyCode}`);
}, false);
document.addEventListener('keypress', (e) => {
    var keyName = e.key;
    var keyCode = e.code;
    alert(`Key pressed ${keyName} and  Key code value: ${keyCode}`);
}, false);

رویدادهای مربوط به Window

Window یا به زبان فارسی پنجره (قاب، فریم) به هر محیطی اشاره می‌شود که کدهای اجرا شده شما در آن نمایش داده می‌شود. این قاب می‌تواند یک صفحه نمایش ۱۰۰ اینچی یا یک صفحه نمایش موبایلی کوچک باشد. در هر صورت، ما می‌توانیم از رویدادهای متفاوتی در این دسته استفاده کنیم. بیایید با چند مورد از آن‌ها آشنا شویم:

Onload window event: این رویداد درست به زمانی اشاره دارد که صفحه شما به صورت کامل بارگزاری شده و کاربر می‌تواند به صورت کامل آن را مشاهده کند. بیشتر توسعه‌دهندگان تنها زمانی از این رویداد استفاده می‌کنند که قصد اجرای توابعی را دارند که بدون بارگزاری کامل وبسایت قابلیت اجرا را ندارند (بدین دلیل که این دسته از توابع به دستوارت دیگری نیازمند هستند). بنابراین در این حالت برای اجرا شدن رویداد مورد نظر باید منتظر تکمیل شدن فرایند بارگزاری وبسایت بمانید.

Onresize window event: از این رویداد برای زمانی استفاده می‌شود که صفحه مرورگر تغییر اندازه پیدا می‌کند. این تغییر سایز هم می‌تواند شامل کوچک شدن و یا بزرگ شدن صفحه باشد.

OnUnload window event: از این رویداد برای زمانی استفاده می‌شود که شما در حال بستن صفحه وبسایت هستید. به همین دلیل چیزهایی وجود دارند که نیاز به Unload شدن دارند.

Onerror window event: این رویداد مربوط به زمانی خواهد بود که کاربر در بارگزاری صفحه وبسایت با مشکلی مواجه شده و خطایی اتفاق می‌افتد.

رویدادهای مربوط به Form

همانطور که از نام این دسته معلوم است، رویدادهای Form مربوط به المان‌های فرم در HTML می‌شود. به طور کلی، رویدادهای Form مربوط به زمان‌هایی می‌شود که شما روی یک فرم عملیات‌های باز کردن، بستن، قرار دادن ماوس روی آن و یا ارسال کردن را انجام می‌دهد. در ادامه می‌توانید چند مورد از این رویدادها را مشاهده کنید:

Submit form event: این رویداد مربوط به زمانی می‌شود که کاربر روی دکمه Submit کلیک می‌کند. در قطعه کد زیر می‌توانید مشاهده کنید که بعد از انجام چنین کاری یک پیغام به کاربر نمایش داده می‌شود:

const form = document.getElementById('form');
const submitButton = document.getElementById('form-btn');
form.addEventListener('submit', () =>{
    alert("The from was succesfully submitted")
});

Focus form event: این رویداد مربوط به زمانی می‌شود که شما روی یک المان از فرم، فوکوس کنید (اینکار معمولا با کلیک روی یک ورودی و یا کاوش المان‌ها از طریق دکمه Tab روی کیبورد انجام می‌پذیرد).

let btn = document.getElementById('button')
btn.onfocus = containerFocusFunction;
function containerFocusFunction(){
    document.documentElement.setAttribute("case", "upper")
    btn.innerHTML =" FOCUS FUNCTION ACTIVATED"
{

On blur form event: این رویداد برعکس مورد قبلی، مربوط به زمانی خواهد بود که شما فوکوس را از روی المان بردارید.

let btn = document.getElementById('button')

btn.onblur = containerBlurFunction;
 
function containerBlurFunction(){
    document.documentElement.setAttribute("case", "lower")
    btn.innerHTML =" FOCUS FUNCTION DE-ACTIVATED"
 }
}

قطعه کد مورد نظر برای مسئله lowercase و uppercase را می‌توانید به صورت زیر در فایل main.css قرار دهید:

html[case = 'upper']{
    text-transform: uppercase;
}
html[lower='lower']{
    text-transform: lowercase;
}

Change form event: این رویداد مربوط به زمانی خواهد بود که کاربری در تلاش است تا اطلاعات داخل فرم را تغییر دهد. منظور از تغییر دادن می‌تواند از حذف کامل اطلاعات تا تغییر تنها یک حرف باشد. با اجرا کردن قطعه کد زیر می‌توانید متوجه منظور این قسمت باشید:

let text = document.getElementById('text')
let result = document.getElementById('result')
text.addEventListener('change', (e) =>{
    result.innerHTML = e.target.value
});

جمع‌بندی

مدیریت رویدادها یکی از توانایی‌های بسیار مهمی‌ست که هر توسعه‌دهنده جاوااسکریپت و البته Front-End باید به خوبی روی آن تسلط داشته باشد. ما در این مطلب سعی کردیم تا شما را با اصلی‌ترین موارد این رویدادها آشنا سازیم. برای آشنایی بیشتر با رویدادها به شما پیشنهاد می‌کنم دوره آموزشی جاوااسکریپت را دنبال کنید.