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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۱۶ تیر ۱۳۹۷

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

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

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

<html>
  <head>
    <title>Event details</title>
  </head>

  <body>
    <form class="item" id="first-form">
      <input class="title" id="first-input"></input>
    </form>

    <form class="item" id="second-form">
      <input class="title" id="second-input"></input>
    </form>

    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
      // Javascript codes goes here
    </script>
  </body>
</html>

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

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

$('input').click(function(event) {
  console.log(event.target.id)
});

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

$('form').click(function(event) {
  console.log(event.currentTarget.id)
});

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

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

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

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

$('input').click(function() {
  var currentId = $(this).attr('id');
  console.log(currentId);
});

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

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

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

حسین

مرسی عالی

مهدی علامه

سلام. خوشحالم که مورد استفادتون قرار گرفت 🙂

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