الفرق بين المراجعتين ل"jQuery/mouseenter"
جميل-بيلوني (نقاش | مساهمات) (إضافة محتويات الصفحة.) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
| (مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 3: | سطر 3: | ||
=== القيم المعادة === | === القيم المعادة === | ||
| − | يعيد كائنًا من النوع jQuery. | + | يعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. |
=== الوصف === | === الوصف === | ||
| سطر 12: | سطر 12: | ||
==== <code>handler</code> ==== | ==== <code>handler</code> ==== | ||
| − | دالة من الشكل <code>Function( Event eventObject )</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث. | + | دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث. |
=== <code>.mouseenter( [eventData ], handler )</code> === | === <code>.mouseenter( [eventData ], handler )</code> === | ||
| سطر 21: | سطر 21: | ||
==== <code>handler</code> ==== | ==== <code>handler</code> ==== | ||
| − | دالة من الشكل <code>Function( Event eventObject )</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث. | + | دالة من الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث. |
=== <code>.mouseenter()</code> === | === <code>.mouseenter()</code> === | ||
| سطر 32: | سطر 32: | ||
انظر مثلًا إلى شيفرة HTML التالية:<syntaxhighlight lang="html"> | انظر مثلًا إلى شيفرة HTML التالية:<syntaxhighlight lang="html"> | ||
<div id="outer"> | <div id="outer"> | ||
| − | + | عنصر خارجي | |
<div id="inner"> | <div id="inner"> | ||
| − | + | عنصر داخلي | |
</div> | </div> | ||
</div> | </div> | ||
<div id="other"> | <div id="other"> | ||
| − | + | استدعِ معالج الحدث | |
</div> | </div> | ||
<div id="log"></div> | <div id="log"></div> | ||
| − | |||
</syntaxhighlight>يمكن أن يُربط معالج الحدث مع أي عنصر:<syntaxhighlight lang="javascript"> | </syntaxhighlight>يمكن أن يُربط معالج الحدث مع أي عنصر:<syntaxhighlight lang="javascript"> | ||
$( "#outer" ).mouseenter(function() { | $( "#outer" ).mouseenter(function() { | ||
$( "#log" ).append( "<div>Handler for .mouseenter() called.</div>" ); | $( "#log" ).append( "<div>Handler for .mouseenter() called.</div>" ); | ||
}); | }); | ||
| − | </syntaxhighlight>عندما يدخل مؤشِّر الفأرة حدود العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ذي المعرِّف | + | </syntaxhighlight>عندما يدخل مؤشِّر الفأرة إلى داخل حدود العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ذي المعرِّف outer أو إلى أحد العناصر الموجودة داخله، فستضاف الرسالة إلى العنصر <code>[[HTML/div|<nowiki><div id="log"></nowiki>]]</code>. يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر:<syntaxhighlight lang="javascript"> |
$( "#other" ).click(function() { | $( "#other" ).click(function() { | ||
$( "#outer" ).mouseenter(); | $( "#outer" ).mouseenter(); | ||
| سطر 60: | سطر 59: | ||
إظهار نصوص معينة عند استدعاء الحدث <code>mouseenter</code> والحدث <code>mouseover</code>. يُطلَق الحدث <code>mouseover</code> عندما يتحرك مؤشِّر الفأرة داخل العنصر الابن أيضًا، بينما يُطلَق الحدث <code>mouseenter</code> عندما يدخل المؤشِّر حدود العنصر فقط:<syntaxhighlight lang="html"> | إظهار نصوص معينة عند استدعاء الحدث <code>mouseenter</code> والحدث <code>mouseover</code>. يُطلَق الحدث <code>mouseover</code> عندما يتحرك مؤشِّر الفأرة داخل العنصر الابن أيضًا، بينما يُطلَق الحدث <code>mouseenter</code> عندما يدخل المؤشِّر حدود العنصر فقط:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
| − | <html lang=" | + | <html lang="ar"> |
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
| − | <title>mouseenter | + | <title>mouseenter مثالٌ عن استعمال التابع</title> |
<style> | <style> | ||
div.out { | div.out { | ||
| سطر 89: | سطر 88: | ||
<div class="out overout"> | <div class="out overout"> | ||
| − | <p> | + | <p>حرك مؤشر الفأرة</p> |
| − | <div class="in overout"><p> | + | <div class="in overout"><p>حرك مؤشر الفأرة</p><p>0</p></div> |
<p>0</p> | <p>0</p> | ||
</div> | </div> | ||
<div class="out enterleave"> | <div class="out enterleave"> | ||
| − | <p> | + | <p>حرك مؤشر الفأرة</p> |
| − | <div class="in enterleave"><p> | + | <div class="in enterleave"><p>حرك مؤشر الفأرة</p><p>0</p></div> |
<p>0</p> | <p>0</p> | ||
</div> | </div> | ||
| سطر 114: | سطر 113: | ||
$( "div.enterleave" ) | $( "div.enterleave" ) | ||
.mouseenter(function() { | .mouseenter(function() { | ||
| − | $( "p:first", this ).text( " | + | $( "p:first", this ).text( "دخل المؤشر" ); |
$( "p:last", this ).text( ++n ); | $( "p:last", this ).text( ++n ); | ||
}) | }) | ||
.mouseleave(function() { | .mouseleave(function() { | ||
| − | $( "p:first", this ).text( " | + | $( "p:first", this ).text( "غادر المؤشر" ); |
}); | }); | ||
</script> | </script> | ||
| سطر 128: | سطر 127: | ||
== مصادر == | == مصادر == | ||
| − | * [http://api.jquery.com/mouseenter/ صفحة التابع .mouseenter() في توثيق jQuery الرسمي.] | + | * [http://api.jquery.com/mouseenter/ صفحة التابع .mouseenter() في توثيق jQuery الرسمي.] |
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Events]] | [[تصنيف:jQuery Events]] | ||
المراجعة الحالية بتاريخ 10:55، 4 يونيو 2018
.mouseenter( handler )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع معالج حدث معين مع الحدث mouseenter عندما يدخل مؤشِّر الفأرة حيِّز عنصر، أو يستدعي ذلك الحدث لتطبيقه على عنصر.
.mouseenter( handler )
أُضيف مع الإصدار: 1.0.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.mouseenter( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيَّة استخدام أي نوع)، ويُمثِّل كائنًا يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.
handler
دالة من الشكل Function( Event eventObject )، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُستدعى فيها الحدث.
.mouseenter()
أُضيف مع الإصدار: 1.0، ولا يقبل هذا الشكل من التابع أي وسائط.
هذا التابع هو اختصار للتابع .on( "mouseenter", handler ) في شكله الأول والثاني، واختصار للتابع .trigger( "mouseenter" ) في شكله الثالث.
الحدث mouseenter في JavaScript هو خاصِّيَّة في المتصفح Internet Explorer. بسبب وجود خدمة عامة للأحداث، فستحاكي jQuery هذا الحدث لاستعماله في أي متصفح بغض النظر عن نوعه. يُرسل هذا الحدث إلى عنصر ٍعندما يدخل مؤشِّر الفأرة حيِّزه. يمكن أن تستقبل جميع عناصر HTML هذا الحدث.
انظر مثلًا إلى شيفرة HTML التالية:
<div id="outer">
عنصر خارجي
<div id="inner">
عنصر داخلي
</div>
</div>
<div id="other">
استدعِ معالج الحدث
</div>
<div id="log"></div>
يمكن أن يُربط معالج الحدث مع أي عنصر:
$( "#outer" ).mouseenter(function() {
$( "#log" ).append( "<div>Handler for .mouseenter() called.</div>" );
});
عندما يدخل مؤشِّر الفأرة إلى داخل حدود العنصر <div> ذي المعرِّف outer أو إلى أحد العناصر الموجودة داخله، فستضاف الرسالة إلى العنصر <div id="log">. يمكن أيضًا استدعاء الحدث عند الضغط على عنصر آخر:
$( "#other" ).click(function() {
$( "#outer" ).mouseenter();
});
بعد تنفيذ هذه الشيفرة، ستُضاف الرسالة أيضًا بالضغط على "Trigger the handler".
يختلف الحدث mouseenter عن الحدث mouseover في طريقة تعامله مع انتشار الحدث (event bubbling). لو استُعمِل الحدث mouseover في المثال السابق، فسيُستدعى معالج الحدث آنذاك عند تحرك مؤشِّر الفأرة فوق العنصر Inner؛ وهذا السلوك غير محبَّذ عادةً. من جهة أخرى، يستدعي الحدث mouseenter معالجه عندما يدخل مؤشِّر الفأرة حدود العنصر نفسه فقط وليس حدود عناصره السليلة (أحفاده [descendant]) أيضًا. بناءً على ذلك، سيُستدعى معالج الحدث في المثال السابق عندما يدخل مؤشِّر الفأرة حيِّز العنصر Outer وليس العنصر Inner.
ملاحظات إضافية
لمَّا كان التابع .mouseenter() اختزالٌ للتابع .on( "mouseenter", handler )، فمن الممكن استعمال .off( "mouseenter" ) لإزالة الحدث mouseenter أي عملية معاكسة لما سبق.
أمثلة
إظهار نصوص معينة عند استدعاء الحدث mouseenter والحدث mouseover. يُطلَق الحدث mouseover عندما يتحرك مؤشِّر الفأرة داخل العنصر الابن أيضًا، بينما يُطلَق الحدث mouseenter عندما يدخل المؤشِّر حدود العنصر فقط:
<!doctype html>
<html lang="ar">
<head>
<meta charset="utf-8">
<title>mouseenter مثالٌ عن استعمال التابع</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>حرك مؤشر الفأرة</p>
<div class="in overout"><p>حرك مؤشر الفأرة</p><p>0</p></div>
<p>0</p>
</div>
<div class="out enterleave">
<p>حرك مؤشر الفأرة</p>
<div class="in enterleave"><p>حرك مؤشر الفأرة</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( "دخل المؤشر" );
$( "p:last", this ).text( ++n );
})
.mouseleave(function() {
$( "p:first", this ).text( "غادر المؤشر" );
});
</script>
</body>
</html>