آموزش رویدادها-events در JavaScript| آموزش کامل + نمونه کد

قبلی بعدی

رویداد ها در JavaScript

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

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

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

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

نمونه کد

در این نمونه کد، با کمک رویداد onclick، زمان را نشان می دهیم.

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

آزمایشگاه

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

نمونه کد

در این المان، با this، به خود المان اشاره می کنیم.

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

آزمایشگاه

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

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

نمونه کد

در این نمونه کد، با پارامتر this، خود المان را به تابع show_date ارسال کردیم.

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

آزمایشگاه

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

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

رویداد ها	توضیحات	آزمایشگاه
onchange	با تغییر المان توسط کاربر، اجرا می شود. اغلب در المان select کاربرد دارد.	آزمایشگاه
onclick	با کلیک روی المان توسط کاربر، اجرا می شود.	آزمایشگاه
onmouseenter	به محض ورود ماوس به محدوده المان توسط کاربر، اجرا می شود. اولویت بیشتری نسبت به onmouseover دارد.	آزمایشگاه
onmouseover	به محض ورود ماوس به محدوده المان توسط کاربر، اجرا می شود. با حرکت ماوس روی المان توسط کاربر، اجرا می شود. اولویت کمتری نسبت به onmouseenter دارد.	آزمایشگاه
onmouseleave	به محض خروج ماوس از محدوده المان توسط کاربر، اجرا می شود.	آزمایشگاه
onkeydown	به محض پایین آمدن دکمه کیبورد و مادام فشرده شدن دکمه توسط کاربر، اجرا می شود.	آزمایشگاه
onkeypress	به محض فشردن دکمه کیبورد و مادام فشرده شدن دکمه توسط کاربر، اجرا می شود.	آزمایشگاه
onkeyup	به محض بالا آمدن دکمه کیبورد توسط کاربر، اجرا می شود.	آزمایشگاه
onload	به محض پایان بارگیری (لود شدن) یک صفحه توسط مرورگر، اجرا می شود.	آزمایشگاه

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

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

در یک المان به از ویژگی رویداد المان استفاده می کنیم.

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

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

نمونه کد

​x
 
<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">کلیک کنید</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 روی یک المان استفاده شده است. کدام رویداد اولویت اجرا بیشتری دارد؟

 
<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>

نمونه کد

در این نمونه کد دوبار از رویداد onclick روی یک المان استفاده شده است. کدام رویداد اولویت اجرا بیشتری دارد؟

 
<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>

نمونه کد

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

آزمایشگاه

خلاصه درس

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

قبلی بعدی

توسعه دهندگان

احسان اسلامی

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

رویداد ها در JavaScript

نمونه کد

نمونه کد

نمونه کد

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

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

نمونه کد

نمونه کد

نمونه کد

نمونه کد

متد addEventListener()

نمونه کد

خلاصه درس