Target

العنصر Target  هو  العنصر الذي سيتم تطبيق حدث ما عليه. يستخدم العنصر Target عادة مع أحداث مثل click أو submit حتى يتم تحديد العنصر المستهدف الذي سيتم تطبيق الحدث عليه. 

عندما يحدث حدث على عنصر مثل النقر على زر، فإن العنصر المستهدف سيكون الزر نفسه.

مثل 

function handleClick(event) {
  console.log(event.target);
}

button.addEventListener('click', handleClick);

فالعنصر target يمكنك من معرفة العنصر الذي تم النقر عليه أو تقديم النموذج منه بالتحديد. ويفضل الإطلاع على الإجابات التالية للمزيد من التفاصيل

عنصر الـ Target يشير إلى العنصر الذي تم تنفيذ حدث عليه، أي عنصر DOM الذي بادر الحدث، مثل النقر أو الضغط على مفتاح أو تغيير قيمة.

ونصل إلى عنصر الـ Target من خلال خاصية event.target داخل معالج الحدث، والأمر بحاجة إلى توضيح بالكود:

لنفترض أن لدينا زرًا مع معالج حدث onclick:

function handleClick(event) {
  // سيُشير event.target إلى عنصر الزر الذي تم النقر عليه
  console.log(event.target.textContent);
}

عند النقر على الزر، سيُطبع النص الموجود داخل الزر على شاشة التوجيه.

وعنصر الـ Target لا يتغير أثناء عملية التدفق (bubbling) و الالتقاط (capturing)، ونستطيع الوصول إلى عنصر الـ Target من أي معالج حدث لحدث معين، سواء كان على العنصر نفسه أو على أحد أسلافه.

ونستفيد من ذلك بتطبيق منطق معين على العنصر الذي تم الحدث عليه مثل التالي:

function handleMouseOver(event) {
  event.target.style.backgroundColor = "red";
}

function handleMouseOut(event) {
  event.target.style.backgroundColor = "";
}

خذ الأمر من هاته الناحية: هو ما يدل عليه لفظه، فالعبارة target تعني الهدف أو المستهدف، وفي الأحداث events في جافاسكربت هنالك عنصر مستهدف بهذا الحدث، سواءا كان ذلك ضغطة أو مرورا بمؤشر الفأرة ضغطة على زر من أزرار لوحة المفاتيح أو طباعة على حقل نصي أو ما إلى ذلك، وفي كل هاته الحالات المستهدف هاهنا هو العنصر ذاته، أي الزر وعنصر الحقل النصي وزر لوحة المفاتيح أو أيا كان ذاك. 

ولذلك يتفرع كخاصية عن الكائن event، بحيث يمكن مباشرة تطبيق خواص عليه أو التعامل معه.