عرض مصدر jQuery/mouseenter

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

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

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

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

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

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

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

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

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

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

الحدث <code>mouseenter</code> في [[JavaScript]] هو خاصِّيَّة في المتصفح Internet Explorer. بسبب وجود خدمة عامة للأحداث، فستحاكي jQuery هذا الحدث لاستعماله في أي متصفح بغض النظر عن نوعه. يُرسل هذا الحدث إلى عنصر ٍعندما يدخل مؤشِّر الفأرة حيِّزه. يمكن أن تستقبل جميع عناصر HTML هذا الحدث.

انظر مثلًا إلى شيفرة HTML التالية:<syntaxhighlight lang="html">
<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>

</syntaxhighlight>يمكن أن يُربط معالج الحدث مع أي عنصر:<syntaxhighlight lang="javascript">
$( "#outer" ).mouseenter(function() {
 $( "#log" ).append( "<div>Handler for .mouseenter() called.</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" ).mouseenter();
});
</syntaxhighlight>بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على "Trigger the handler".

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

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

=== أمثلة ===
إظهار نصوص معينة عند استدعاء الحدث <code>mouseenter</code> والحدث <code>mouseover</code>. يُطلَق الحدث <code>mouseover</code> عندما يتحرك مؤشِّر الفأرة داخل العنصر الابن أيضًا، بينما يُطلَق الحدث <code>mouseenter</code> عندما يدخل المؤشِّر حدود العنصر فقط:<syntaxhighlight lang="html">
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseenter demo</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">
  <p>move your mouse</p>
  <div class="in overout"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<div class="out enterleave">
  <p>move your mouse</p>
  <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<script>
var i = 0;
$( "div.overout" )
  .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
    $( "p:last", this ).text( ++i );
  })
  .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
  });
 
var n = 0;
$( "div.enterleave" )
  .mouseenter(function() {
    $( "p:first", this ).text( "mouse enter" );
    $( "p:last", this ).text( ++n );
  })
  .mouseleave(function() {
    $( "p:first", this ).text( "mouse leave" );
  });
</script>
 
</body>
</html>

</syntaxhighlight>

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