عرض مصدر jQuery/mouseover

<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.mouseover()‎</code>‎ في jQuery}}</noinclude>
== <code>‎.mouseover( handler )‎</code> ==

=== القيم المعادة ===
يعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].

=== الوصف ===
يربط هذا التابع معالج حدث معين مع الحدث <code>mouseover</code> (الدخول حيِّز عنصر) في JavaScript، أو يستدعي ذلك الحدث لتطبيقه على عنصر.

=== <code>‎.mouseover( handler )‎</code> ===
أُضيف مع الإصدار: 1.0.

==== <code>handler</code> ====
دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )‎</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.

=== <code>‎.mouseover( [eventData ], handler )‎</code> ===
أُضيف مع الإصدار: 1.4.3.

==== <code>eventData</code> ====
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.

==== <code>handler</code> ====
دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )‎</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.

=== <code>‎.mouseover()‎</code> ===
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي وسائط.

هذا التابع هو اختصار للتابع ‎<code>[[jQuery/on|.on( "mouseover", handler )]]</code>‎ في شكله الأول والثاني، واختصار للتابع <code>[[jQuery/trigger|‎.trigger( "mouseover" )‎]]</code> في شكله الثالث.

يُرسَل الحدث <code>mouseover</code> إلى عنصرٍ عندما يدخل مؤشِّر الفأرة حيِّزه. يمكن أن تستقبل جميع عناصر HTML هذا الحدث.

انظر مثلًا إلى شيفرة HTML التالية:<syntaxhighlight lang="html">
<div id="outer">
  عنصر خارجي
  <div id="inner">
    عنصر داخلي
  </div>
</div>
<div id="other">
  استدعِ معالج الحدث
</div>
<div id="log"></div>

</syntaxhighlight>يمكن أن يُربط معالج الحدث مع أي عنصر:<syntaxhighlight lang="javascript">
$( "#outer" ).mouseover(function() {
 $( "#log" ).append( "<div>استعدعي معالج الحدث بنجاح</div>" );
});
</syntaxhighlight>عندما يدخل مؤشِّر الفأرة حيِّز العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ذي المعرِّف outer، فستضاف الرسالة إلى العنصر <code>[[HTML/div|<nowiki><div id="log"‎></nowiki>]]</code>. يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر:<syntaxhighlight lang="javascript">
$( "#other" ).click(function() {
 $( "#outer" ).mouseover();
});
</syntaxhighlight>بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على "استدعِ معالج الحدث".

يمكن أن يسبب هذا النوع من الأحداث بعض التعقيدات والمشكلات المتعلقة بانتشار الحدث (bubbling). فعندما يدخل مؤشِّر الفأرة مثلًا حيِّز العنصر Inner في المثال السابق، يُرسل الحدث <code>mouseover</code> إليه ثمَّ تُعاد الكرَّة ذاتها بالنسبة للعنصر الأب له وهو outer؛ هذا يؤدي إلى استدعاء معالج الحدث <code>mouseout</code> المرتبط مع العنصر في أوقات غير مناسبة. راجع توثيق التابع <code>[[jQuery/mouseenter|‎.mouseenter()‎]]</code> فهو البديل الأنسب في مثل هذه الحالات.

=== ملاحظات إضافية ===
لمَّا كان التابع ‎<code>.mouseover()</code>‎ اختزالٌ للتابع ‎<code>[[jQuery/on|.on( "mouseover", handler )]]</code>‎، فمن الممكن استعمال ‎<code>[[jQuery/off|.off( "mouseover" )]]</code>‎ لإزالة الحدث <code>mouseover</code> أي عملية معاكسة لما سبق.

=== أمثلة ===
إظهار عدد مرات استدعاء الحدث <code>mouseover</code> والحدث <code>mouseenter</code>. يُطلَق الحدث <code>mouseover</code> عندما يدخل مؤشِّر الفأرة إلى داخل العنصر الابن أيضًا، بينما يُطلق الحدث <code>mouseenter</code> عندما يدخل المؤشِّر حدود العنصر فقط:<syntaxhighlight lang="html">
<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>mouseover مثالٌ عن استعمال التابع</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="out overout">
  <span>حرك مؤشر الفأرة</span>
  <div class="in">
  </div>
</div>
 
<div class="out enterleave">
  <span>حرك مؤشر الفأرة</span>
  <div class="in">
  </div>
</div>
 
<script>
var i = 0;
$( "div.overout" )
  .mouseover(function() {
    i += 1;
    $( this ).find( "span" ).text( "mouse over x " + i );
  })
  .mouseout(function() {
    $( this ).find( "span" ).text( "mouse out " );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    n += 1;
    $( this ).find( "span" ).text( " دخل المؤشر عدد" + n + " من المرات" );
  })
  .mouseleave(function() {
    $( this ).find( "span" ).text( "غادر المؤشر" );
  });
</script>
 
</body>
</html>

</syntaxhighlight>

== مصادر ==
* [http://api.jquery.com/mouseover/ صفحة التابع ‎‎.mouseover()‎ في توثيق jQuery الرسمي.]
[[تصنيف:jQuery]]
[[تصنيف:jQuery Events]]