تبلیغات

دوره H جی کوئری: درس 6: کار با رویدادها

دوره آموزشی H جی کوئری

دوره H جی کوئری
درس 5: کار با رویدادها در جی کوئری


در درس قبل، نحوه‌ی کار با مدل DOM در جی کوئری را توضیح دادم و حالا در این پست، به نحوه‌ی کار با رویدادها (event) و مدیریت (handle) آن‌ها می‌پردازیم.

مدیریت رویدادها (Event Handling)

جی کوئری، یک روش کارآمد و موثری را برای مدیریت رویدادها فراهم کرده است. همانطور که می‌دانید، رویدادها زمانی رخ می‌دهند که کاربر، عملی را انجام می‌دهد؛ مانند کلیک کردن روی یک المنت، حرکت ماوس و یا حتی submit کردن فرم.
زمانی که رویدادی روی یک عنصری رخ می‌دهد، یک تابع مدیریت کننده (handler function) اجرا می‌شود. برای مثال، می‌خواهیم رویداد کلیک المنتی با آیدی fullkade را مدیریت کنیم و سپس تاریخ و زمان فعلی را نمایش دهیم. اگر این کار را با جاوا اسکریپت خالص انجام دهیم به صورت زیر خواهد بود:

و اگر جی کوئری را نیز وارد کدمان کنیم، به صورت زیر خواهد بود:

 

همانطور که می‌بینید، از نام رویداد گرفته تا بقیه کدها، بسیار ساده شده‌اند. همچنین یک تابع به عنوان handler function را به ورودی متد click ارسال کرده‌ایم تا زمانی که روی المنتی با آیدی fullkade کلیک شد، این handler function اجرا شود.


سوال: handler یا مدیریت کننده‌ی رویداد کدام یک است؟!

  1. function
  2. variable
  3. selector
  4. HTML element
جواب
گزینه‌ی 1

رویدادهای مهم

تمامی موارد زیر، همچون کلیک استفاده می‌شوند؛ با این تفاوت که فقط نامشان متفاوت است.

  • رویدادهای ماوس
    • click: وفتی روی المنت کلیک می‌شود.
    • dblclic: وقتی روی المنت دابل کلیک می‌شود. (دوبار کلیک)
    • mouseenter: زمانی که نشانگر ماوس، وارد محدوده‌ی المنت می‌شود. (روی المنت می‌رود)
    • mouseleav: زمانی که نشانگر ماوس، از محدوده‌ی المنت خارج می‌شود. (از روی المنت خارج می‌شود)
      این رویداد، بعد از رویداد mouseenter  روی می‌دهد.
    • mouseover: زمانی که نشانگر ماوس، در محدوده‌ی المنت حرکت می‌کند. (روی المنت حرکت می‌کند)
      این رویداد، بعد از رویداد mouseenter  روی می‌دهد.
  • رویدادهای کیبورد
    • keydown: زمانی که دکمه‌ای به سمت پایین فشرده می‌شود.
    • keyup: زمانی که دکمه‌ای، از حالت فشرده شده، رها می‌شود. (به سمت بالا می‌آید و به عبارتی دکمه را رها یا ول می‌کنیم)
  • رویدادهای فرم
    • submit: وقتی فرم در حال سابمیت شدن است.
    • change: وقتی مقدار ویژگی value المنت تغییر می‌کند. مثلا در مورد input ها می‌توان استفاده کرد.
    • focus: وقتی روی المنت فوکوس می‌شود. مثلا روی یک input text کلیک می‌کنیم تا چیزی بنویسیم، در این حالت روی آن فوکوس شده است.
    • blur: وقتی المنتی که روی آن فوکوس شده، این حالت فوکوس را از دست می‌دهد.
  • رویدادهای سند
    • ready: وفتی سند HTML به طور کامل لود می‌شود.
    • resize: وقتی سایز یا اندازه‌ی پنجره‌ی مرورگر تغییر می‌کند.
    • scroll: وقتی کاربر در المنت اسکرول می‌کند.

مثال: در این‌جا می‌خواهیم رویداد keydown را برای المنت input text مدیریت کرده و کدی بنویسیم تا آنچه در input تایپ می‌شود، در داخل یک div نمایش داده شود! البته این‌کار با change هم قابل انجام است اما خب این صرفا تنها یک مثال برای درک موضوع است.

همانطور که می‌بینید، کد بالا، رویداد keydown را برای المنتی با آیدی name مدیریت کرده و در داخل تابع مدیریت کننده، مقدار این المنت را به محتوای المنتی با آیدی msg اختصاص داده است.

بقیه موارد را خودتان تست کنید.

راهی دیگر برای مدیریت رویدادها

در جی کوئری، تابعی با نام on وجود دارد که از آن می‌توان برای مدیریت رویدادها استفاده کرد. برای مثال می‌خواهیم از این تابع، برای مدیریت رویداد click استفاده کنیم:

همانطور که می‌بینید، نام رویداد در ورودی اول تابع on و handler function در ورودی دوم تابع on، ارسال شده است.
نکته‌ی جالب این‌جاست که تفاوت نام رویدادها در حاوا اسکریپت خالص و جی کوئری، نبود on در نام آن‌هاست و فکر کنم با وجود متد on، دلیل نبود نام on در ابتدای نام رویدادها را بدانید.

متد on، برای اتصال یک تابع handler به چندین رویداد، مورد استفاده قرار می‌گیرد. شما می‌توانید نام رویدادها را با گذاشتن یک فاصله از هم در ورودی اول متد on وارد کنید. البته می‌توان تابع را داخل یک متغیر ریخت و از آن استفاده کرد اما در این‌جا کدمان ساده‌تر نیز شده است.

از بین بردن مدیریت کننده‌ی یک رویداد

فرض کنید شرایطی برایتان پیش آمده است که می‌خواهید در آن شرایط، رویدادی که تنظیم کرده‌اید از بین برود؛ برای انجام این‌کار، از متد off استفاده می‌کنیم.

 

آبجکت event

ممکن است برایتان سوالی پیش بیاید که چگونه مقدارهای یک رویداد رخ داده را به دست آوریم! مثلا کلیدی فشرده شده است ولی از کجا بدانیم چه کلیدی؟!

تمامی توابع handler رویدادها، یک ورودی آبجکت event می‌توانند دریافت کنند. این آبجکت که از جنس کلاس Event می‌باشد، شامل ویژگی‌ها و متدهای مهم زیر است:

  • ویژگی pageX و pageY:  موقعیت مکانی یا به عبارتی، مختصات ماوس در صفحه نمایش سند، زمانی که رویداد رخ داده است.
    این مختصات از گوشه‌‌ی سمت چپ و بالای سند شما حساب می‌شود، یا به عبارت ساده‌تر، مبداء مختصات، گوشه‌ی سمت چپ و بالای سند شما است.
  • ویژگی type: از نوع رشته بوده و شامل نام رویداد می‌شود. مثلا “cllick”
  • ویژگی wich: دکمه‌ی فشرده  شده. (ماوس و کیبورد)
  • ویژگی data: هرنوع داده‌ای می‌تواند باشد که در زمان وقوع رویداد، در این ویژگی قرار گرفته است.
  • ویژگی target: عنصر DOM المنتی که رویداد را مقداردهی کرده است.
  • متد ()preventDefault: جلوگیزی از عملکرد پیش‌فرض رویداد.
    مثلا داخل رویداد submit می‌توانید با توجه به شرایطی، از انجام شدن عمل سابمیت و ارسال اطلاعات به سرور خودداردی کنید وبرای مثال خطایی نمایش دهید که مثلا فلان چیز اشتباه است.
  • متد ()stopPropagation: توقف رویداد از فوران کردن به عناصر دیگر!
    مثلا فرض کنید داخل یک div، یک p قرا داده اید و رویداد click را برای p و هم برای div مدیریت کرده‌اید. اما بدون انجام StopPropagation، زمانی که روی p کلیک شود، این کلیک به پدر آن نیز انتقال داده می‌شود! چرا که در داخل محدوده‌ی پدر قرار دارد! اما اگر داخل رویداد click مربوط به p، این متد را اجرا کنیم؛ از سرایت این رویداد به پدر و … جلوگیری خواهد شد.

نکته: چند مورد دیگر مانده است ولی این‌ها مهم‌تریناش بودند.

مثال: یک المنت a داریم و می‌خواهیم زمانی که روی آن کلیک شد، به صفحه‌ی مربوط به لینک قرار گرفته شده هدایت نشود!

همان‌طور که می‌بینید، مختصات محور x ماوس alert شده ولی در ادامه از عمل پیش‌فرض این رویداد برای المنت a، خودداری شده است. همچنین این متدرا لازم نیست حتما در انتها صدا بزنید.

راه اندازی رویدادها یا شبیه سازی رویدادها

با استفاده از متد trigger، می‌توانیم رویدادی را برای المنتی راه اندازی کنیم؛ یعنی بدون این‌که واقعا  کلیکی شده باشد، عمل کلیک را شبیه سازی کنیم.

در این‌جا، روی المنتی با آیدی fullkade ، بدون این‌که واقعا کاربر بروی آن کلیکی کرده باشد، کلیکی از داخل کدها اعمال می‌شود؛ پس رویداد نیز اجرا خواهد شد.

از متد trigger نمی‌توان برای رویدادهای بومی مرورگرها استفاده کرد و تنها برای رویدادهای تعریف شده در سیستم حی کوئری که همان رویدادهای HTML استاندارد هستند، می‌توان استفاده کرد.

ایحاد یک To-Do List

بییایید بعد از این‌همه درسی که یاد گرفتیم، یک پروژه‌ای را در کنار هم انجام دهیم.
To-Do List قابلیت این را خواهد داشت تا آیتم‌های جدیدی را به لیست به صورت داینامیک اضافه و همچنین آیتم‌هایی را حذف کند.

خب همانطور که می‌بینید، یک Button ای با نام Add تعریف کرده‌ایم تا با استفاده از آن، آیتم جدیدی را به لیست خود اضافه کنیم. همچنین قرار است نام آیتم جدید را از المنت input ای که قرار داده‌ایم بگیریم. حالا بیایید رویداد کلیک را برای این دکمه، مدیریت کنیم:

در داخل handler function:

  1. مقدار را از input می‌گیریم.
  2. بررسی می‌کنیم که اگر مقدار خالی نبود، عملیات اضافه کردن آیتم را انجام دهد تا آیتم خالی به لیست اضافه نشود.
  3. یک المنت li یا آیتم لیست ایجاد می‌کنیم.
  4. یک دکمه هم به داخل این آیتم اضافه می‌کنیم که قرار است وظیفه‌ی حذف کردن را داشته باشد.
  5. این آیتم ایجاد شده را به لیست اضافه می‌کنیم.
  6. مقدار input را خالی می‌کنیم، چرا که آیتم اضافه شد.

حالا بیایید نحوه‌ی حذف شدن را مدیریت کنیم، یعنی باید رویداد کلیک دکمه‌هایی که کلاس rem دارد را مدیریت کنیم.

به همین سادگی، داخل handler function می‌گوییم که پدر این المنت را پاک کند! پدر المنتِ دکمه هم که همان li ایجاد شده است.

نکته: اما اجازه دهید! کد بالا را کجا باید بنویسیم؟! خب زمانی که هنوز آیتمی در لیست نباشد، کدبالا برای چه چیزی اجرا خواهد شد؟!
پس می‌توانیم رویداد کلیک دکمه‌ی Add را به صورت زیر کامل کنیم:

بعد از اضافه شدن، رویداد کلیک دکمه‌ی حذف را نیز اعمال می‌کنیم. البته این‌جا برای همه‌ی rem ها از اول این رویداد تعریف می‌شود که در مواقع زیاد شدن آیتم‌های لیست، اصلا بهینه نیست و می‌توان برای هر دکمه، آیدی اختصاصی تولید کرد و از آن آیدی، برای اعمال رویداد استفاده نمود! البته این را به عهده‌ی خودتان واگذار می‌کنم.

درس بعدیدرس قبلی
تبلیغات
0
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس و دانشجوی ارشد رشته شبیه‌ساز هوشمند - در حال نوشتن یه رمان (اگه خدا بخواد و تموم شه ?)

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه