رویداد onmouseenter
مثال (رویداد onmouseenter)
اجرا کردن یک تابع جاوااسکریپت، هنگامی که موس روی یک عکس قرار می گیرد:
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
رویداد onmouseenter هنگامی روی می دهد که، نشانگر موس بر روی یک عنصر وارد شود.
نکته: رویداد onmouseleave اغلب در کنار رویداد بالا مورد داستفاده قرار می گیرد. این رویداد زمانی روی می دهد که نشانگر موس از روی یک عنصر خارج شود.
نکته: رویداد onmouseenter شبیه رویداد onmouseover می باشد اما در یک چیز با هم اختلاف دارند و آن این است که :
رویداد mouseover هنگامی بر روی یک عنصر ایجاد می شود که، شما وارد عناصر والد این عنصر یا عناصر فرزند این عنصر، بشوید، به این ویژگی bubble گفته می شود.
اما رویداد mouseenter، زمانی اتفاق می افتد که موس تنها از روی عنصر والد این عنصر، به آن وارد شود.
پشتیبانی مرورگرها
اعداد داخل جدول، نشان دهنده ی ورژن اولین مرورگری است که به طور کامل از این رویداد پشتیبانی می کند.
| Event | |||||
|---|---|---|---|---|---|
| onmouseenter | 30.0 | 5.5 | بله | 6.1 | 11.5 |
نحوه استفاده
در HTML:
در جاوااسکریپت:
استفاده از متد addEventListener() در جاوااسکریپت:
نکته: متد addEventListener()، در internet Explorer 8 و ورژن های قدیمی تر آن پشتیبانی نمی شود.
جزئیات تکنیکی
| Bubbles: | خیر |
|---|---|
| Cancelable: | خیر |
| Event type: | MouseEvent |
| Supported HTML tags: | تمام عناصر html به جز: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
| DOM Version: | Level 2 Events |
مثال - خودتان امتحان کنید
مثال (رویداد onmouseenter)
این مثال تفاوت بین سه دستور onmousemove و onmouseenter و onmouseover را نشان می دهد:
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
<p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
<p id="demo3">I will demonstrate onmouseover!</p>
</div>
خودتان امتحان کنید »
مرجع کلیه رویدادهای JavaScript
- نوشته شده توسط احسان عباسی
- بازدید: 5808
