التابع `‎event.target`‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎ في jQuery

`‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎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>

مصادر

صفحة الحدث event.target في توثيق jQuery الرسمي.