عرض مصدر jQuery/event/target

<noinclude>{{DISPLAYTITLE:الخاصية <code>‎event.target</code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery}}</noinclude>
== <code>‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎event.target</code> ==

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

=== الوصف ===
تعيد هذه الخاصية عنصر DOM الذي بدأ الحدث.

=== <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> لتحديد ما إذا كان الحدث يُعالج بسبب انتقال الحدث إلى العناصر الأب (event bubbling). هذه الخاصية مفيدة جدًا في تفويض الحدث، عند انتقال الحدث إلى العناصر الأب.

=== أمثلة ===
عرض اسم العنصر عند النقر عليه:<syntaxhighlight lang="html">
<!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>
</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>
<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>
</syntaxhighlight>

== مصادر ==
* <span> </span>[http://api.jquery.com/event.target/ صفحة الخاصية event.target في توثيق jQuery الرسمي].
[[تصنيف:jQuery]]
[[تصنيف:jQuery Events]]