رویداد ها در JavaScript

رویداد ها (events) در نتیجه تعامل کاربر با مرورگر یا توسط مرورگر ایجاد می شوند. در ادامه به دو رویداد اشاره می کنیم:

  1. onclick: کلیک شدن یک المان (توسط کاربر)
  2. onload: اتمام بارگذاری (لود) یک صفحه وب (توسط مرورگر)

با کمک ویژگی های HTML می توانیم هنگام رخ دادن یک رویداد کدهای JS خود را اجرا کنیم. در نمونه کد زیر با استفاده از ویژگی onclick، تابع show_date را در JS اجرا کرده ایم.

<button onclick="show_date()">کلیک کنید</button>

<button onclick="this.innerHTML = Date()">کلیک کنید</button>

نکته: در نمونه کد بالا، کلمه کلیدی this به خود المان اشاره می کند. در واقع اگر از this در خود المان (در رویداد) استفاده شود به خود المان، ارجاع داده می شود.

<button onclick="show_date(this)">کلیک کنید</button>

رویداد های رایج HTML

در جدول زیر با رویداد های رایج HTML آشنا می شویم.

رویداد ها توضیحات آزمایشگاه
onchange

با تغییر المان توسط کاربر، اجرا می شود.

اغلب در المان select کاربرد دارد.

آزمایشگاه

onclick با کلیک روی المان توسط کاربر، اجرا می شود.

آزمایشگاه

onmouseenter

به محض ورود ماوس به محدوده المان توسط کاربر، اجرا می شود.

اولویت بیشتری نسبت به onmouseover دارد.

آزمایشگاه

onmouseover

به محض ورود ماوس به محدوده المان توسط کاربر، اجرا می شود.

با حرکت ماوس روی المان توسط کاربر، اجرا می شود.

اولویت کمتری نسبت به onmouseenter دارد.

آزمایشگاه

onmouseleave به محض خروج ماوس از محدوده المان توسط کاربر، اجرا می شود.

آزمایشگاه

onkeydown به محض پایین آمدن دکمه کیبورد و مادام فشرده شدن دکمه توسط کاربر، اجرا می شود.

آزمایشگاه

onkeypress به محض فشردن دکمه کیبورد  و مادام فشرده شدن دکمه توسط کاربر، اجرا می شود.

آزمایشگاه

onkeyup  به محض بالا آمدن دکمه کیبورد توسط کاربر، اجرا می شود.

آزمایشگاه

onload

به محض پایان بارگیری (لود شدن) یک صفحه توسط مرورگر، اجرا می شود.

آزمایشگاه

انواع نگارش رویداد در JS

برای ایجاد یک رویداد می توانیم:

  1. در یک المان به از ویژگی رویداد المان استفاده می کنیم.
<p onclick="func(this)">کلیک کنید</p>

<script>
    function func(elem) {
        elem.innerText = 'تغییر کرد';
    }
</script>

2. در اسکریپت داخلی یا خارجی از ویژگی رویداد DOM (شیء document) استفاده می کنیم.

نکته: DOM کوتاه شده Document Object Model است. در واقع همان شیء document است که تا به حال از آن استفاده می کردیم. (مانند documnet.getElementById())

<p id="demo">کلیک کنید</p>

<script>
    document.getElementById('demo').onclick = function () {
        this.innerText = 'تغییر کرد';
    }
</script>

<p id="demo" onclick="func(this)">کلیک کنید</p>

<script>
    function func (elem) {
        elem.style.color = 'red';
    }

    document.getElementById('demo').onclick = function () {
        this.innerText = 'تغییر کرد';
    }
</script>

نکته: برای یک المان فقط می توانیم یک رویداد مشترک ثبت کنیم. به طور مثال نمی توانیم از ویژگی onclick در ویژگی المان و همچنین در ویژگی DOM به صورت همزمان استفاده کنیم. در این زمان آخرین رویداد، روی رویدادهای قبلی رونویسی (overwrite) می شود.

<p id="demo">کلیک کنید</p>

<script>
    document.getElementById('demo').onclick = function () { 
        this.innerText = 'تغییر کرد';
    }
    
    document.getElementById('demo').onclick = function () {
        this.style.color = 'red';
    }
</script>

متد addEventListener()

در بخش قبلی مشاهده کردید اگر از رویداد مشابه استفاده کنیم. رویداد جدید روی رویداد قبلی رونویسی (overwrite) می شود.

با استفاده از متد addEventListener() می توانیم بدون رونویسی رویداد جدیدی به رویداد مشابه قبلی اضافه کنیم.

<p id="demo">کلیک کنید</p>

<script>
    document.getElementById('demo').addEventListener('click', function () {
        this.innerText = 'تغییر کرد';
    });
</script>

خلاصه درس

در این درس با رویداد ها (Events) در JS و رویداد های رایج HTML آشنا شدیم.

توسعه دهندگان
احسان اسلامی