الفرق بين المراجعتين ل"jQuery/event/target"
< jQuery
اذهب إلى التنقل
اذهب إلى البحث
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>event.target</code> في jQuery}}</noinclude> == <code>...') |
|||
| سطر 3: | سطر 3: | ||
=== القيمة المعادة === | === القيمة المعادة === | ||
| − | + | تعيد كائنًا من النوع [[jQuery/Element|Element]]. | |
=== الوصف === | === الوصف === | ||
| − | + | تعيد هذه الخاصية عنصر DOM الذي بدأ الحدث. | |
=== <code>event.target</code> === | === <code>event.target</code> === | ||
| − | + | أُضيفت مع الإصدار: [http://api.jquery.com/category/version/1.0 1.0]. | |
| − | يمكن أن تكون الخاصية <code>target</code> هي العنصر لمُسجل للحدث أو لعناصره السليلة. غالبًا ما يكون من المفيد مقارنة <code>event.target</code> مع <code>[[JavaScript/this|this]]</code> لتحديد ما إذا كان الحدث يُعالج بسبب انتقال الحدث إلى العناصر الأب | + | يمكن أن تكون الخاصية <code>target</code> هي العنصر لمُسجل للحدث أو لعناصره السليلة. غالبًا ما يكون من المفيد مقارنة <code>event.target</code> مع <code>[[JavaScript/this|this]]</code> لتحديد ما إذا كان الحدث يُعالج بسبب انتقال الحدث إلى العناصر الأب (event bubbling). هذه الخاصية مفيدة جدًا في تفويض الحدث، عند انتقال الحدث إلى العناصر الأب. |
=== أمثلة === | === أمثلة === | ||
| − | عرض اسم | + | عرض اسم العنصر عند النقر عليه:<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 46: | سطر 46: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </syntaxhighlight>تطبيق تفويض حدث بسيط: إضافة معالج النقر إلى قائمة غير مرتبة، ويخفي أبناء أبناء العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>. النقر فوق أحد أبناء العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> يبدل أبنائه (انظر <code>[[jQuery/toggle|toggle()]]</code>) | + | </syntaxhighlight>تطبيق تفويض حدث بسيط: إضافة معالج النقر إلى قائمة غير مرتبة، ويخفي أبناء أبناء العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code>. النقر فوق أحد أبناء العنصر <code>[[HTML/li|<nowiki><li></nowiki>]]</code> يبدل حالة أبنائه (انظر <code>[[jQuery/toggle|toggle()]]</code>):<syntaxhighlight lang="html"> |
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 86: | سطر 86: | ||
== مصادر == | == مصادر == | ||
| − | <span> </span>[http://api.jquery.com/event.target/ صفحة | + | * <span> </span>[http://api.jquery.com/event.target/ صفحة الخاصية event.target في توثيق jQuery الرسمي]. |
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Events]] | [[تصنيف:jQuery Events]] | ||
مراجعة 09:26، 31 مايو 2018
event.target
القيمة المعادة
تعيد كائنًا من النوع Element.
الوصف
تعيد هذه الخاصية عنصر DOM الذي بدأ الحدث.
event.target
أُضيفت مع الإصدار: 1.0.
يمكن أن تكون الخاصية target هي العنصر لمُسجل للحدث أو لعناصره السليلة. غالبًا ما يكون من المفيد مقارنة event.target مع this لتحديد ما إذا كان الحدث يُعالج بسبب انتقال الحدث إلى العناصر الأب (event bubbling). هذه الخاصية مفيدة جدًا في تفويض الحدث، عند انتقال الحدث إلى العناصر الأب.
أمثلة
عرض اسم العنصر عند النقر عليه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.target demo</title>
<style>
span, strong, p {
padding: 8px;
display: block;
border: 1px solid #999;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
<script>
$( "body" ).click(function( event ) {
$( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script>
</body>
</html>
تطبيق تفويض حدث بسيط: إضافة معالج النقر إلى قائمة غير مرتبة، ويخفي أبناء أبناء العنصر <li>. النقر فوق أحد أبناء العنصر <li> يبدل حالة أبنائه (انظر toggle()):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.target demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul>
<script>
function handler( event ) {
var target = $( event.target );
if ( target.is( "li" ) ) {
target.children().toggle();
}
}
$( "ul" ).click( handler ).find( "ul" ).hide();
</script>
</body>
</html>