روی اقدام کلیک کنید. رویدادها و گره های DOM

در چند سال گذشته شاهد بوده ایم توسعه سریعزبان های توسعه رابط های خارجیو به خصوص HTML با مشخصات جدید در HTML5 و همچنین نسخه های CSS 3 با بسیاری از ویژگی های جدید.

اکنون ما این فرصت را داریم که کارهای جالب بسیاری را انجام دهیم که قبلاً بدون آن انجام نمی شد کمک جاوا اسکریپتو تصاویر، از جمله گوشه های گرد، درجه بندی، قالب های تطبیقی، شبکه ها، شفافیت رنگ و خیلی، خیلی بیشتر.

بسیاری از مردم توانایی مدیریت رویدادهای کلیک در CSS را از دست دادند. در واقع، بسیاری از مردم فکر می کنند که ما به این گزینه نیاز نداریم زیرا تعامل بیشتر یک عملکرد جاوا اسکریپت است. در اصل، همه چیز در اینجا واضح است، احتمالاً استفاده از جاوا اسکریپت برای ساده ترین رویدادهای کلیکی چندان راحت نیست.

در هر صورت، امروزه CSS هیچ کدام را در اختیار ما قرار نمی دهد روش های رسمیرویدادهای کلیک را در CSS کنترل کنید. اما ترفندهای بسیار جالبی وجود دارد که می‌توانیم از آن‌ها برای «تشخیص» کلیک‌ها (کلیک‌ها) فقط با کد CSS و بدون استفاده از جاوا اسکریپت استفاده کنیم و این همان چیزی است که امروز در مورد آن صحبت خواهیم کرد.

سلب مسئولیت

این مقاله قصد دارد در مورد توانایی کنترل رویدادهای کلیک با CSS به شما بگوید. این برای استفاده در پروژه های جدی کاملاً مناسب نیست. لطفاً توجه داشته باشید که کل این مقاله چیزی بیش از یک آزمایش نیست و به هیچ وجه راهنمای مدیریت رویدادهای کلیک در وب سایت یا برنامه شما نیست.

علاوه بر این، برخی از تکنیک های ارائه شده به خوبی در مرورگرها پشتیبانی نمی شوند، به این معنی که در این مقاله فقط می خواهیم نشان دهیم که چگونه می توانید دامنه CSS را گسترش دهید.

هک با چک باکس

چیز شگفت انگیزی! ما مطمئن هستیم که همه شما قبلاً در مورد هک چک باکس شنیده اید. این احتمالاً رایج ترین راه برای مدیریت رویدادهای کلیک در CSS است. این بر اساس ... چک باکس است.

مزیت چک باکس باینری بودن آن است. یا برجسته شده یا نیست. و هیچ راهی برای برجسته کردن چیزی "نیمه" یا چیزی شبیه به آن وجود ندارد. به همین دلیل است که هک چک باکس کاملاً است راه قابل اعتمادشلیک رویدادهای کلیک در CSS. بیایید یک مثال بزنیم.

چگونه کار می کند

کد HTML

کد CSS

تغییر کند
رنگ سیاه؛
}

رنگ: قرمز؛
}
همانطور که می بینید، بر اساس :checked pseudo-class و انتخابگر اصلی خواهر و برادر ~ است. لطفاً توجه داشته باشید که با انتخابگر + خواهر و برادر مجاور نیز کار می کند. به طور کلی، به این صورت است: "اگر کادر انتخاب شده است، پس موارد زیربا class.to-be-change قرمز خواهد بود».

بنابراین، چک باکس واقعا جذاب نیست، اما می توانید به راحتی آن را با مخفی کردن خود چک باکس و چسباندن یک برچسب به آن تزئین کنید. چیزی شبیه به زیر:

مرا کلیک کن!

من "قرمز می شوم!" افسانه می شود... صبر کن...

بنابراین ما چک باکس را پنهان می کنیم و از یک برچسب برای فعال کردن رویداد کلیک استفاده می کنیم.

ورودی (
موقعیت: مطلق;
بالا: -9999px;
سمت چپ: -9999px;
}

برچسب(
display:block;
پس زمینه: #08C;
padding: 5px
حاشیه: 1px جامد rgba(0,0,0,.1);
شعاع حاشیه: 2 پیکسل
رنگ سفید؛
فونت-وزن: پررنگ;
}

ورودی: بررسی شده ~ .to-be-change (
رنگ: قرمز؛
}
بنابراین، شما باید با چیزی شبیه به یک دکمه که فرآیند تغییر رنگ عنصر پاراگراف را شروع می کند، خاتمه دهید. باحال نیست؟ با کلیک مجدد روی دکمه، رنگ به مشکی برمی گردد.

(توجه داشته باشید که وجود دارد امکانات مختلفمخفی کردن چک باکس، و محبوب‌ترین آنها display:none است.)

مزایا و معایب

مزایای:

* باینری (انتخاب شده یا انتخاب نشده)
* کلیک مکرر به شما امکان بازگشت را می دهد محل شروع
* به شما امکان می دهد دسته ای از رویدادهای کلیک را اعمال کنید (اگر اولین چک باکس و چک باکس دوم انتخاب شده باشد، می توانید کارهای زیر را انجام دهید).

معایب:

* عناصر باید عنصر والد یکسانی را به اشتراک بگذارند (برادر و برادر)
* به کد HTML اضافی (عنصر ورودی، برچسب و غیره) نیاز دارد.
*دو ترفند اضافی لازم است تا این روش کارساز باشد مرورگرهای موبایل(برای این کار باید مقاله زیر را بخوانید)

روش: هدف

روش دیگری به نام "شبیه سازی" یک رویداد کلیک در CSS با استفاده از شبه کلاس :target وجود دارد. این شبه کلاس بسیار شبیه به :hover است.

رویداد ویژه شبه کلاس :target به چیزی بستگی دارد که ما آن را "شناسه قطعه" می نامیم. به زبان ساده، این شبه کلاس به یک هشتگ اشاره دارد که گاهی اوقات در انتهای URL می بینید. تطابق زمانی رخ می دهد که هشتگ و شناسه مورد یکسان باشند.

چگونه کار می کند

کد HTML

مرا کلیک کن!

من "قرمز می شوم!" افسانه می شود... صبر کن...

کد CSS

تغییر کند
رنگ سیاه؛
}

قابل تغییر: هدف (
رنگ: قرمز؛
}
وقتی روی لینک (href="#id") کلیک می‌کنید، URL تغییر می‌کند و به انکر #id در صفحه می‌روید. در این مرحله، عنصر تعیین شده توسط شناسه داده شده را می توان با استفاده از شبه کلاس :target مشخص کرد.

مزایا و معایب

مزایای:

* بسیار css ساده
* عالی برای برجسته کردن بخش ها

معایب:

* سردرگمی تاریخچه مرورگر
* یک پرش صفحه (هنگام جابجایی به لنگر) وجود دارد
* تگ لنگر یا هک URL برای فعال کردن هشتگ مورد نیاز است
* فقط روی یک عنصر کار می کند (زیرا شناسه ها همیشه منحصر به فرد هستند)
* هیچ راهی برای بازگشت به موقعیت اصلی بدون استفاده از هشتگ، پیوند یا هک URL دیگر وجود ندارد.

پشتیبانی از مرورگر عالی نیست، اما آنقدرها هم بد نیست. همه مرورگرهای مدرنپشتیبانی از این رویکرد، به جز (IE 6-8). با شروع از IE9، پشتیبانی پایدار است.

روش: تمرکز

بیایید راه دیگری را با استفاده از کلاس شبه بررسی کنیم، این بار :focus خواهد بود. در اینجا ماهیت تقریباً یکسان است، با این تفاوت که نیازی به تغییر URL نیست. هدف این روش متمرکز کردن توجه کاربر بر روی یک عنصر خاص است.

هنگامی که در یک صفحه وب هستید، می توانید برای پیمایش روی برگه ها کلیک کنید عناصر مختلف. این هنگام پر کردن فرم ها بسیار راحت است - می توانید بدون استفاده از ماوس از یک فیلد به فیلد دیگر حرکت کنید. همچنین به افراد کم بینا کمک می کند تا در سایت حرکت کنند.

مهم است که توجه داشته باشید که شما فقط می توانید بر روی برخی از عناصر، از جمله پیوندها، فیلدهای ورودی، و نه بر روی برخی دیگر (پاراگراف ها، بخش ها و بسیاری دیگر) تمرکز کنید. در واقع، می توانید روی آنها نیز تمرکز کنید، اما باید یک ویژگی tabindex با مقدار عددی اضافه کنید.

چگونه کار می کند

کد HTML

مرا کلیک کن!

من "قرمز می شوم!" افسانه می شود... صبر کن...

کد CSS

Span:focus ~ .to-be-change (
رنگ: قرمز؛
}
بنابراین، وقتی روی یک عنصر span کلیک می‌کنید، یا با یک کلید تب حرکت می‌کنید، مرورگر روی عنصری تمرکز می‌کند که با کلاس شبه :focus مطابقت دارد. انتخابگر خواهر و برادر مجاور بقیه کارها را انجام خواهد داد. خیلی ساده است، درست است؟ اگر تمایلی به پرداختن به tabindex ندارید، می توانید فقط از یک پیوند با # href استفاده کنید. همه چیز کار خواهد کرد.

مزایا و معایب

مزایای:

* کد CSS و HTML بسیار ساده
* عالی برای ناوبری یا موارد مشابه

معایب:

* به عنصری نیاز دارد که امکان فوکوس را فراهم کند یا ویژگی tabindex
* شبه عنصر فقط زمانی مطابقت دارد که عنصر متمرکز باشد (به این معنی که اگر هر جای دیگری کلیک کنید همه چیز به هم می‌خورد).

هک با انتقال

این احتمالاً یکی از باورنکردنی‌ترین راه‌ها برای مدیریت رویدادهای کلیک در CSS است. به طور جدی، این دیوانه است. این تکنیک توسط Joel Besada ابداع شد و همیشه یکی از ترفندهای CSS مورد علاقه ما بوده است.

نکته اصلی این است که سبک CSS را در انتقال CSS قرار دهید. بله، درست خواندید، در انتقال CSS. در واقع، ایده بسیار ساده است. این مبتنی بر اعمال یک تاخیر شبه بی نهایت در تغییر است که از بازگشت به مقدار اولیه جلوگیری می کند. همه چیز گیج کننده به نظر می رسد، اما در واقع بسیار ساده است. لطفا به کد نگاه کنید.

چگونه کار می کند

کد HTML

مرا کلیک کن!

من "قرمز می شوم!" افسانه می شود... صبر کن...

کد CSS

تغییر کند
انتقال: همه 0s 9999999s;
}

span:active ~ .to-be-change (
انتقال: همه 0 ها
رنگ: قرمز؛
}
ماهیت اولین اطلاعیه این است که تغییرات را تقریباً 116 روز به تاخیر بیندازیم، که به ما امکان می دهد مطمئن شویم که تغییرات به محض اعمال باقی می مانند. آنها بی نهایت نیستند، اما به نظر می رسد، اینطور نیست؟

اما ما نمی خواهیم تغییرات 116 روز پس از کلیک اعمال شود، می خواهیم همه چیز بلافاصله اتفاق بیفتد! بنابراین در اینجا باید تاخیر در لحظه کلیک (شبه کلاس: فعال) را بازنویسی کنیم تا تغییرات اعمال شود. سپس، هنگامی که کلیک ساخته شده است، قدیمی است پارامتر انتقالبازگردانده می شود و پارامتر تاخیر را به 9999999 برمی گرداند که از بازگشت به موقعیت اصلی جلوگیری می کند.

مزایا و معایب

مزایای:

* ایده فوق العاده هوشمندانه
* صرفه جویی می کند مقدار مورد نظرهنگامی که دکمه آزاد می شود، حتی اگر انتقال هنوز تکمیل نشده باشد (به زیر مراجعه کنید)

همانطور که جوئل بیسادا بیان کرد:

نکته جالب اینجاست که می‌توانید انتقال را تا نیمه تمام کنید و پارامتر همان مقداری را که در لحظه خاص انتقال داشت حفظ می‌کند. به عنوان مثال، فرض کنید یک انتقال کدورت خطی از 1 به 0 در 2 ثانیه داریم، اما آن را فقط برای 1 ثانیه ادامه می دهیم. یعنی پارامتر opacity باید روی 0.5 متوقف شود، زیرا تاخیر اجازه نمی دهد پارامتر به عقب برگردد. اگر اکنون ترانزیشن را دوباره با کدورت اجرا کنیم، به جای اینکه از ابتدا بازی کند، از 0.5 ادامه خواهد یافت."

معایب:

* پشتیبانی نه چندان خوب از مرورگر (در IE9 و Opera Mini پشتیبانی نمی شود)
* فقط با مقادیری کار می کند که اجازه انتقال را می دهد
* هیچ راهی برای بازگشت به مقدار اولیه وجود ندارد
* در واقع، اگر صبر کنید تا 116 روز بگذرد، انتقال بی نهایت نیست.

در نتیجه

بنابراین، امروز به نوعی می‌توانیم کلیک‌ها را با استفاده از CSS تعریف کنیم. یعنی ما این فرصت را داریم هرچند که بیشتر شبیه هک است. برخی از روش ها برای موقعیت های خاص بهتر از سایرین مناسب هستند، اما به طور کلی، استفاده از آن در یک پروژه واقعی به سختی ارزش دارد.

تب اتکینز جونیور چند ماه قبل. یک پیشنهاد کامل در مورد موقعیت های سوئیچ CSS نوشته شده است. می توانید نگاهی به آثار او بیندازید:

وضعیت های تغییر وضعیت: هیچکدام | چسبنده؟ | بی نهایت (ابتدایی: هیچ)
toggle-group: هیچ | (ابتدایی: هیچکدام)
toggle-share: هیچ | # (ابتدایی: هیچکدام)
تغییر حالت اولیه: (ابتدایی: 1)
…جایی که:

* وضعیت ها را تغییر دهیدنشان می دهد عملکرد اساسی، که به شما امکان می دهد عملکرد سوئیچینگ را فعال یا غیرفعال کنید. هیچ به معنای موقعیت غیر فعال است، 2 یا بیشتر مسئول هستند مقررات مختلف.

* تغییر گروهعملکرد یک دکمه رادیویی را اجرا می کند. اگر روی عنصر toggle-group with کلیک کنید تنظیم پارامتربه غیر از هیچکدام، همه عناصری که گروه تغییر یکسانی دارند به طور خودکار در موقعیت اول (خاموش) تنظیم می شوند.

* اشتراک گذاریعملکرد میانبر را پیاده سازی می کند. وقتی روی عنصری با قابلیت اشتراک گذاری کلیک می کنید، به گونه ای عمل می کند که گویی روی تمام عناصری که به آن اشاره می کند کلیک کرده اید.

* تغییر حالت اولیهموقعیت اولیه سوئیچ را تنظیم می کند.

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

بنابراین ما دوباره به جاوا اسکریپت برگشتیم. این احتمالا بهترین راهاگر می خواهید قابلیت اطمینان و انسجام داشته باشید. با این حال، اگر می خواهید از توسعه چیزی با "کد CSS خالص" لذت ببرید، مقاله ما قطعا برای شما مفید خواهد بود.

همچنین می‌خواهم اشاره کنم که کریس کویر از CSS-Tricks دو سال پیش در مورد مدیریت دوبار کلیک کنیدبا استفاده از CSS شاید اطلاعات دیگر مرتبط نباشد، اما هنوز هم بسیار جالب خواهد بود که یکدیگر را بشناسید.

در هر صورت، از شما برای خواندن مقاله متشکرم! لطفاً فراموش نکنید و با خیال راحت نتایج آزمایشات خود را به اشتراک بگذارید.

توجه! شما اجازه مشاهده متن مخفی را ندارید.

در عرض چند سالهای اخیرگسترش خیره کننده ای از زبان های برنامه های کاربردی وب، به ویژه HTML5 و CSS3 وجود دارد.

اکنون می‌توانید بسیاری از عملیات‌هایی را که قبلاً بدون استفاده از جاوا اسکریپت و تصاویر غیرقابل تصور بودند انجام دهید، به عنوان مثال، گوشه های گرد، الگوهای تطبیقی، شبکه های مدولار, رنگ های شفافو خیلی بیشتر.

اما همیشه فاقد توانایی اداره رویداد بود کلیکبا استفاده از CSS برخی از کارشناسان معتقدند که این گزینه نباید باشد، زیرا تعامل تعاملی کاربر یک زمینه عمل برای جاوا اسکریپت است. استدلال آنها منطقی است، اما با استفاده از جاوا اسکریپتحتی برای کلیک های ساده خسته کننده است.

در حال حاضر هیچ رسمی وجود ندارد ابزارهای CSSبرای رسیدگی به این رویداد کلیک. با این حال، راه‌هایی وجود دارد که می‌توانید برای «تشخیص» کلیک فقط با CSS بدون جاوا اسکریپت استفاده کنید.

توجه داشته باشید

روش های توصیف شده برای " زندگی واقعی". مواد درسی باید به عنوان پایه ای برای آزمایش در نظر گرفته شود. به خصوص که برخی از روش ها در مرورگرها پشتیبانی ضعیفی دارند. هدف از درس لمس محدودیت های امکانات CSS است.

با استفاده از چک باکس

احتمالا قبلاً با این روش برخورد کرده اید. این محبوب ترین روش برای رسیدگی به یک رویداد است. کلیکبا استفاده از CSS

این روش مبتنی بر استفاده از یک چک باکس است. این عنصریک جوهر دوتایی دارد و فقط می تواند در یکی از دو حالت باشد. بنابراین این روشیک روش کاملاً قابل اعتماد برای رسیدگی به رویدادها است کلیکدر CSS

قابل تغییر (رنگ: سیاه؛ ) ورودی: بررسی شده ~. برای تغییر (رنگ: قرمز؛ )

این روش مبتنی بر استفاده از یک کلاس شبه است :بررسی شدو انتخابگر ~ . توجه داشته باشید که با انتخابگر + نیز کار خواهد کرد. ماهیت روش این است که "اگر چک باکس علامت زده شود، عناصر زیر با کلاس .to-be-change قرمز خواهند بود".

چک باکس خیلی جذاب به نظر نمی رسد. اما شما می توانید انجام دهید ظاهربا پنهان کردن چک باکس و چسباندن یک برچسب به آن جالب تر است. یه چیزی شبیه اون:

بنابراین ما چک باکس را پنهان می کنیم و از برچسب برای پاسخ به رویداد استفاده می کنیم کلیک:

ورودی ( موقعیت: مطلق؛ بالا: -9999 پیکسل؛ سمت چپ: -9999 پیکسل؛ ) برچسب (نمایش: بلوک؛ پس‌زمینه: #08C؛ بالشتک: 5 پیکسل؛ حاشیه: 1 پیکسل rgba جامد (0,0,0,.1)؛ حاشیه- شعاع: 2px؛ رنگ: سفید؛ وزن قلم: پررنگ؛ ) ورودی: علامت زده شده ~ .to-be-change (رنگ: قرمز؛ )

ما یک دکمه داریم که با کلیک روی آن رنگ متن در پاراگراف تغییر می کند. با فشار دادن مجدد دکمه، رنگ به عقب تغییر می کند.

(توجه داشته باشید که وجود دارد روش های مختلفبرای مخفی کردن چک باکس واضح است که از display:none استفاده می کند.)

طرفداران

• باینری، فقط دو حالت وجود دارد - علامت زده یا بدون علامت
• فشار دادن مجدد حالت را بازیابی می کند ( این آیتمممکن است منفی باشد)
• امکان پردازش را فراهم می کند رویدادهای مرتبط کلیک(اگر چک باکس اول و چک باکس دوم تیک خورده باشد، عمل زیر را انجام می دهیم)

موارد منفی

• عناصر باید یک جد مشترک داشته باشند
• اضافی نیاز دارد نشانه گذاری HTML(ورودی، برچسب و غیره)
• ضروری اقدامات اضافیبرای کار بر روی مرورگرهای تلفن همراه

روش با :target

راه دیگری با استفاده از کلاس شبه وجود دارد :هدف. این شبه کلاس شبیه به شبه کلاس است : شناورکه فقط شرایط خاصی را برآورده می کند.

رویداد ویژه برای شبه کلاس :هدفبه "شناسه قطعه" بستگی دارد. به زبان ساده، این شبه کلاس به هشتگی اشاره دارد که در انتهای URL قرار دارد و زمانی فعال می شود که هشتگ و شناسه مطابقت داشته باشند.

قابل تغییر (رنگ: سیاه و سفید؛ ) . قابل تغییر: هدف (رنگ: قرمز؛ )

طرفداران

• کد CSS ساده
• برای برجسته کردن بخش ها عالی است

موارد منفی

• زباله در تاریخچه مرورگر
• پیمایش صفحه رخ می دهد
• برای گنجاندن هشتگ به تگ پیوند یا عملیات URL نیاز دارد
• فقط یک عنصر می تواند تحت تأثیر قرار گیرد (زیرا شناسه منحصر به فرد است)
• هیچ راهی برای بازگشت به حالت اولیه بدون استفاده از هشتگ، پیوند یا عملیات URL دیگر وجود ندارد

روش با: تمرکز

بیایید بررسی خود را با استفاده از یک کلاس شبه دیگر ادامه دهیم - :تمرکز. ایده تقریباً مشابه مورد قبلی است، با این تفاوت که انتظار نمی رود URL تغییر کند. در اینجا ما به تمرکز ورودی روی یک عنصر خاص تکیه می کنیم.

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

مهم است که برخی از عناصر بتوانند تمرکز ورودی را دریافت کنند، مانند پیوندها، پاراگراف ها، فیلدهای ورودی و بسیاری دیگر. فقط باید ویژگی tabindex را روی آنها تنظیم کنید مقدار عددیبرای آنها.

گستره: فوکوس ~. قابل تغییر (رنگ: قرمز؛ )

هنگامی که یک عنصر span کلیک می‌شود یا روی آن تب می‌شود، فوکوس ورودی را دریافت می‌کند و با کلاس شبه :focus مطابقت دارد. انتخابگر همسایه بقیه کارها را انجام می دهد. اگر به دلایلی نیازی به استفاده از ویژگی tabindex ندارید، می توانید به سادگی پیوندی با آدرس # تنظیم کنید.

طرفداران

• کد CSS و HTML بسیار ساده
• ناوبری عالی

موارد منفی

• به یک عنصر با تمرکز یا یک ویژگی نیاز دارد tabindex
• تطابق فقط زمانی رخ می دهد که فوکوس ورودی وجود داشته باشد (کلیک کردن در جای دیگری در صفحه الگوریتم کار را مخلوط می کند)

روش انتقال

این روش احتمالاً کثیف ترین راه برای رسیدگی به یک رویداد است. کلیکدر CSS

ایده ذخیره سازی است سبک cssدر یک انتقال CSS ما از یک تاخیر شبه بی نهایت برای جلوگیری از بازگشت استفاده می کنیم حالت اولیه. پیچیده به نظر می رسد، اما در واقع اجرای آن بسیار آسان است.

قابل تغییر ( انتقال: همه 0s 9999999s؛ ) span:active ~ .to-be-changed ( انتقال: همه 0s؛ رنگ: قرمز؛ )

تاخیر تقریباً 116 روز است. نه بی نهایت، بلکه نوعی شباهت آن به شرایط ماست. بنابراین تغییرات ذخیره شده و دیگر بازگشتی به حالت اولیه وجود ندارد.

طرفداران

• ساده و شیک
• وضعیت ذخیره می شود حتی اگر انتقال به پایان نرسیده باشد

موارد منفی

• پشتیبانی ضعیف از مرورگر (نه در IE9 و Opera Mini)
• فقط با مقادیری کار می کند که می توانند با انتقال استفاده شوند
• هیچ راهی برای بازگشت به حالت اولیه وجود ندارد
• انتظار بی نهایت واقعی وجود ندارد (اگر پروژه شما شامل انتظار بیش از 116 روز باشد)

درود به همه کسانی که مایل به درک عملکرد onclick (). مقاله امروز به شما کمک می کند تا یک بار و برای همیشه اصل عملکرد این کنترل کننده رویداد و جداسازی آن را درک کنید مثال خاصروی جاوا اسکریپت کلیک کنید یا بهتر است مثال بزنید.

من چندین راه برای کار با این ابزار را به شما نشان می دهم، مزایا و معایب آنها را توضیح می دهم و همچنین نحوه عملکرد jQuery با رویدادها را شرح می دهم. و حالا بیایید به تحلیل مطالب بپردازیم!

تخصیص کنترل کننده رویداد

بیایید با بخش نظری سوال شروع کنیم. تقریباً همه افراد در صفحات خود اسکریپت ها را پردازش می کنند. و معمولاً اینها رویدادهای متفاوتی هستند. برای اینکه همه این رویدادهای برنامه ریزی شده کار کنند، باید یک هندلر برای آنها نصب کنید.

طبق قوانین نوشتن، همه گرداننده ها عبارت "on + event name" را در نام خود دارند که در آن رعایت می شود onclick(). بسته به رویداد انتخاب شده، پردازش در نتیجه اقدامات مختلف رخ می دهد. در مورد ما، هنگام استفاده onclick()فقط رویدادهایی که با کلیک چپ ماوس ایجاد شده اند اجرا می شوند.

روش های مختلف برای اختصاص یک کنترل کننده رویداد

تا به امروز، چندین گزینه برای معرفی یک کنترل کننده برخی یا برخی رویدادها در کد وجود دارد.

استفاده از رویدادهای ساده

بیا شروع کنیم با گزینه ساده، که شامل تزریق onclick () به نشانه گذاری خود سند html است. به نظر می رسد این است:

همانطور که می بینید، وقتی با دکمه سمت چپ ماوس روی دکمه کلیک می کنید، پیام “Click-click!” ظاهر می شود. من می خواهم توجه شما را به یک جزئیات کوچک اما مهم جلب کنم. داخل هشدارفقط قابل استفاده است نقل قول های تک (‘’).

همچنین در این موردمیتواند مورد استفاده قرار گیرد کلمه کلیدی این. به عنصر فعلی اشاره می کند و تمام روش های موجود را برای آن فراهم می کند.

روی من کلیک کنید

این خط کد یک دکمه با متن "Click me" ایجاد می کند. پس از کلیک بر روی صفحه پیامی را مشاهده خواهید کرد: «کلیک کنید!» که جایگزین نام کوچک دکمه می شود.

این روش بدون شک بسیار ساده است. با این حال، فقط برای کارهای مشابه مناسب است، یعنی. نمایش پیام ها یا اجرای دستورات ساده

اگر لازم است از ساختارهای چرخه ای استفاده کنید، از برچسب ها و غیره استفاده کنید، سپس این روشمناسب نیست. درجه خوانایی کد را کاهش می دهد و همچنین آن را دست و پا گیر و شلخته می کند.

در این مورد، شما باید به توابع متوسل شوید.

کار با توابع

توابع به شما امکان جداسازی را می دهند کد مورد نظردر یک بلوک جداگانه، که بعداً می تواند از طریق یک کنترل کننده رویداد در فراخوانی شود.

به عنوان مثال، من یک برنامه را پیوست کردم تا عدد به دست آمده را در درجات مختلف به کاربر نمایش دهد که از 1 شروع می شود و به 5 ختم می شود. برای این من یک تابع ایجاد کردم countPow()، که می توانید پارامترها را به آن منتقل کنید. در برنامه من، کاربر باید یک عدد را به عنوان متغیر تابع وارد کند.

بنابراین، از طریق هندلر مرتبط با تابع نام‌گذاری شده در بالا، محاسبات انجام شده و روی صفحه نمایش داده می‌شوند.

این روش اغلب در توسعه استفاده می شود. با این حال، محبوب ترین نیست، زیرا همیشه راحت نیست که رویدادها را به این طریق پیوند دهید. گاهی اوقات، برای حل برخی از مشکلات، بهترین گزینه ارائه اتصال انعطاف پذیر اشیا به رویدادها با استفاده از ویژگی های آنها است.

ویژگی های عنصر DOM

برای کسانی که نمی دانند، DOM مخفف کلمه است "مدل شیء سند"("مدل شیء سند"). این ابزار اصلی برای انجام تغییرات و دستکاری های مختلف بر روی عناصر است.

از آنجایی که DOM یک درخت سلسله مراتبی است، ویژگی ها و روش های خاصی از اشیاء صفحه را می توان با پیشروی در امتداد شاخه های خاص قابل دسترسی بود.

به عنوان مثال، تصمیم گرفتم رنگ پس زمینه را از پیش فرض به آبی تغییر دهم. برای این کار از زنجیره عبور کردم document.body.style.backgroundColor.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

با استفاده از کتابخانه جی کوئری

با انتشار نور، دستورات، ویژگی ها و روش های اضافی زیادی ظاهر شد که کد نوشته شده را بسیار ساده و کوتاه می کند. اغلب، توسعه‌دهندگان از ویژگی‌ها برای دریافت یک عنصر خاص با شناسه آن (document.getElementById (iden))، کلاس (element.getElementsByClassName (className))، برچسب (elem.getElementsByTagName (برچسب)) یا نام (document.getElementsByName) استفاده می‌کنند. )) .

برای درک آنچه در خطر است، مثال زیر را تجزیه و تحلیل کنید.

با دقت! اگر روی دکمه کلیک کنید، تغییراتی در این محتوا ایجاد می شود.

فرصت کن، روی من کلیک کن!

09/25/16 10.3K

برخی از برنامه های رویداد جاوا اسکریپت مستقیماً با ورودی کاربر کار می کنند. لحظه وقوع و ترتیب این گونه فعل و انفعالات را نمی توان از قبل پیش بینی کرد.

گردانندگان رویداد

شما می توانید با خواندن مداوم حالت آن به فشار دادن کلید پاسخ دهید تا لحظه فشار دادن کلید را قبل از رها کردن مجدد آن متوجه شوید.

به این صورت است که ورودی داده در ماشین‌های اولیه مدیریت می‌شود. پیشرفته تر، تشخیص ضربه زدن به کلید و صف بندی آن است. سپس برنامه می تواند به صورت دوره ای صف را برای رویدادهای جدید بررسی کند و به آنچه در آنجا پیدا می کند واکنش نشان دهد. در این مورد، برنامه باید به خاطر داشته باشد که صف را اسکن کند و این کار را اغلب انجام دهد.

از زمانی که کلید فشار داده می شود تا زمانی که برنامه این رویداد را تشخیص دهد، در واقع به درخواست ها پاسخ نمی دهد. این رویکرد را نظرسنجی (نظرسنجی) می نامند.

اکثر برنامه نویسان سعی می کنند در صورت امکان از آن اجتناب کنند.

بهترین راه پیاده‌سازی سیستمی است که به کد اجازه می‌دهد به رویدادها در زمان وقوع پاسخ دهد. مرورگرها آن را با ارائه توانایی ثبت توابع کنترل کننده برای رویدادهای خاص جاوا اسکریپت پیاده سازی می کنند:

روی این سند کلیک کنید تا کنترل کننده فعال شود.

تابع addEventListener به گونه ای ثبت می شود که آرگومان دوم آن هر زمان که رویداد توصیف شده توسط آرگومان اول رخ دهد فراخوانی می شود.

رویدادها و گره های DOM

هر کنترل کننده رویداد مرورگر با یک زمینه ثبت می شود. هنگامی که تابع addEventListener فراخوانی می شود، به عنوان یک متد در کل پنجره فراخوانی می شود، زیرا در مرورگر، محدوده جهانی معادل شی پنجره است. هر عنصر DOM متد addEventListener خود را دارد که به شما امکان می‌دهد به رویدادهای آن عنصر گوش دهید:

روی من کلیک کنید

اینجا هیچ کنترل کننده ای وجود ندارد.

در این مثال، هندلر به گره دکمه متصل است. رویدادهای ماوس جاوا اسکریپت کنترل کننده را فعال می کنند، اما کلیک ها در بقیه سند این کار را نمی کنند.

با تنظیم ویژگی onclick گره، همان نتیجه را می گیریم. اما یک گره فقط یک ویژگی onclick دارد، بنابراین شما می توانید فقط یک کنترلر در هر گره ثبت کنید. متد addEventListener به شما امکان می دهد هر تعداد شنونده را اضافه کنید. بنابراین ما در برابر تعویض تصادفی یک گرداننده که قبلاً ثبت شده است بیمه هستیم.

متد removeEventListener با همان آرگومان های addEventListener فراخوانی می شود. کنترل کننده را حذف می کند:

دکمه یکبار مصرف

برای لغو یک تابع کنترل کننده، به آن یک نام می دهیم (به عنوان مثال، یک بار). به این ترتیب ما آن را به addEventListener و removeEventListener ارسال می کنیم.

اشیاء رویداد

اگرچه در مثال‌های بالا به آن اشاره نکردیم، یک آرگومان به تابع کنترل‌کننده رویداد جاوا اسکریپت ارسال می‌شود: شی رویداد. اطلاعات تکمیلی در مورد این رویداد ارائه می دهد. به عنوان مثال، اگر بخواهیم بدانیم کدام دکمه ماوس فشار داده شده است، باید مقدار کدام ویژگی شی رویداد را بدست آوریم:

با هر دکمه ماوس روی من کلیک کنید

اطلاعات ذخیره شده در شی بسته به نوع رویداد متفاوت است. ویژگی نوع شی همیشه حاوی رشته ای است که رویداد را شناسایی می کند (به عنوان مثال، " کلیک" یا " ماوس پایین«).

در حال گسترش

کنترل کننده رویداد ( به عنوان مثال رویدادهای لمسی جاوا اسکریپت) ثبت شده برای گره های والد نیز رویدادهایی را که در عناصر فرزند رخ می دهد دریافت خواهند کرد. اگر روی دکمه ای در داخل پاراگراف کلیک شده باشد، کنترل کننده های رویداد پاراگراف نیز یک رویداد کلیک را دریافت خواهند کرد.

رویداد از گره ای که در آن رخ داده است، به گره والد و به ریشه سند منتشر می شود. پس از اینکه همه کنترل کننده های ثبت شده در یک گره خاص به نوبه خود شلیک شدند، کنترل کننده های ثبت شده برای کل پنجره این فرصت را پیدا می کنند که به رویداد پاسخ دهند.

در هر زمان، یک کنترل کننده رویداد می تواند متد stopPropagation را روی شی رویداد فراخوانی کند تا از انتشار بیشتر رویداد جلوگیری کند. این می تواند زمانی مفید باشد که یک دکمه در یک عنصر قابل کلیک دیگر دارید، و نمی خواهید رفتار کلیکی عناصر بیرونی با کلیک روی دکمه فعال شود.

در مثال زیر، ما کنترل کننده ها را ثبت می کنیم. ماوس پایین» هم برای دکمه و هم برای پاراگراف. وقتی کلیک راست کردید ( رویدادهای ماوس جاوا اسکریپت، کنترل کننده متد stopPropagation را فراخوانی می کند که از اجرای کنترل کننده پاراگراف جلوگیری می کند. هنگامی که دکمه با دکمه دیگری از ماوس فشار داده می شود، هر دو کنترل کننده راه اندازی می شوند:

پاراگراف و در آن دکمه.

اکثر اشیاء رویداد دارای یک ویژگی هدف هستند که به گره ای که از آن منشا گرفته اند اشاره می کند. می توانید از این ویژگی برای جلوگیری از مدیریت تصادفی برخی از رویدادهایی که از گره به بالا منتشر می شود استفاده کنید.

همچنین می توانید از هدف رویداد جاوا اسکریپت برای گسترش دامنه یک رویداد از یک نوع خاص استفاده کنید. برای مثال، اگر گره‌ای حاوی فهرست طولانی از دکمه‌ها دارید، راحت‌تر است که کنترل‌کننده یک کلیک را برای گره بیرونی ثبت کنید و از ویژگی هدف برای پیگیری اینکه آیا روی دکمه کلیک شده است یا خیر، به جای ثبت نمونه‌های کنترل‌کننده برای همه دکمه‌ها، استفاده کنید. :

آ ب سی

اقدامات پیش فرض

بسیاری از رویدادها دارای اقدامات پیش فرض مرتبط با آنها هستند. اگر روی یک لینک کلیک کنید، به عنصر هدف پیوند هدایت خواهید شد. اگر روی فلش رو به پایین کلیک کنید، مرورگر صفحه را به پایین اسکرول می کند. اگر راست کلیک کنید، یک منوی زمینه باز می شود.

برای اکثر انواع رویداد، کنترل‌کننده‌های رویداد جاوا اسکریپت قبل از انجام اقدامات پیش‌فرض فراخوانی می‌شوند. اگر نمی‌خواهید رفتار پیش‌فرض اجرا شود، باید متد preventDefault را روی شی رویداد فراخوانی کنید.

از آن برای پیاده سازی میانبرهای صفحه کلید سفارشی یا منوهای زمینه استفاده کنید. یا برای نادیده گرفتن رفتاری که کاربران انتظار دارند. لینک زیر یک لینک است که نمی توان آن را دنبال کرد:

MDN

سعی کنید این کار را انجام ندهید مگر اینکه دلیل خوبی برای انجام آن داشته باشید.

بسته به مرورگر، ممکن است برخی رویدادها ضبط نشوند. برای مثال، در گوگل کروم، میانبر صفحه کلید ( کد کلید رویداد جاوا اسکریپت) برای بستن برگه فعلی ( Ctrl-W یا Command-W) را نمی توان با جاوا اسکریپت تجزیه کرد.

وقایع کلیدی

هنگامی که کاربر کلیدی را روی صفحه کلید فشار می دهد، مرورگر کلید " را اجرا می کند. کلید پایین". وقتی کلید را رها کرد، " keyup«:

با فشار دادن کلید V این صفحه بنفش می شود.

این رویداد همچنین زمانی که کاربر کلیدی را فشار داده و نگه می‌دارد، یا زمانی که کلید پایین نگه داشته می‌شود، فعال می‌شود. به عنوان مثال، اگر می خواهید سرعت یک شخصیت در بازی را با فشار دادن کلید فلش افزایش دهید و با رها کردن کلید فلش دوباره آن را کاهش دهید، باید مراقب باشید که با هر بار فشردن کلید فلش سرعت آن را افزایش ندهید.

مثال قبلی از ویژگی شی کد کلید رویداد جاوا اسکریپت استفاده می کند. تعیین می کند که کدام کلید فشرده یا رها شده است. با این حال، نحوه تبدیل یک کد کلید عددی به یک کلید واقعی همیشه واضح نیست.

کد کاراکتر یونیکد برای خواندن مقادیر کلید حروف و عدد استفاده می شود. با حرف ( با حروف بزرگ) یا شماره ای که روی کلید مشخص شده است. متد charCodeAt برای رشته ها به شما امکان می دهد این مقدار را بدست آورید:

console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

سایر کلیدها دارای کدهای کلیدی کمتر قابل پیش بینی مرتبط با آنها هستند. بهترین راه برای تعیین کد مناسب، آزمایش است. یک کنترل کننده رویداد با فشار کلید ثبت کنید که کدهای کلیدی را که دریافت می کند ضبط می کند و کلید مورد نظر را فشار دهید.

کلیدهایی مانند Shift، Ctrl، Alt رویدادها را مانند کلیدهای معمولی فعال می کنند. اما هنگام ردیابی ترکیب کلیدها، می‌توانید با مشاهده ویژگی‌های صفحه‌کلید و رویدادهای ماوس جاوا اسکریپت، تعیین کنید که آیا آن کلیدها فشار داده می‌شوند: shiftKey، ctrlKey، altKey و metaKey:

برای ادامه، Ctrl-Space را فشار دهید.

مناسبت ها " کلید پایین"و" keyupاطلاعاتی در مورد ضربه زدن کلید واقعی ارائه دهید. اما اگر خود متن ورودی را بخواهیم چه می شود؟ دریافت متن از کدهای کلیدی ناخوشایند است. یک رویداد برای این وجود دارد فشردن کلید"، که بلافاصله پس از آن شلیک می شود" کلید پایین". تا زمانی که کلید فشار داده شود، همراه با "keydown" تکرار می شود. اما فقط برای کلیدهایی که کاراکترها با آنها وارد می شوند.

ویژگی charCode در شی رویداد حاوی کدی است که می تواند به عنوان یک کد کاراکتر یونیکد تفسیر شود. ما می توانیم از تابع String.fromCharCode برای تبدیل این کد به یک رشته کاراکتری استفاده کنیم.

فوکوس ورودی را در این صفحه تنظیم کنید و چیزی تایپ کنید.

گره DOM که رویداد در آن رخ می دهد به این بستگی دارد که هنگام فشار دادن کلید، کدام عنصر دارای تمرکز ورودی بوده است. گره های معمولی نمی توانند فوکوس ورودی داشته باشند ( مگر اینکه ویژگی tabindex را برای آنها تنظیم کنید)، اما عناصری مانند پیوندها، دکمه ها و فیلدهای فرم می توانند.

اگر هیچ عنصر خاصی فوکوس نداشته باشد، گره هدف برای رویدادهای لمسی کلید و جاوا اسکریپت document.body است.

کلیک ماوس

با کلیک بر روی دکمه ماوس، تعدادی رویداد نیز ایجاد می شود. مناسبت ها " ماوس پایین"و" موس" شبیه به " کلید پایین"و" keyup". زمانی که دکمه ماوس فشرده و رها می شود، اجرا می شوند. این رویدادها بر روی گره‌های DOM که هنگام وقوع رویداد روی آن‌ها نگه داشته می‌شوند، مطرح می‌شوند.

برای یک گره مشترک که شامل هر دو کلیک ماوس و انتشار ماوس است، پس از " موس» رویداد فعال می شود « کلیک". به عنوان مثال، اگر دکمه ماوس را روی یک مورد فشار دهید، و سپس مکان نما را به مورد دیگری ببرید و دکمه را رها کنید، رویداد " کلیک' روی عنصری رخ خواهد داد که هر دو مورد را در خود دارد.

اگر دو کلیک نزدیک به هم رخ دهد، " dblclick» (دوبار کلیک کنید). پس از کلیک دوم رخ می دهد. برای به دست آوردن اطلاعات دقیق در مورد مکانی که رویداد ماوس در آن رخ داده است، باید مقدار ویژگی های pageX و pageY را بدست آورید که حاوی مختصات رویداد (بر حسب پیکسل) نسبت به گوشه سمت چپ بالای سند است.

در زیر اجرای یک برنامه ترسیم اولیه است. هر بار که ماوس در سند (زیر مکان نما) کلیک می شود، یک نقطه اضافه می شود:

ویژگی های clientX و clientY مشابه pageX و pageY هستند، اما به قسمت قابل مشاهده سند اشاره دارند. می توان از آنها برای مقایسه مختصات ماوس با مختصات بازگشتی توسط تابع getBoundingClientRect استفاده کرد.

حرکت ماوس

هر بار که ماوس حرکت می کند، " حرکت ماوس' از مجموعه رویدادهای ماوس جاوا اسکریپت. می توان از آن برای ردیابی موقعیت ماوس استفاده کرد. این در هنگام پیاده سازی قابلیت کشیدن و رها کردن عناصر با ماوس استفاده می شود.

در مثال زیر، برنامه یک پانل را نمایش می‌دهد و کنترل‌کننده‌های رویداد را طوری تنظیم می‌کند که با کشیدن پانل باریک‌تر یا بزرگ‌تر شود:

لبه پانل را بکشید تا عرض آن را تغییر دهید:

توجه داشته باشید که کنترل کننده حرکت ماوس' برای کل پنجره ثبت شده است. حتی اگر ماوس در حین تغییر اندازه از پانل خارج شود، باز هم عرض پانل را به روز می کنیم و با رها شدن دکمه ماوس، رویدادهای لمسی جاوا اسکریپت را خاتمه می دهیم.

هنگامی که کاربر دکمه ماوس را رها می کند، باید تغییر اندازه پانل را متوقف کنیم. متأسفانه همه مرورگرها " حرکت ماوس» کدام ملک. یک ویژگی دکمه های استاندارد وجود دارد که اطلاعات مشابهی را ارائه می دهد، اما همچنین در همه مرورگرها پشتیبانی نمی شود. خوشبختانه، همه مرورگرهای اصلی از یک چیز پشتیبانی می کنند: یا دکمه ها یا کدام . تابع buttonPressed در مثال بالا ابتدا سعی می‌کند از ویژگی buttons استفاده کند، و اگر در دسترس نباشد، به کدام یک می‌پرد.

هنگامی که نشانگر ماوس وارد یک گره می شود یا از آن خارج می شود، " ماوس بر" یا " ماوس کردن". می توان از آنها برای ایجاد جلوه های شناور، نمایش عنوان یا تغییر سبک یک عنصر استفاده کرد.

برای ایجاد چنین افکتی، فقط شروع به نمایش آن در هنگام رویداد کافی نیست. ماوس بر"و پس از رویداد خاتمه یابد" ماوس کردن". هنگامی که ماوس از یک گره به یکی از فرزندان خود حرکت می کند، یک رویداد برای گره والد فعال می شود. ماوس کردن". اگرچه نشانگر ماوس از محدوده گره خارج نشده است.

بدتر از همه، این رویدادهای جاوا اسکریپت مانند سایر رویدادها منتشر می شوند. هنگامی که ماوس یکی از گره های فرزند را که یک کنترل کننده برای آن ثبت شده است ترک می کند، " ماوس کردن«.

برای حل این مشکل، می توانید از ویژگی relatedTarget شی رویداد استفاده کنید. در صورت وقوع " ماوس بر' نشان می دهد که کدام عنصر قبلا با ماوس روی آن قرار گرفته است. و در صورت وقوع ماوس کردن» - نشانگر به کدام عنصر حرکت می کند. ما فقط زمانی اثر شناور را تغییر می دهیم که relatedTarget خارج از گره هدف ما باشد.

در این مورد، ما رفتار را تغییر می دهیم زیرا نشانگر ماوس از خارج از گره روی گره قرار گرفته است (یا برعکس):

ماوس خود را روی این قرار دهید پاراگراف.

تابع isInside روابط والد یک گره داده شده یا تا زمانی که به بالای سند برسد (زمانی که گره پوچ است). یا عنصر والد مورد نیاز ما پیدا نمی شود.

همانطور که در مثال زیر نشان داده شده است، ایجاد افکت شناور با شبه انتخابگر CSS:hover بسیار ساده تر است. اما زمانی که افکت شناور شامل چیزی پیچیده تر از تغییر سبک گره هدف می شود، باید از ترفند با استفاده از رویدادها استفاده کنید. ماوس بر"و" ماوس کردن» ( رویدادهای ماوس جاوا اسکریپت):

رویدادها را پیمایش کنید

هر بار که عنصر پیمایش می کند، رویداد اسکرول جاوا اسکریپت روی عنصر فعال می شود. می توان از آن برای پیگیری آنچه هست استفاده کرد این لحظهمشاهده شده توسط کاربر؛ برای غیرفعال کردن انیمیشن خارج از پنجره دید.

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

منو ورق بزن...

با تنظیم موقعیت یا خاصیت ثابت عنصر، نتیجه ای مشابه با setting position:absolute بدست می آوریم. اما به این ترتیب ما همچنین از پیمایش عنصر همراه با بقیه سند جلوگیری می کنیم. در نتیجه، نشانگر پیشرفت به صورت ایستا در گوشه بالا ثابت می شود. داخل آن عنصر دیگری است که اندازه آن با توجه به پیشرفت فعلی تغییر می کند.

هنگام تنظیم عرض از % به عنوان واحد اندازه گیری استفاده می کنیم، نه px، به طوری که اندازه عنصر متناسب با اندازه نوار پیشرفت تغییر می کند.

متغیر جهانی innerHeight شامل ارتفاع پنجره است که باید از کل ارتفاع قابل پیمایش سند کم کنیم. وقتی به پایین سند رسیدید نمی توانید پنجره را به پایین اسکرول کنید. با innerHeight، innerWidth نیز قابل استفاده است. تقسیم صفحهYOffset ( موقعیت فعلی پنجره اسکرول) با حداکثر موقعیت اسکرول مجاز و ضرب در 100، درصد نوار پیشرفت را بدست می آوریم.

فراخوانی preventDefault در رویداد پیمایش جاوا اسکریپت از پیمایش جلوگیری نمی کند. کنترل کننده رویداد فقط پس از انجام پیمایش فراخوانی می شود.

رویدادهای تمرکز ورودی

هنگامی که یک عنصر دارای فوکوس ورودی است، مرورگر کلید " را اجرا می کند. تمرکز". وقتی فوکوس ورودی حذف شد، " تاری«.

این دو رویداد توزیع ندارند. کنترل کننده عنصر والدوقتی عنصر فرزند دارای فوکوس ورودی است، اطلاع داده نمی شود.

مثال زیر راهنمایی برای را نشان می دهد فیلد متنی، که در حال حاضر مورد توجه است:

نام:

سن:

شی پنجره رویدادها را دریافت می کند " تمرکز"و" تاریهنگامی که کاربر یک برگه را هدایت می کند یا از آن خارج می شود، پنجره مرورگری که سند در آن نمایش داده می شود.

بارگذاری رویداد

هنگامی که بارگیری صفحه تمام شد، رویداد جاوا اسکریپت "بار" برای بدنه سند و اشیاء پنجره افزایش می یابد. برای برنامه ریزی اقدامات اولیه که نیاز به بارگیری کل سند دارند استفاده می شود. فراموش نکنید که محتوا

گاهی اوقات لازم است یک ویژگی را که ما برنامه ریزی کرده ایم لغو کنید. این کار با ذخیره مقدار بازگشتی تابع setTimeout و فراخوانی clearTimeout روی آن انجام می شود:

var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); if(Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

تابع cancelAnimationFrame مانند clearTimeout عمل می کند. با مقدار بازگردانده شده توسط requestAnimationFrame فراخوانی می شود تا فریم لغو شود ( اگر هنوز تماس نگرفته است).

مجموعه مشابهی از توابع، setInterval و clearInterval، برای تنظیم یک تایمر استفاده می‌شود که باید یک عمل را هر X میلی‌ثانیه تکرار کند:

تیک var = 0; var clock = setInterval(function() ( console.log("tick", ticks++); if (tick == 10) (clearInterval(clock); console.log("stop."); ) ), 200);

تقسیم کردن

برخی از انواع رویدادها می توانند چندین بار در مدت زمان کوتاهی اجرا شوند ( به عنوان مثال "moemove" و رویداد اسکرول جاوا اسکریپت). هنگام رسیدگی به چنین رویدادهایی، باید مراقب باشید که زیاد طول نکشید، در غیر این صورت کنترل کننده آنقدر طول می کشد تا این عمل را اجرا کند که تعامل با سند کند و ناگهانی می شود.

اگر نیاز به انجام کاری سفارشی در چنین کنترل‌کننده‌ای دارید، می‌توانید از setTimeout استفاده کنید تا مطمئن شوید که خیلی طول نمی‌کشد. این معمولاً به عنوان تقسیم رویداد شناخته می شود. چندین روش مختلف برای خرد کردن وجود دارد.

در مثال اول، می خواهیم زمانی که کاربر در حال تایپ کردن است، کاری انجام دهیم. اما ما نمی خواهیم این کار را بعد از هر رویداد فشار دادن کلید انجام دهیم. وقتی کاربر سریع تایپ می کند، باید منتظر بمانید تا مکث شود. به جای اجرای فوری عمل در کنترل کننده رویداد، یک تاخیر تنظیم می کنیم. تاخیر قبلی را نیز پاک می کنیم ( در صورت وجود). اگر رویدادها در فواصل زمانی کوتاه اتفاق بیفتند ( کمتر از تاخیری که تعیین کردیم، سپس تأخیر از رویداد قبلی لغو می شود:

اینجا چیزی تایپ کنید...

ارسال یک مقدار تعریف نشده به clearTimeout، یا فراخوانی آن در تاخیری که از قبل در حال اجرا است، تاثیری نخواهد داشت. دیگر لازم نیست مراقب زمان تماس باشیم، فقط برای هر رویدادی این کار را انجام می دهیم.

اگر می‌خواهید پاسخ‌ها را با زمان کمی جدا کنید، می‌توانید از سناریوی متفاوتی استفاده کنید. اما در عین حال، آنها باید طی یک سری رویدادها راه اندازی شوند و نه فقط پس از آن. به عنوان مثال، می توانید در پاسخ به رویدادها ارسال کنید " حرکت ماوس» ( رویدادهای ماوس جاوا اسکریپت) مختصات فعلی ماوس، اما فقط هر 250 میلی ثانیه:

نتیجه

کنترل‌کننده‌های رویداد به ما امکان می‌دهند رویدادهایی را شناسایی کرده و به آن‌ها پاسخ دهیم که کنترل مستقیمی روی آن‌ها نداریم. برای ثبت چنین کنترل کننده ای، از متد addEventListener استفاده کنید.

هر رویداد مربوط به نوع خاصی (« کلید پایین«, « تمرکز” و غیره) که آن را شناسایی می کند. بیشتر رویدادها روی یک عنصر DOM خاص اجرا می‌شوند و سپس به گره‌های اصلی عنصر منتشر می‌شوند. این به کنترل کننده های مرتبط با آن عناصر اجازه می دهد تا آنها را پردازش کنند.

هنگامی که یک handler فراخوانی می شود، یک شی رویداد به آن ارسال می شود اطلاعات اضافیدر مورد عمل این شیء همچنین حاوی متدهایی برای توقف انتشار بیشتر رویداد است ( توقف انتشار) یا از مدیریت رویداد توسط مرورگر پیش فرض جلوگیری کنید ( جلوگیری از پیش فرض).

فشار کلید رویدادها را ایجاد می کند " کلید پایین«, « فشردن کلید"و" keyup". کلیک ماوس رویدادها را ایجاد می کند " ماوس پایین«, « موس"و" کلیک". حرکت ماوس - " حرکت ماوس«, « ماوس را وارد کنید"و" ماوس کردن«.

رویداد اسکرول جاوا اسکریپت را می توان با استفاده از " تعریف کرد طومار