آموزش جاوا اسکریپت – رویداد ها در جاوا اسکریپت ۱

در این بخش از سری آموزش جاوا اسکریپت قصد داریم نحوه مدیریت رویداد ها در جاوا اسکریپت را یاد بگیریم.

درک رویدادها و هندلر رویداد ها در جاوا اسکریپت

یک رویداد (event) چیزی است که هنگام تعامل کاربر با صفحه وب اتفاق می افتد, مثل زمانی که روی یک لینک یا دکمه کلیک می کند, متنی را داخل باکس متن وارد می کند, گزینه ای از لیست را انتخاب می کند, دکمه ای از کیبورد را می فشارد, نشانگر ماوس را حرکت می دهد, فرم را سابمیت می کند و غیره… .

در بعضی مواقع نیز خود مرورگر می تواند باعث یک رویداد شود, مثل لود صفحه.

زمانی که رویدادی رخ می دهد, می توانید از هندلر رویداد ها در جاوا اسکریپت (یا یک event listener) برای شناسایی آنها و انجام یک عملیات خاص یا مجموعه ای از عملیات, استفاده کنید.

با توافق, نام هندلر رویداد ها در جاوا اسکریپت همیشه با کلمه “on” شروع می شود پس یک هندلر رویداد برای کلیک onclick است.

مشابه آن یک هندلر برای رویداد لود شدن onload و برای رویداد blur نیز onblur است.

(منظور از هندلر همان handler یا دستیار یا مدیر رویداد است)

چندین راه برای مشخص کردن یک هندلر رویداد وجود دارد. آسان ترین راه افزودن مستقیم آن به تگ شروع المان HTML با استفاده از خصوصیت خاص هندلر رویداد است.

برای مثال, به منظور مشخص کردن هندلر کلیک برای المان دکمه, از onclick بصورت زیر استفاده می کنیم:

<button type="button" onclick="alert('Hello World!')">Click Me</button>

1	<button type="button" onclick="alert('Hello World!')">Click Me</button>

به هر حال برای برای جدا کردن کدهای جاوا اسکریپت از HTML می توانید از فایل خارجی جاوا اسکریپت یا داخل تگ های <script>‌ و </script> قرار بدید :

<button type="button" id="myBtn">Click Me</button>
<script>
    function sayHello() {
        alert('Hello World!');
    }
    document.getElementById("myBtn").onclick = sayHello;
</script>

<button type="button" id="myBtn">Click Me</button>

function sayHello() {

alert('Hello World!');

}

document.getElementById("myBtn").onclick = sayHello;

</script>

نکته : از آنجایی که خصوصیات HTML حساس به حروف نیستند می توانید onclick را بصورت onClick, OnClick یا ONCLICK بنویسید اما مقادیر آنها حساس به حروف کوچک و بزرگ هستند.

بطور معمول, ما رویداد ها در جاوا اسکریپت را به چهار گروه اصلی رویدادهای ماوس (mouse), کیبورد (keybord), فرم (form) و سند/پنجره (document/window) تقسیم می کنیم.

رویدادهای دیگری نیز وجود دارد که در بخش های بعدی یاد می گیریم. در بخش زیر بطور خلاصه چندتا از پرکاربردترین ها در پروژه های واقعی را بررسی می کنیم.

رویدادهای ماوس

یک رویداد ماوس با کلیک کاربر روی المان, حرکت دادن اشاره گر ماوس روی یک المان و غیره اجرا می شود.

بعضی از مهمترین رویدادهای ماوس و هندلر آنها را در زیر می بینید :

رویداد کلیک (onclick)

رویداد click زمانی اتفاق می افتد که کاربر روی یک المان در صفحه وب کلیک کند. بعضی مواقع, اینها المان های فرم و لینک ها هستند. و می توانید آن را با هنلدر onclick مدیریت کنید.

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

<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>

1 2	<button type="button" onclick="alert('You have clicked a button!');">Click Me</button> <a href="#" onclick="alert('You have clicked a link!');">Click Me</a>

رویداد منوی کلیک راست (oncontextmenu)

رویداد contextmenu زمانی که روی یک المان بری باز شدن منو کلیک می کنیم, اجرا می شود. و می توانید آن را با هنلدر oncontextmenu مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که روی یک المان کلیک راست می شود نشان می دهد.

<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>

1 2	<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button> <a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>

رویداد ماوس بر (onmouseover)

رویداد ماوس بر زمانی اجرا می شود که اشاره گر ماوس روی یک المان قرار بگیرد. و می توانید آن را با هنلدر onmouseover مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که اشاره گر ماوس روی یک المان قرار می گیرد نشان می دهد.

<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>

1 2	<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button> <a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>

رویداد ماوس خارج از (onmouseout)

رویداد ماوس بر زمانی اجرا می شود که اشاره گر ماوس را از روی یک المان خارج کنیم/برداریم. و می توانید آن را با هنلدر onmouseout مدیریت کنید.

در مثال زیر به شما یک پیام alert را زمانی که اشاره گر ماوس از روی یک المان برداشته می شود نشان می دهد.

<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a>

1 2	<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button> <a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a>

امیدوارم در این بخش آموزش جاوا اسکریپت, از قسمت اول رویداد ها در جاوا اسکریپت نهایت استفاده را برده باشید.

در بخش بعدی با قسمت دوم رویدادها در جاوا اسکریپت آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

آموزش جاوا اسکریپت – رویداد ها در جاوا اسکریپت ۱

درک رویدادها و هندلر رویداد ها در جاوا اسکریپت

رویدادهای ماوس

رویداد کلیک (onclick)

رویداد منوی کلیک راست (oncontextmenu)

رویداد ماوس بر (onmouseover)

رویداد ماوس خارج از (onmouseout)

آموزش جاوا اسکریپت – کوکی ها در جاوا اسکریپت

آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۱

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه