رویدادهای مربوط به صفحه کلید و ماوس در HTML

در این قسمت به توضیح بخش دوم رویدادهای HTML که مربوط به صفحه کلید و ماوس می شود می پردازیم.


  • رویدادهای مربوط به صفحه کلید

سه رویداد در این دسته قرار می گیرد:

  • onkeydown :
    در هنگام فشار دادن دکمه صفحه کلید اسکرپت تعریف شده در مقدار این شناسه اجرا می شود.
  • onkeypress :
    وقتی که یک دکمه در صفحه کلید فشرده می شود و رها می شود اسکرپت موجود در این شناسه اجرا می شود.
  • onkeyup :
    در هنگام رها شدن یک کلید این شناسه فعال می شود.

رویدادهای مربوط به صفحه کلید نباید در تگهای زیر استفاده شود:

<base>, <br>, <bdo>, <frame>, <frameset>, <iframe>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>

 

برای مشاهده مثال برای رویدادهای مربوط به فرمها اینجا را کلیک کنید.

کدی را که در نوشتن این مثال از آن استفاده شده است می توانید در اینجا مشاهده کنید:

<input value="onkeypress" type="text" onKeyPress="msg('onkeypress')" />
<input value="onkeypress" type="text" onKeyUp="msg('onkeyup')" />
<input value="onkeypress" type="text" onKeyDown="msg('onkeydown')" />

 


  • رویدادهای مربوط به ماوس

هفت رویداد در این دسته قرار دارند:

  • onclick :
    در هنگام کلیک کردن بر روی قسمتی که این شناسه را دارد اجرا می شود.
  • ondblclick :
    مقدار موجود در این شناسه به هنگام دابل کلیک بر روی قسمتی که این شناسه در آن به کار رفته اجرا می شود.
  • onmousedown :
    وقتی که کلید ماوس فشرده می شود این شناسه عمل می کند.
  • onmousemove :
    وقتی که ماوس را در صفحه حرکت می دهید این رویداد اجرا می شود.
  • onmouseover :
    وقتی ماوس روی قسمتی که حاوی این شناسه است قرار می گیرد این رویداد اجرا می شود.
  • onmouseout :
    این رویداد وقتی که ماوس از روی قسمتی که حاوی این رویداد است خارج می شود اجرا می شود.
  • onmouseup :
    وقتی که کلید ماوس رها می شود این رویداد اجرا می شود.

رویدادهای مربوط به ماوس هم مانند رویدادهای صفحه کلید نباید در تگهای زیر استفاده شوند:

<base>, <br>, <bdo>, <frame>, <frameset>, <iframe>, <html>, <head>, <meta>, <param>, <script>, <style>, <title>

 

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

می توانید کدی را که در نوشتن این مثال از آن در سلولهایی که حاوی رویدادها هستند استفاده شده است در اینجا مشاهده کنید:

<td onClick="msg('onClick')">در این قسمت کلیک کنید تا رویداد onClick اجرا شود.</td>

<td onDblClick="msg('onDblClick')">در این قسمت دابل کلیک کنید تا رویداد onDblClick اجرا شود.</td>

<td onMouseDown="msg('onMouseDown')">در این قسمت کلید ماوس را پایین نگهدارید تا رویداد onMouseDown اجرا شود.</td>

<td onMouseMove="msg('onMouseMove')">روی این قسمت ماوس خود را حرکت دهید تا رویداد onMouseMove اجرا شود.</td>

<td onMouseOver="msg('onMouseOver')">ماوس خود را روی این قسمت قرار دهید تا رویداد onMouseOver اجرا شود.</td>

<td onMouseOut="msg('onMouseOut')">وقتی ماوس از روی این قسمت کنار رود رویداد onMouseOut اجرا می شود.</td>

<td onMouseUp="msg('onMouseUp')">وقتی کلید ماوس روی این قسمت رها شود رویداد onMouseUp اجرا می شود.</td>

در این مثال msg('متن پیام') تابع جاوا اسکرپتی است که در صفحه مثال تعریف شده است. به جای آن می توانید از کدهای دیگری استفاده کنید.


نظرات بازدید کنندگان
Thu, 21 May 2009 17:12:19 +0430 نویسنده : حسنا
سلام
سايتتون بزرگ ترين كمك رو به من كرد
خيلي خيلي ممنونم
مراحل كامل طراحي فرم ثبت نام رو مي خواستم
اگه لطف كنين برام ارسال كنين ممنون ميشم
(كد ذخيره‌ي اطلاعاتي كه وارد فرم ميشه رو مي خوام)
 
Wed, 22 Apr 2009 11:25:45 +0430 نویسنده : سارا جعفرراد
واقعا مرسی کارتون درسته
خسته نباشید
 
Thu, 12 Mar 2009 12:47:03 +0330 نویسنده : اسماعیل
آموزش فرستادن وب روی اینترنت و معرفی اون اگه میشه برام بفرست
 
Thu, 12 Mar 2009 12:43:59 +0330 نویسنده : اسماعیل
آقا خیلی دمت گرم خیلی کمکم کرد
سایتت هم خیلی خوشکله !
 
Tue, 17 Feb 2009 22:32:30 +0330 نویسنده : elahe
ممنون از سایت خیلی خیلی خیلی جالب و آموزنده شما
با تشکر
 
Wed, 11 Feb 2009 12:43:13 +0330 نویسنده : صنم
سلام
به خاطر مطالب مفيدتون تشكر مي كنم ميخواستم يه سايت طراحي كنم اگر مي شه مراحل  طراحي يك سايت رو به طور كامل برام ميل كنيد.
 
Mon, 02 Feb 2009 22:08:53 +0330 نویسنده : مهناز
سلام خسته نباشین
ممنون از مطالب زیباتون- لطفاً مراحل طراحی یک سایتو از اول برام بفرستین
 
Wed, 21 Jan 2009 22:31:40 +0330 نویسنده : محسن
اگه میشه مراحل طراحی یک سایت رو هم بگید .
 
Wed, 21 Jan 2009 22:25:21 +0330 نویسنده : محسن
بهترین سایتی هست که تو تمام عمرم رفتم .
واقعا thanks.
its<blink> very  very</blink> nice
 
Mon, 08 Dec 2008 14:08:50 +0330 نویسنده : شقایق
سلام منم به خاطر آموزشانون تشکر می کنم واقعا خسته نباشید.
مثل همه دوستان مراحل طراحی سایت و می خوام برام بفرستین.
با تشکر.
 
Wed, 03 Dec 2008 15:33:07 +0330 نویسنده : زهره
از مطالب بسیار عالی شما کمال تشکر رو دارم میشه مراحل طراحی یک سایت رو برام ایمیل کنین ممنون میشم
 
Tue, 02 Dec 2008 20:35:19 +0330 نویسنده : Elnaz
salam mishe dar morede dokmehaie keyboard bishtar begid
 
Sun, 28 Sep 2008 10:25:22 +0330 نویسنده : مریم
سلام،
خیلی سایت خوبی دارین،از تمام اطلاعات خوبی که میدین ممنونم،
من می خوام یه فرم ثبت نام طراحی کنم میشه مراحلش رو کامل برام بفرستید.
ممنون میشم.
موفق باشید.
یا حق.
 
Fri, 25 Jul 2008 20:20:04 +0430 نویسنده : elham
سلام
میخواهم یک وب سایت طراحی کنم از شما خواهش میکنم تمامی مراحل را برایم میل کنید.
با تشکر قبلی از شما
 
Thu, 10 Jul 2008 15:57:44 +0430 نویسنده : کامران
سلام خسته نباشین  بخاطر کمک بزرگی که در طراحی سایت می کنین ممکنه مراحل طراحی سایت رو برام ارسال نمایی  مرسی
 
Thu, 10 Jul 2008 03:58:47 +0430 نویسنده : احسان
اگه ميشه مراحل طراحي سايت رو از ابتدا برام بفرستيد
ممنون
 
Sun, 08 Jun 2008 12:00:55 +0430 نویسنده : mahdi
salam . mishe lotf konid codaeerok bayad avaz konam ta axe balaie safharo to web log tghir bedamobaram Email konin.mer30
 
Sun, 25 May 2008 08:23:38 +0430 نویسنده : حسين
با سلام  ميشه مراحل طزاحي يك سايت را برام بفرستيد. ممنون
 
Wed, 14 May 2008 00:11:17 +0430 نویسنده : darya
tnx. vaghean dar ye morede khaily zarory site shoma bozorgtarin komako behem kard.
 
Sat, 10 May 2008 12:05:55 +0430 نویسنده : زهرا
سلام
خوبي ؟ سايت عالي داري
ميشه مراحل طراحي يك سايت ساده رو برام بفرستي ؟
درضمن من ميخوام بدونم آياراهي هست تا وقتي كه ميخوايم توي يه باكس پسوردي رو وارد كنيم بجاي دايره هاي پر يه شكل ديگه اي يا هرچيزي كه خودمون تعيين ميكنيم رو نشون بده ؟
ممنون ميشم اگه كه سريع تر پاسخمو بدي
 
Tue, 08 Apr 2008 19:31:47 +0330 نویسنده : mousa
salam merC kheyli khoob tozih midid age mishe PHP ham bezarid merC
 
ساعت: 15:30 - تاریخ: 29 دی 1386 نویسنده : elham
salam
manam mikhastam azatoon tashakor konam be khatere matalebi k gozashtin
vaghean alian va manam khaheshe samamaro dashtam age momkene baram e-mail konin mamnoon misham.
 
ساعت: 12:43 - تاریخ: 27 دی 1386 نویسنده : tahereh
مرسی عالی بودن آموزش هاتون
 
ساعت: 19:56 - تاریخ: 1386 نویسنده : امير
محشـــــــــــــــــــــــر بود.
راجع به AJAX , PHP , XML هم مطلب بزار.
 
ساعت: 11:26 - تاریخ: 1386 نویسنده : poorya
khili khob bod mamnon
 
ساعت: 23:56 - تاریخ: 1386 نویسنده : سمانه
سلام .سایت محشری داری.میشه مراحل طراحی یک سایت رو برام بفرستی ممنون میشم.