الفرق بين المراجعتين لصفحة: «jQuery/event/target»
< jQuery
لا ملخص تعديل |
ط استبدال النص - 'jQuery/Element' ب'JavaScript/Element' |
||
| (مراجعة متوسطة واحدة بواسطة مستخدم واحد آخر غير معروضة) | |||
| سطر 3: | سطر 3: | ||
=== القيمة المعادة === | === القيمة المعادة === | ||
تعيد كائنًا من النوع [[ | تعيد كائنًا من النوع [[JavaScript/Element|Element]]. | ||
=== الوصف === | === الوصف === | ||
| سطر 19: | سطر 19: | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>event.target | <title>event.target مثال على الخاصية</title> | ||
<style> | <style> | ||
span, strong, p { | span, strong, p { | ||
| سطر 51: | سطر 51: | ||
<head> | <head> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<title>event.target | <title>event.target مثال على الخاصية</title> | ||
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> | <script src="https://code.jquery.com/jquery-1.10.2.js"></script> | ||
</head> | </head> | ||
| سطر 57: | سطر 57: | ||
<ul> | <ul> | ||
<li> | <li>البند 1 | ||
<ul> | <ul> | ||
<li> | <li>البند الفرعي 1-أ</li> | ||
<li> | <li>البند الفرعي 1-ب</li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li> | <li>البند 2 | ||
<ul> | <ul> | ||
<li> | <li>البند الفرعي 2-أ</li> | ||
<li> | <li>البند الفرعي 2-ب</li> | ||
</ul> | </ul> | ||
</li> | </li> | ||
المراجعة الحالية بتاريخ 11:00، 1 يوليو 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 مثال على الخاصية</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 مثال على الخاصية</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li>البند 1
<ul>
<li>البند الفرعي 1-أ</li>
<li>البند الفرعي 1-ب</li>
</ul>
</li>
<li>البند 2
<ul>
<li>البند الفرعي 2-أ</li>
<li>البند الفرعي 2-ب</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>