رویداد ها در JavaScript
رویداد ها (events) در نتیجه تعامل کاربر با مرورگر یا توسط مرورگر ایجاد می شوند. در ادامه به دو رویداد اشاره می کنیم:
- onclick: کلیک شدن یک المان (توسط کاربر)
- 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
برای ایجاد یک رویداد می توانیم:
- در یک المان به از ویژگی رویداد المان استفاده می کنیم.
<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 به صورت همزمان استفاده کنیم. در این زمان تنها رویداد ویژگی DOM اجرا می شود.
<p id="demo">کلیک کنید</p>
<script>
document.getElementById('demo').onclick = function () {
this.innerText = 'تغییر کرد';
}
document.getElementById('demo').onclick = function () {
this.style.color = 'red';
}
</script>نکته: اگر از دو رویداد یکسان در ویژگی DOM به صورت همزمان استفاده کنیم. در این زمان تنها رویداد پاییین تر اجرا می شود.
نکته:
<p id="demo" onclick="this.style.color = 'red'">کلیک کنید</p>
<script>
document.getElementById('demo').addEventListener('click', function () {
this.innerText = 'تغییر کرد';
});
</script>3. در اسکریپت داخلی یا خارجی از addEventListener استفاده می کنیم.
<p id="demo">کلیک کنید</p>
<script>
document.getElementById('demo').addEventListener('click', function () {
this.innerText = 'تغییر کرد';
});
</script>خلاصه درس
در این درس با رویداد ها (Events) در JS و رویداد های رایج HTML آشنا شدیم.
احسان اسلامی
