اصول نوشتن صفحاتHTML 19
رویدادهای مربوط به صفحه کلید و ماوس در 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('متن پیام') تابع جاوا اسکرپتی است که در صفحه مثال تعریف شده است. به جای آن می توانید از کدهای دیگری استفاده کنید.