JavaScript میں event.target کیا ہے؟

ایک ' تقریب 'اس وقت ہوتا ہے جب کسی چیز کی حالت بدل جاتی ہے۔ صارف کی سرگرمیاں، جیسے کسی بھی کلید کو دبانا یا ماؤس پر کلک کرنا، واقعات کا سبب بن سکتا ہے۔ جاوا اسکرپٹ میں ایونٹ کی کچھ خصوصیات ہیں جو ایونٹ کو سنبھالنے کے افعال میں مدد کرتی ہیں۔ ' event.target ' ان میں سے ایک ہے جو اس بات کی نشاندہی کرتا ہے کہ ایونٹ کو کس مخصوص عنصر نے متحرک کیا۔

یہ پوسٹ 'event.target' اور JavaScript میں اس کے استعمال کی وضاحت کرے گی۔

JavaScript میں 'event.target' کیا ہے؟

' event.target 'کی ایک خاصیت/خصوصیت ہے' تقریب جاوا اسکرپٹ میں۔ اس سے مراد وہ عنصر ہے جس نے واقعہ کو متحرک کیا۔ Event.target انتساب تک رسائی کے لیے، عنصر کے ایونٹ کو سننا ضروری ہے۔ ' AddEventListener() مخصوص واقعہ کو سننے کے لیے طریقہ استعمال کیا جاتا ہے۔

نحو

'event.target' پراپرٹی استعمال کرنے کے لیے، دیے گئے نحو کی پیروی کریں:

عنصر EventListener شامل کریں۔ ( '' ، فنکشن ( تقریب ) {

تسلی. لاگ ( تقریب. ہدف )

} )

دیئے گئے نحو میں،

' AddEventListener() ' طریقہ مخصوص عنصر کے لیے ایونٹ ہینڈلر کو شامل کرنے کے لیے استعمال کیا جاتا ہے۔
' 'کسی بھی واقعہ کی نشاندہی کرتا ہے، جیسے' کلک کریں '،' ماؤس اوور '، اور اسی طرح.

مثال

دی گئی مثال میں، ہمیں وہ عنصر ملے گا جس نے 'کا استعمال کرتے ہوئے ایونٹ کو متحرک کیا۔ event.target ' جائیداد.

یہاں، ہم ایک آئی ڈی تفویض کرکے ایک بٹن بنائیں گے۔ بی ٹی این 'جو جاوا اسکرپٹ میں بٹن تک رسائی کے لیے استعمال ہوتا ہے:

< بٹن آئی ڈی = 'بی ٹی این' > یہاں کلک کریں بٹن >

جاوا اسکرپٹ فائل میں، سب سے پہلے، ہمیں بٹن کا حوالہ اس کی تفویض کردہ آئی ڈی کا استعمال کرتے ہوئے 'کی مدد سے ملے گا۔ getElementById() طریقہ:

const بٹن = دستاویز getElementById ( 'btn' ) ;

بٹن کے ساتھ ایونٹ سننے والے کو منسلک کریں۔ ' کلک کریں بٹن کے کلک پر ایونٹ کا آغاز کیا جاتا ہے، اور ایونٹ آبجیکٹ کو ایک دلیل کے طور پر واقعہ سننے والے کو منتقل کیا جاتا ہے۔ ' event.target تقریب کو متحرک کرنے والے بٹن عنصر کا حوالہ حاصل کرنے کے لیے ” انتساب سننے والے فنکشن سے قابل رسائی ہے:

بٹن EventListener شامل کریں۔ ( 'کلک' ، فنکشن ( تقریب ) {

تسلی. لاگ ( 'ٹارگٹ ایونٹ:' ، تقریب. ہدف ) ;

} ) ;

آؤٹ پٹ مخصوص بٹن کا حوالہ دکھاتا ہے جس پر کلک کیا جاتا ہے:

آپ مزید معلومات حاصل کر سکتے ہیں اور مختلف فنکشنلٹیز کو لاگو کر سکتے ہیں جیسے ٹارگٹڈ ایونٹ پر اس کی خصوصیات کا استعمال کرتے ہوئے اسٹائل کرنا۔

'event.target' کے اوصاف کیا ہیں؟

'event.target' پراپرٹی کی مختلف خصوصیات ہیں جو ہدف کے عنصر کے بارے میں معلومات فراہم کرتی ہیں۔ event.target آبجیکٹ کی چند عام صفات حسب ذیل ہیں:

event.target اوصاف	تفصیل
event.target.tagname	حاصل کرنے کے لئے استعمال کیا جاتا ہے ' نام ہدف عنصر کے HTML ٹیگ کا۔
event.target.value	بازیافت کرنے کے لئے استعمال کریں ' قدر ہدف کے عنصر کا۔ یہ وصف زیادہ تر ان پٹ عناصر کے لیے استعمال ہوتا ہے۔
event.target.id	حاصل کرنے کے لیے ' آئی ڈی ہدف عنصر کی خصوصیت، دی گئی خصوصیت کا استعمال کریں۔
event.target.classList	کی فہرست ' کلاسز ہدف کے عنصر پر مشتمل اس وصف کے ذریعے رسائی حاصل کی جاتی ہے۔
event.target.textContent	حاصل کرنے کے لئے استعمال کیا جاتا ہے ' متن کا مواد ہدف کے عنصر کا۔
event.target.href	یہ وصف بازیافت کرتا ہے ' href ہدف عنصر کی خصوصیت، جیسے لنکس۔
event.target.style	ترمیم کرنے کے لیے ' سی ایس ایس ہدف عنصر کی خاصیت، اس وصف کو استعمال کریں۔

مثال 1: ہدف کے عنصر کے پس منظر کا رنگ تبدیل کریں۔

فراہم کردہ مثال میں، ہم 'کا استعمال کرتے ہوئے ہدف عنصر کے پس منظر کا رنگ تبدیل کریں گے انداز 'پر وصف' کلک کریں ' تقریب:

const بٹن = دستاویز getElementById ( 'btn' ) ;

بٹن EventListener شامل کریں۔ ( 'کلک' ، فنکشن ( تقریب ) {

تقریب. ہدف . انداز . پس منظر کا رنگ = 'نیلے' ;

} ) ;

آؤٹ پٹ

مثال 2: ہدف کے عنصر کی قدر حاصل کریں۔

ٹیگ کا استعمال کرتے ہوئے متن دکھانے کے لیے ایک ان پٹ ٹیکسٹ فیلڈ اور ایک علاقہ بنائیں۔ ان پٹ فیلڈ میں ids تفویض کریں اور

ٹیگ کو بطور ' لے ان پٹ 'اور' دکھائیں '، بالترتیب:

< ان پٹ کی قسم = 'متن' آئی ڈی = 'ٹیک ان پٹ' >

< پی آئی ڈی = 'دکھاؤ' >> ص >

'کا استعمال کرتے ہوئے ٹیکسٹ فیلڈ کا حوالہ حاصل کریں۔ getElementById() طریقہ:

ان پٹ تھا = دستاویز getElementById ( 'ٹیک ان پٹ' ) ;

کا استعمال کرتے ہیں ' قدر 'کے ساتھ وصف' event.target ' ھدف شدہ عنصر کی قدر حاصل کرنے کے لیے:

ان پٹ EventListener شامل کریں۔ ( 'ان پٹ' , ( تقریب ) => {

دستاویز getElementById ( 'دکھاؤ' ) . اندرونی ایچ ٹی ایم ایل = تقریب. ہدف . قدر ;

} )

جیسا کہ آپ دیکھ سکتے ہیں کہ ٹیکسٹ باکس میں درج کی گئی قدر کو 'کا استعمال کرتے ہوئے کامیابی کے ساتھ بازیافت کیا گیا ہے۔ قدر ' وصف:

یہ سب جاوا اسکرپٹ میں 'event.target' کے بارے میں تھا۔

نتیجہ

' event.target ' سے مراد وہ عنصر ہے جس نے ایونٹ کو متحرک/شروع کیا۔ 'event.target' پراپرٹی کی کچھ خصوصیات ہیں جو ہدف کے عنصر کے بارے میں معلومات فراہم کرتی ہیں۔ مثال کے طور پر، ' event.target.tagname '،' .قدر '،' .id '،' .style '، اور اسی طرح. اس پوسٹ نے 'event.target'، اس کے اوصاف، اور JavaScript میں اس کے استعمال کی وضاحت کی ہے۔

JavaScript میں event.target کیا ہے؟