دریافت اطلاعات event یا رویداد المنت مورد نظر در Javascript



visibility  
mode_comment   ۰

دریافت اطلاعات event یا رویداد المنت مورد نظر در Javascript

در این مطلب قصد دارم که اطلاعات event یا رویدادی که برای المنت مورد نظر رخ داده است رو بدست بیاریم و کارهای مورد نظرمون رو با اون انجام بدیم. مثلا بهتون یاد میدم که چطور میتونین id المنتی که بر روی اون کلیک شده است رو بدست بیارید.

فرض کنید که کدهای HTML زیر رو دادیم. همونطور که میبینید دو فرم با id های متفاوت قرار دارن و درون هرر کدام از اونا یک input قرار داده شده است.

مثلا در کد HTML بالا قصد داریم که با توجه به تمامی input های موجود، به ازای کلیک روی هر یک از input ها، id مربوط به اون input  به ما نمایش داده بشه.

در Javascript یا jQuary همیشه به کمک event.target می تونیم id رخداد رو به دست بیاریم. به کمک کد زیر id مربوط به input کلیک شده به ما نمایش داده میشه:

حالا فرض کنید که به جای کلیک روی input ها ما به دنبال کلیک بر روی form ها باشیم. اما دیگه نمی تونیم از target.id استفاده کنیم و به جای اون باید از event.currentTurget استفاده بشه.

اما سوال اینجاست که تفاوت target و currentTarget چیه؟

target المنتی هست که یک event مثل کلیک کردن روی اون رخ داده است در صورتی که currentTarget المنتی هست که رویداد رو برای اون تعریف کردیم و به اون attach شده است.

مثلا اگر رویداد کلیک رو برای input ها تعریف کنید، target و currentTarget هر دو خود input هستند ولی اگر رویداد کلیک یا هر رویداد دیگری رو برای form ها تعریف کنید و بر روی input ها کلیک کنید، target اون input ای میشه که بر روی اون کلیک شده است و currentTarget اون فرمی میشه که input کلیک شده در اون قرار داده شده است.

با استفاده از روش دیگه ای هم میتونیم به id المنت کلیک شده دسترسی داشته باشیم:

به همین راحتی.

اگر شما هم روشی برای انجام اینکار به ذهنتون میرسه خوشحال میشیم که در بخش نظرات با ما در میان بذارید.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :