توانایی جاوا اسکریپت برای ایجاد پویا صفحات htmlبر سه پایه استوار است. دو مورد از آنها قبلاً در مقالات قبلی مورد بحث قرار گرفته است. و سوم حوادث است.

• مدیریت پنجره های مرورگر با استفاده از شی پنجره.
• مدیریت اشیاء داخل یک پنجره DOM است.
• کد جاوا اسکریپت را روی رویدادها اجرا کنید.

یک رویداد واکنش کامپیوتر به یک اقدام کاربر است. مثلا با t.z. یک رویداد جاوا اسکریپت به فشار دادن دکمه صفحه کلید، حرکت و کلیک کردن دکمه های ماوس و بسته شدن پنجره مرورگر در نظر گرفته می شود. همه رویدادها با t.z. جاوا اسکریپت توسط اسناد و اشیاء مرورگر تولید می شود (مفهومی از "کاربر" وجود ندارد). به عنوان مثال، هنگامی که روی یک پاراگراف کلیک می کنید، رویداد کلیک ماوس توسط یک شی - پاراگراف ایجاد می شود.

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

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

• onclick - کلیک کردن روی دکمه ماوس.
• ondblclick - دوبار کلیک روی دکمه ماوس.
• onmousedown - دکمه ماوس فشار داده می شود (به پایین منتقل می شود).
• onmousemove - ماوس روی شی حرکت می کند (رویدادهای زیادی رخ می دهد، حرکت ماوس 1px = 1 رویداد).
• onmouseout - ماوس از شی خارج می شود.
• onmouseover - ماوس روی شی مورد نظر حرکت می کند.
• onmouseup - دکمه ماوس آزاد می شود (بالا می رود).
• onkeydown - دکمه صفحه کلید فشار داده می شود (به پایین منتقل می شود).
• روی کلید - فشار دادن دکمه صفحه کلید.
• onkeyup - دکمه صفحه کلید آزاد می شود (بالا می رود).
• onblur - از دست دادن فوکوس ورودی (چک زدن مکان نما).
• onfocus - لحظه ای که فوکوس ورودی توسط این عنصر دریافت می شود.
• onchange - اگر متن تغییر کرده باشد (مثلاً در یک فیلد متن) پس از از دست دادن فوکوس توسط کنترل ایجاد می شود. استثناء عنصر لیست "انتخاب" است که در آن این رویداد بلافاصله و نه پس از از دست دادن تمرکز ایجاد می شود.
• onload - زمانی که صفحه بارگیری در پنجره تمام شد ایجاد می شود. معمولاً زمانی استفاده می شود که نیاز به اجرای کد جاوا اسکریپت پس از بارگیری کامل صفحه دارید.
• onunload – قبل از تخلیه سند از پنجره (یعنی زمانی که این سند را می بندیم یا به سند دیگری منتقل می کنیم) اتفاق می افتد.
• onreset - فرم بازنشانی شده است.
• Onsubmit - فرم داده ارسال شده است.

اشتراک در رویدادها

• اشتراک از طریق جاوا اسکریپت. این روش در بیشتر موارد استفاده می شود. ابتدا باید شی عنصری را که می‌خواهیم از آن مشترک شویم، پیدا کنیم، مثلاً از طریق متد getElementById (شناسه عنصر مورد نظر را مشخص کنید).

تابع myFunc () ( // یک هشدار تابع ساده ایجاد کرد ("سلام")؛ ) تابع pageInit () ( var p= document. getElementById ("1")؛ p. onclick= myFunc; ) // تابع را برای روشن کردن فراخوانی کرد رویداد پنجره . onload=pageInit; //رویداد هنگام بارگیری صفحه فعال می شود< p id= 1 >بند 1 //تنظیم شناسه برای پاراگراف

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

< script type= "text/javascript" >تابع myFunc () ( // یک هشدار تابع ساده ایجاد کرد ("سلام")؛ )< p onclick= "myFunc()" >پاراگراف 2 //به نام تابع Event Processing Model

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

سپس این سؤال پیش می‌آید که چنین رویدادهایی به چه ترتیبی رخ خواهند داد؟ در مرورگرهای مدرن، مدل مدیریت رویداد، «مدل حباب» نامیده می‌شود. ماهیت آن: ابتدا، یک رویداد در عنصری که روی آن کلیک شده، سپس در والد آن، و به همین ترتیب تا بالا - تا «بدن» رخ می‌دهد.

عنصر --> عنصر 2 --> سند --> پنجره

پارامترهای رویداد (شیء رویداد)

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

ویژگی های اصلی این شی:

• x، y - مختصات ماوس در لحظه وقوع رویداد.
• clientX، clientY - یکسان است.
• offsetX، offsetY - همان چیزی است، اما این افست ماوس نسبت به عنصر والد.
• screenX، screenY - مختصات صفحه نمایش.
• دکمه - کدام دکمه ماوس فشار داده شده است (0 - فشار داده نشده، 1 - دکمه چپ فشار داده شده، 2 - دکمه راست فشار داده شده، 4 - دکمه وسط فشار داده شده است).
• keyCode - کد عددی کلید فشار داده شده صفحه کلید.
• srcElement - عنصری که رویداد را ایجاد کرد.
• fromElement - عنصری که ماوس از آن حرکت کرد.
• toElement - نشانه ای از شیئی که ماوس روی آن زد.
• cancelBubble یک راه غیر استاندارد است اگر آن را ارائه دهید درست است، واقعی، سپس "حباب پاپ آپ" لغو می شود. یا می توانید کد کلیدی را که کاربر فشار داده است جایگزین کنید.

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

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

همه رویدادهای جاوا اسکریپت را می توان به دسته های زیر تقسیم کرد: رویدادهای ماوس، رویدادهای صفحه کلید، رویدادهای فریم/اشیاء، رویدادهای فرم، رویدادهای کشیدن، رویدادهای انیمیشن، رویدادهای کلیپ بورد، رویدادهای رسانه، رویدادهای انتقال، رویدادهای ارسال شده از سرور، رویدادهای لمسی، رویدادهای چاپی (Print Events)، رویدادهای متفرقه (Misc Events).

توجه: همه رویدادها در جاوا اسکریپت با حروف کوچک (کوچک) نوشته می شوند.

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

• mousedown - رویداد زمانی رخ می دهد که دکمه ماوس روی برخی از عناصر فشار داده شود، اما هنوز آزاد نشده است.
• mouseup - این رویداد زمانی رخ می دهد که دکمه ماوس روی برخی از عناصر از حالت فشرده به حالت آزاد شده منتقل شود.
• کلیک - رویداد زمانی رخ می دهد که کاربر روی یک عنصر کلیک می کند. ترتیبی که رویدادهای کلیک روی می دهند (برای دکمه های سمت چپ و وسط ماوس) به صورت down -> mouseup -> کلیک کنید.
• منوی زمینه - این رویداد زمانی رخ می دهد که کاربر روی یک عنصر کلیک راست می کند. ترتیب رویدادهای مرتبط با منوی زمینه (برای دکمه سمت راست ماوس) به صورت down -> mouseup -> contextmenu است.
• dblclick - رویداد زمانی رخ می دهد که کاربر روی یک عنصر دوبار کلیک می کند. ترتیب وقوع رویدادهای مرتبط با dblclick به این صورت است: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick .
• mouseover - این رویداد زمانی رخ می دهد که نشانگر ماوس وارد منطقه ای شود که متعلق به یک عنصر یا یکی از فرزندان آن است.
• mouseout - رویداد زمانی رخ می دهد که نشانگر ماوس از منطقه ای که متعلق به یک عنصر یا یکی از فرزندان آن است خارج شود.
• mousemove - رویداد زمانی رخ می دهد که نشانگر ماوس در داخل ناحیه متعلق به عنصر حرکت می کند.
• mouseenter - رویداد زمانی رخ می دهد که نشانگر ماوس وارد منطقه ای شود که متعلق به یک عنصر است. این رویداد اغلب همراه با رویداد mouseleave استفاده می‌شود، که زمانی رخ می‌دهد که نشانگر ماوس ناحیه متعلق به یک عنصر را ترک می‌کند. رویداد mouseenter شبیه رویداد mouseover است و تنها در این تفاوت دارد که رویداد mouseenter حباب نمی‌کند (مفهوم حباب رویداد را کمی بعدتر خواهیم شناخت).
• mouseleave - رویداد زمانی رخ می دهد که نشانگر ماوس منطقه متعلق به عنصر را ترک می کند. رویداد mouseleave شبیه به رویداد mouseout است و تنها در این تفاوت دارد که رویداد mouseeleave حباب نمی شود (مفهوم حباب های رویداد را کمی بعدتر خواهیم شناخت).

رویدادهای صفحه کلید

ترتیب وقوع رویدادها به این صورت است: keydown -> keypress -> keyup .

• keydown - این رویداد زمانی رخ می دهد که یک کلید روی صفحه کلید بالای یک عنصر فشار داده شود اما هنوز رها نشده است.
• keyup - این رویداد زمانی رخ می دهد که یک کلید فشار داده شده روی صفحه کلید بالای یک عنصر به حالت آزاد شده تغییر می کند.
• keypress - رویداد زمانی رخ می دهد که کاربر کلیدی را روی صفحه کلید بالای یک عنصر فشار دهد.

رویدادهای شی و قاب

• قبل از بارگیری - رویداد قبل از تخلیه سند رخ می دهد. این رویداد به شما امکان می دهد یک پیام اضافی را در گفتگوی تأیید نمایش دهید، "آیا مطمئن هستید که می خواهید این صفحه را ترک کنید؟" پیام استانداردی که هنگام بستن یک سند ظاهر می شود ممکن است بسته به آن متفاوت باشد مرورگرهای مختلف. اما نمی توانید آن را تغییر یا حذف کنید، فقط می توانید از این روش برای اضافه کردن پیام خود به آن استفاده کنید که همراه با پیام پیش فرض نمایش داده می شود.
• خطا - زمانی که یک خطا رخ می دهد، رویداد فعال می شود، که هنگام بارگیری یک فایل خارجی (به عنوان مثال، یک سند یا تصویر) رخ می دهد.
• hashchange - این رویداد زمانی رخ می دهد که قسمت لنگر (با نماد "#" شروع می شود) URL فعلی تغییر می کند.
• load - رویداد زمانی رخ می دهد که بارگذاری یک شی به پایان می رسد. رویداد بارگذاری اغلب در عنصر بدنه برای اجرای یک اسکریپت بلافاصله پس از بارگیری کامل صفحه وب استفاده می شود.
• unload - این رویداد زمانی رخ می دهد که یک صفحه بارگیری می شود (به عنوان مثال، زمانی که یک برگه مرورگر (پنجره) بسته می شود).
• pageshow - رویداد زمانی رخ می دهد که کاربر به یک صفحه وب حرکت کند، یعنی. پس از اینکه صفحه در دسترس کاربر قرار گرفت. رویداد pageshow شبیه رویداد بارگذاری است، با این تفاوت که هر بار که صفحه بارگیری می شود، فعال می شود، حتی اگر از حافظه پنهان بارگیری شود. هنگامی که یک صفحه برای اولین بار بارگذاری می شود، رویداد pageshow بلافاصله پس از رویداد بارگذاری فعال می شود.
• pagehide - این رویداد زمانی رخ می دهد که کاربر صفحه را ترک می کند (رویداد pagehide قبل از رویداد تخلیه رخ می دهد). علاوه بر این، این رویداد، بر خلاف رویداد unload، مانع از کش کردن صفحه نمی شود.
• تغییر اندازه - رویداد زمانی رخ می دهد که اندازه پنجره مرورگر تغییر کند.
• اسکرول - این رویداد زمانی رخ می دهد که محتوای عنصری را اسکرول می کنید که دارای نوار پیمایش است.

فرم و کنترل رویدادها

• تمرکز - رویداد زمانی رخ می دهد که عنصر فوکوس را دریافت کند. این رویداد ظاهر نمی شود.
• blur - رویداد زمانی رخ می دهد که یک شی تمرکز خود را از دست بدهد. این رویداد ظاهر نمی شود.
• focusin - رویداد زمانی رخ می دهد که عنصر فوکوس را دریافت کند. رویداد fokusin شبیه رویداد تمرکز است، اما با آن تفاوت دارد که حباب دارد. بنابراین، می‌توان از آن در مواقعی استفاده کرد که باید بفهمید چه کسی تمرکز خود را از دست می‌دهد: عنصر یا فرزند آن؟
• تمرکز - رویداد زمانی رخ می دهد که یک عنصر در حال از دست دادن تمرکز است. رویداد Focusout شبیه به رویداد تاری است، اما با آن تفاوت دارد که حباب می‌زند. بنابراین، می‌توان از آن در مواقعی استفاده کرد که باید بفهمید چه کسی تمرکز خود را از دست می‌دهد: عنصر یا فرزند آن؟
• تغییر - این رویداد زمانی رخ می دهد که مقدار عنصر تغییر کند، اما پس از اینکه عنصر تمرکز خود را از دست داد. علاوه بر رویداد تغییر، جاوا اسکریپت یک رویداد ورودی مشابه نیز دارد، که با رویداد تغییر تفاوت دارد زیرا بلافاصله پس از تغییر مقدار عنصر رخ می دهد. رویداد تغییر، برخلاف رویداد ورودی، با keygen و عناصر انتخابی نیز کار می‌کند. برای دکمه های رادیویی و چک باکس ها، رویداد تغییر زمانی رخ می دهد که وضعیت این عناصر تغییر کند.
• ورودی - این رویداد پس از تغییر مقدار عنصر ورودی یا عنصر textarea رخ می دهد.
• نامعتبر - این رویداد زمانی رخ می دهد که یک عنصر ورودی که داده های آن باید همراه با سایر داده های فرم به سرور ارسال شود حاوی داده های نامعتبر باشد.
• reset - رویداد قبل از پاک شدن فرم رخ می دهد که توسط یک عنصر ورودی با type="reset" انجام می شود.
• جستجو - این رویداد پس از فشار دادن کلید Enter یا کلیک روی دکمه "x" (لغو) روی عنصر ورودی با type="search" رخ می دهد.
• select - این رویداد پس از انتخاب متنی در عنصر رخ می دهد. رویداد select عمدتاً برای یک عنصر ورودی با type="text" یا textarea استفاده می شود.
• ارسال - رویداد قبل از ارسال فرم به سرور رخ می دهد.

رویدادها را بکشید

رویدادهای مرتبط با شیء کشیده شده (هدف قابل کشیدن، شی منبع):

• dragstart - رویداد زمانی رخ می دهد که کاربر شروع به کشیدن یک عنصر می کند.
• کشیدن - رویداد زمانی رخ می دهد که کاربر یک عنصر را بکشد.
• dragend - این رویداد زمانی رخ می دهد که کاربر کشیدن عنصر را به پایان برساند، یعنی. وقتی نشانگر ماوس را رها کردم.

رویدادهای مرتبط با هدف drop که هدف قابل کشیدن را دریافت می کند:

• dragenter - این رویداد زمانی رخ می دهد که یک هدف قابل کشیدن وارد منطقه یک هدف قطره شود که می تواند یک هدف قابل کشیدن را بپذیرد.
• ragleave - این رویداد زمانی رخ می دهد که یک شیء کشیده شده (هدف قابل کشیدن) از مرزهای عنصر (هدف رها کردن) خارج می شود که می تواند آن را بپذیرد.
• dragover - این رویداد زمانی رخ می دهد که یک هدف قابل کشیدن به منطقه یک عنصر (هدف رها کردن) که می تواند آن را بپذیرد حرکت می کند.
• drop - این رویداد زمانی رخ می دهد که کاربر یک شی قابل کشیدن را در ناحیه یک عنصر (هدف رها کردن) که می تواند آن را بپذیرد، رها می کند.

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

سه رویدادی که ممکن است هنگام اجرای یک انیمیشن CSS رخ دهد:

• animationsstart - زمانی رخ می دهد که انیمیشن CSS شروع شده باشد.
• animationitation - زمانی رخ می دهد که یک انیمیشن CSS به طور مکرر اجرا شود.
• animationend - زمانی رخ می دهد که انیمیشن CSSبه پایان رسید.

رویدادهای کلیپ بورد

• کپی - رویداد زمانی رخ می دهد که کاربر محتویات یک عنصر را کپی می کند. رویداد کپی همچنین زمانی رخ می دهد که کاربر یک عنصر را کپی می کند (به عنوان مثال، تصاویر ایجاد شده با عنصر img). رویداد کپی عمدتاً برای عناصر ورودی با type="text" استفاده می شود.
• cut - رویداد زمانی رخ می دهد که کاربر محتوای یک عنصر را برش می دهد.
• چسباندن - این رویداد زمانی رخ می دهد که کاربر مقداری محتوا را در یک عنصر قرار می دهد.

چاپ رویدادها

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

رویدادهای انتقالی

• transitionend - این رویداد زمانی فعال می شود که انتقال CSS کامل شود. توجه: اگر یک انتقال قبل از تکمیل حذف شود (به عنوان مثال، اگر ویژگی CSS transition-property حذف شده است)، سپس رویداد transitionend فعال نخواهد شد.

رویدادهای ارسال شده توسط سرور

• خطا - رویداد زمانی رخ می دهد که خطایی در منبع رویداد رخ دهد. این خطا معمولاً زمانی رخ می دهد که ارتباط قطع شود. اگر این اتفاق بیفتد، شی EventSource به طور خودکار سعی می کند به سرور متصل شود.
• باز - رویداد زمانی رخ می دهد که اتصال به منبع رویداد باز باشد.
• پیام - رویداد زمانی رخ می دهد که یک پیام از طریق منبع رویداد دریافت شود.
  شی رویداد پیام از ویژگی های زیر پشتیبانی می کند:
  • داده - حاوی پیام است.
  • مبدا - URL سندی که رویداد را راه اندازی کرده است.
  • lastEventId - شناسه (id) آخرین پیام دریافتی.

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

در طول فرآیند بارگیری صوتی/تصویری، رویدادها به ترتیب زیر رخ می دهند: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough .

• سقط - رویداد زمانی رخ می دهد که بارگیری صوتی/تصویری قطع شود. این رویداد زمانی اتفاق می‌افتد که بارگیری داده‌های رسانه قطع شد (لغو شد)، و نه به این دلیل که خطایی رخ داده است.
• خطا - زمانی رخ می دهد که هنگام بارگیری صدا/تصویر خطایی رخ دهد.
• متوقف شد - این رویداد زمانی رخ می دهد که مرورگر سعی می کند داده های رسانه را دریافت کند، اما داده ها در دسترس نیستند.
• - این رویداد زمانی رخ می دهد که مرورگر شروع به جستجوی صوتی/تصویری مشخص شده می کند، یعنی. زمانی که فرآیند دانلود شروع می شود.
• durationchange - رویداد زمانی رخ می دهد که مدت زمان صدا/تصویر تغییر کند. اگر صدا/تصویر بارگیری شود، مدت زمان از "NaN" تا مدت واقعی صدا/تصویر متفاوت خواهد بود.
• loadedmetadata - رویداد زمانی فعال می شود که ابرداده برای صوتی/تصویری مشخص شده بارگیری شده باشد. فراداده صوتی/تصویری شامل: مدت زمان، اندازه (فقط ویدیو) و آهنگ متن است.
• loadeddata - این رویداد پس از بارگیری اولین فریم رسانه رخ می دهد.
• پیشرفت - زمانی رخ می دهد که مرورگر فایل صوتی/تصویری مشخص شده را دانلود کند.
• canplay - این رویداد زمانی رخ می دهد که مرورگر بتواند صدا/تصویر مشخص شده را شروع به پخش کند (یعنی زمانی که جریان صوتی/تصویری به اندازه کافی بافر شده است تا مرورگر شروع به پخش آن کند).
• canplaythrough - رویداد در نقطه ای از زمان رخ می دهد که مرورگر می تواند رسانه مشخص شده را بدون توقف برای بافر پخش کند.
• به پایان رسید - این رویداد زمانی رخ می دهد که پخش صوتی/تصویری به پایان برسد (به پایان برسد). از این رویداد می توان برای نمایش پیام هایی مانند "از توجه شما متشکرم"، "از تماشای شما متشکرم" و غیره استفاده کرد.
• مکث - زمانی رخ می دهد که پخش صدا/تصویر توسط کاربر یا توسط کد (به صورت برنامه ای) متوقف شود.
• پخش - زمانی که پخش صدا/تصویر شروع می شود، رویداد رخ می دهد. همچنین زمانی اتفاق می‌افتد که صدا/تصویری متوقف شده باشد و شروع به پخش کند.
• پخش - این رویداد زمانی رخ می دهد که صدا/تصویر پس از توقف موقت یا توقف آن برای بافر در حال پخش است.
• ratechange - رویداد زمانی رخ می دهد که سرعت پخش صدا/فیلم تغییر کند.
• جستجو - این رویداد زمانی رخ می دهد که کاربر شروع به حرکت نوار لغزنده (انتقال) به موقعیت زمانی جدید صوتی/تصویری در حال پخش می کند.
• جستجو - این رویداد زمانی رخ می دهد که کاربر انتقال نوار لغزنده (انتقال) را به موقعیت موقت جدید صوتی/تصویری در حال پخش تمام کرده باشد. واقعه جستجو شده در مقابل واقعه طلب است. برای دریافت موقعیت پخش فعلی، از ویژگی currentTime شیء صوتی / تصویری استفاده کنید.
• به روز رسانی زمان - این رویداد زمانی رخ می دهد که موقعیت زمانی صوتی/تصویری در حال پخش تغییر کند.
  این رویداد رخ می دهد:
  • هنگام پخش یک جریان صوتی/تصویری
  • هنگام انتقال نوار لغزنده به موقعیت زمانی جدید صوتی/تصویری در حال پخش.
  رویداد timeupdate اغلب همراه با ویژگی currentTime شیء صوتی/تصویری استفاده می‌شود، که موقعیت زمانی فعلی صدا/تصویر در حال پخش را در چند ثانیه برمی‌گرداند.
• تغییر حجم - هر بار که صدای پخش جریانی ویدیو/صوتی تغییر می کند، این رویداد رخ می دهد.
  این رویداد زمانی رخ می دهد که:
  • افزایش یا کاهش حجم؛
  • قطع یا قطع صدا
• انتظار - این رویداد زمانی رخ می دهد که ویدیو برای بافر متوقف شود.

رویدادهای مختلف

• toggle - این رویداد زمانی رخ می دهد که کاربر عنصر جزئیات را باز یا ببندد. عنصر جزئیات برای ایجاد اطلاعات اضافی طراحی شده است که کاربر می تواند در صورت نیاز مشاهده یا پنهان کند.
• چرخ - این رویداد زمانی رخ می دهد که چرخ ماوس روی یک عنصر به جلو یا عقب می رود.

وظایف

آیا رویداد "فشار کلید روی صفحه کلید (onkeypress)" پیچیده است؟ و اگر چنین است، پس در نتیجه چه اتفاقات ساده ای به وجود می آید؟

به عنوان مثال، شما 2 عنصر p دارید و کاربر ماوس را از ناحیه ای که متعلق به یک عنصر p است به ناحیه ای متعلق به عنصر p دیگر حرکت می دهد. چه اتفاقاتی در این مورد رخ می دهد و چه عناصری آنها را ایجاد می کنند؟

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

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

رویداد	یک شی	علت وقوع
سقط جنین	تصویر	قطع شدن بارگذاری تصویر
محو کردن		تمرکز عنصر از دست رفته
تغییر دادن	آپلود فایل، انتخاب، متن، Textarea	تغییر مقدار
کلیک	ناحیه، دکمه، چک باکس، سند، پیوند، رادیو، بازنشانی، ارسال	کلیک ماوس بر روی یک عنصر
DblClick	منطقه، سند، پیوند	روی یک عنصر دوبار کلیک کنید
DragDrop	پنجره	به پنجره مرورگر بروید
تمرکز	دکمه، چک باکس، بارگذاری فایل، قاب، لایه، رمز عبور، رادیو، بازنشانی، انتخاب، ارسال، متن، Textarea، پنجره	تنظیم فوکوس روی یک عنصر
KeyDown		فشار دادن یک کلید روی صفحه کلید
فشردن کلید	سند، تصویر، پیوند، Textarea	نگه داشتن کلید روی صفحه کلید
KeyUp	سند، تصویر، پیوند، Textarea	رها کردن یک کلید روی صفحه کلید
بار	سند، تصویر، لایه، پنجره
ماوس پایین	دکمه، سند، پیوند	دکمه ماوس فشار داده شد
MouseMove	پنجره	ماوس در حرکت
MouseOut	ناحیه، لایه، پیوند	ماوس از مرزهای عنصر فراتر می رود
ماوس بر	ناحیه، لایه، پیوند	ماوس روی عنصر است
MouseUp	دکمه، سند، پیوند	دکمه ماوس آزاد شد
حرکت	قاب	حرکت یک عنصر
بازنشانی کنید	فرم	بازنشانی فرم
تغییر اندازه	قاب، پنجره	تغییر اندازه
انتخاب کنید	متن، Textarea	انتخاب متن
ارسال	فرم	انتقال اطلاعات
تخلیه کنید	پنجره	در حال بارگیری صفحه فعلی

حالا بیایید نحوه استفاده از رویدادها در جاوا اسکریپت را دریابیم. به اصطلاح رویداد handlers وجود دارد. کنترل کننده های رویداد تعیین می کنند که وقتی یک رویداد خاص رخ می دهد چه اتفاقی می افتد. کنترل کننده های رویداد در جاوا اسکریپت فرم کلی زیر را دارند:

OnEventName

یعنی ابتدا پیشوند "روشن" و سپس نام رویداد می آید، به عنوان مثال، کنترل کننده های رویداد زیر: onFocus، onClick، onSubmit و غیره. فکر کنم اینجا سوالی نیست و اکنون سوال اصلی: "چگونه از رویدادها در جاوا اسکریپت استفاده کنیم؟". دامنه کاربرد آنها بسیار زیاد است و اکنون به یک مشکل نگاه خواهیم کرد. سه لینک در صفحه وجود دارد. هر یک از پیوندها مسئول رنگ پس زمینه متفاوتی هستند (به عنوان مثال سفید، زرد و سبز). در ابتدا پس زمینه سفید است. هنگامی که ماوس خود را روی یک پیوند خاص قرار می دهید، رنگ پس زمینه تغییر می کند. وقتی ماوس را دور می‌کنید، رنگ پس‌زمینه به رنگ پیش‌فرض برمی‌گردد. هنگامی که روی یک پیوند کلیک می کنید، رنگ پس زمینه به عنوان پیش فرض حفظ می شود.

آ (
رنگ آبی؛
متن-تزیین: زیر خط.
مکان نما: اشاره گر
}


var default_color = "سفید";

تابع setTempColor(رنگ) (
document.bgColor = رنگ;
}

تابع setDefaultColor(color) (
default_color = رنگ;
}

تابع defaultColor() (
document.bgColor = default_color;
}



سفید
رنگ زرد
سبز

بیایید به این اسکریپت، یا بهتر است بگوییم یک صفحه HTML کامل با پشتیبانی از جاوا اسکریپت و CSS (به عبارت دیگر، این یک نمونه از DHTML است) نگاه کنیم. ابتدا تگ های معمولی HTML می آیند که هر صفحه HTML با آن شروع می شود. در مرحله بعد، ما یک سبک ایجاد می کنیم که در آن ما نیاز داریم که تمام پیوندهای یک صفحه داده شده آبی، زیر خط کشیده شده و نشانگر ماوس روی آنها به شکل "اشاره گر" باشد. ممکن است بگویید: "چرا نیاز به تنظیم یک سبک دارید؟ در نهایت، پیوندها دقیقاً یکسان خواهند بود." درست است، پیوندها، اما ما پیوندهایی به این شکل نداریم (در همه اینها، هیچ ویژگی href در تگ وجود ندارد)، بنابراین آنها به طور پیش فرض متن سیاه و سفید ساده خواهند بود (با این حال، می توانید روی متن نیز کلیک کنید). بنابراین، سبک یک امر ضروری است. می توانید آن را حذف کنید و ببینید چه اتفاقی می افتد. بهتر است ویژگی href (با هر مقدار، حتی خالی) را اضافه کنید و توضیح دهید که چرا اسکریپت کار نمی کند. سپس جاوا اسکریپت شروع می شود. ما یک متغیر default_color ایجاد می کنیم که مسئول رنگ پیش فرض است. بعد سه تابع می آیند:

تابع setTempColor() مسئول تغییر موقت رنگ است.

تابع setDefaultColor() مسئول تغییر رنگ پیش فرض است.

تابع defaultColor() رنگ پس زمینه پیش فرض را تنظیم می کند.

سپس پیوندهایی با ویژگی ها در قالب کنترل کننده رویداد وجود دارد. هنگامی که ماوس را روی یک پیوند می برید، رویداد MouseOver رخ می دهد؛ بر این اساس، کنترل کننده رویداد onMouseOver تابع setTempColor() را فراخوانی می کند و پارامتر مربوطه را ارسال می کند. هنگامی که ماوس را از یک عنصر حذف می کنید، رویداد MouseOut بالا می رود و سپس تابع defaultColor() فراخوانی می شود که رنگ پس زمینه را روی رنگ پیش فرض قرار می دهد. و در نهایت زمانی که ماوس روی لینک کلیک می کند (کنترل کننده onClick)، تابع setDefaultColor() فراخوانی می شود که رنگ مشخص شده در پارامتر را روی رنگ پس زمینه پیش فرض قرار می دهد. همانطور که می بینید، همه چیز بسیار ساده است.

این اصل استفاده از رویدادها در جاوا اسکریپت بود و بعد همه چیز فقط به تخیل شما بستگی دارد!

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

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

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

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

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

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

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

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

addEventListener("click", function() ( console.log("شما کلیک کردید!"); ));

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

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

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

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

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

var button = document.querySelector("button"); button.addEventListener("click", function() ( console.log("Button clicked."); ));

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

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

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

دکمه یکبار مصرف var button = document.querySelector("button"); function Once() ( console.log("Done."); button.removeEventListener("click"، یک بار); ) button.addEventListener("click"، یک بار);

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

اشیاء رویداد

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

با هر کلید ماوس روی من کلیک کنید var button = document.querySelector("button"); button.addEventListener("mousedown"، function(event) ( if (event.which == 1) console.log ("دکمه سمت چپ")؛ other if (event.which == 2) console.log ("دکمه میانی" )؛ else if (event.which == 3) console.log("دکمه راست"); ));

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

در حال گسترش

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

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

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

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

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

var para = document.querySelector("p"); var button = document.querySelector("button"); para.addEventListener("mousedown", function() ( console.log("Handler for پاراگراف."); )); button.addEventListener("mousedown", function(event) ( console.log("Handler for button."); if (event.which == 3) event.stopPropagation(); ));

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

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

A B C document.body.addEventListener("click", function(event) ( if (event.target.nodeName == "BUTTON") console.log("Clicked", event.target.textContent); ));

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

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

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

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

MDN var link = document.querySelector("a"); link.addEventListener("click", function(event) (consol.log("Nope"); event.preventDefault(); ));

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

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

اتفاقات کلیدی

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

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

addEventListener("keydown"، تابع(رویداد) ( if (event.keyCode == 86) document.body.style.background = "violet"; )); addEventListener("keyup", function(event) ( if (event.keyCode == 86) document.body.style.background = ""; ));

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

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

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

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

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

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

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

addEventListener("keydown"، تابع(رویداد) ( if (event.keyCode == 32 && event.ctrlKey) console.log("ادامه!"); ));

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

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

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

addEventListener("کلید فشار"، تابع(رویداد) (consol.log(String.fromCharCode(event.charCode)); ));

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

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

کلیک ماوس

فشردن دکمه ماوس نیز باعث ایجاد یک سری رویدادها می شود. رویدادهای "Mousedown" و "mouseup" مشابه رویدادهای "keydown" و "keyup" هستند. هنگامی که دکمه ماوس فشار داده شده و رها می شود، آنها فعال می شوند. این رویدادها در گره‌های DOM روی می‌دهند که در هنگام وقوع رویداد روی آنها قرار می‌گرفتند.

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

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

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

بدنه ( ارتفاع: 200 پیکسل؛ پس‌زمینه: بژ؛ ) .dot (ارتفاع: 8 پیکسل؛ عرض: 8 پیکسل؛ شعاع حاشیه: 4 پیکسل؛ /* گوشه‌های گرد */ پس‌زمینه: آبی؛ موقعیت: مطلق؛ ) addEventListener("کلیک"، تابع (رویداد) ( var dot = document.createElement("div"); dot.className = "dot"; dot.style.left = (event.pageX - 4) + "px"؛ dot.style.top = (رویداد .pageY - 4) + "px"; document.body.appendChild(dot); ));

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

حرکت ماوس

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

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

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

var lastX; // آخرین موقعیت X ماوس را ردیابی می کند var rect = document.querySelector("div"); rect.addEventListener("mousedown", function(event) ( if (event.which == 1) ( lastX = event.pageX; addEventListener("mousemove", moved); event.preventDefault(); // Prevents selection ) ) ) دکمه تابع فشار داده شده(رویداد) (اگر (رویداد.دکمه ها == پوچ) رویداد را برمی گرداند. که != 0؛ در غیر این صورت رویداد.دکمه ها را برمی گرداند != 0؛ ) تابع منتقل شد(رویداد) (اگر (!buttonPressed(رویداد)) ( removeEventListener( "mousemove"، منتقل شد؛ ) else (var dist = event.pageX - lastX؛ var newWidth = Math.max(10, rect.offsetWidth + dist)؛ rect.style.width = newWidth + "px"؛ lastX = رویداد .pageX; ))

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

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

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

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

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

برای حل این مشکل، می‌توانید از ویژگی object event relatedTarget استفاده کنید. هنگامی که رویداد "Mouseover" رخ می دهد، نشان می دهد که قبلاً روی کدام عنصر قرار گرفته است. و در صورت "موشواره" - نشانگر به کدام عنصر منتقل می شود. ما فقط زمانی جلوه ماوس را تغییر می دهیم که relatedTarget خارج از گره هدف ما باشد.

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

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

var para = document.querySelector("p"); تابع isInside(گره، هدف) (برای (؛ گره != تهی؛ گره = node.parentNode) اگر (گره == هدف) true را برگرداند؛ ) para.addEventListener("موشواره"، تابع(رویداد) (اگر ( !isInside (event.relatedTarget، para)) para.style.color = "قرمز"؛ )); para.addEventListener("mouseout", function(event) ( if (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

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

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

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

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

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

.progress ( حاشیه: 1px آبی ثابت؛ عرض: 100px؛ موقعیت: ثابت؛ بالا: 10px؛ سمت راست: 10px؛ ) .progress > div ( ارتفاع: 12px؛ پس‌زمینه: آبی؛ عرض: 0%؛ ) بدنه (ارتفاع: 2000px ;)

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

var bar = document.querySelector(".progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight؛ var درصد = (pageYOffset / max) * 100; bar.style.width = درصد + "%"; ));

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

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

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

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

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

هنگامی که یک عنصر دارای فوکوس ورودی است، مرورگر یک رویداد "focus" را روی آن اجرا می کند. وقتی فوکوس ورودی برداشته می‌شود، رویداد "blur" فعال می‌شود.

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

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

نام:

سن:

var help = document.querySelector("#help"); var fields = document.querySelectorAll("input"); برای (var i = 0; i< fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }

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

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

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

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

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

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

دنباله اجرای اسکریپت

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

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

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

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

فرض کنید در فایلی به نام code/squareworker.js کد زیر را داریم:

addEventListener("پیام"، تابع(رویداد) ( postMessage(event.data * event.data); ));

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

var SquareWorker = new Worker("code/squareworker.js"); SquareWorker.addEventListener("پیام"، تابع(رویداد) ( console.log("کارگر پاسخ داد:"، event.data); )); SquareWorker.postMessage(10); SquareWorker.postMessage(24);

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

تنظیم تایمر

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

document.body.style.background = "آبی"; setTimeout(function() ( document.body.style.background = "زرد"; ), 2000);

گاهی اوقات لازم است عملکردی را که برنامه ریزی کرده ایم لغو کنیم. این کار با ذخیره مقدار بازگشتی 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 استفاده کنید تا مطمئن شوید که خیلی طول نمی کشد. این معمولاً به عنوان تقسیم رویداد شناخته می شود. چندین روش مختلف برای خرد کردن وجود دارد.

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

اینجا چیزی تایپ کنید... var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() ( clearTimeout(timeout); timeout = setTimeout(function() ( console.log("شما تایپ را متوقف کردید."); ), 500); ));

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

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

تابع displayCoords(event) ( document.body.textContent = "موس در " + event.pageX + "، " + event.pageY; ) var scheduled = false، lastEvent; addEventListener("mousemove", function(event) ( lastEvent = event; if (!scheduled) ( scheduled = true; setTimeout(function() ( scheduled = false; displayCoords(lastEvent); ), 250); ) ));

نتیجه

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

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

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

کلیدهای فشرده رویدادهای "keydown"، "keypress" و "keyup" را ایجاد می کنند. با کلیک بر روی ماوس رویدادهای "download"، "mouseup" و "click" ایجاد می شود. حرکت ماوس - "moemove"، "mouseenter" و "mouseout".

یک رویداد پیمایش جاوا اسکریپت را می توان با استفاده از رویداد "scroll" تعریف کرد و تغییر فوکوس را می توان با استفاده از "focus" و "blur" تعریف کرد. پس از اتمام بارگیری سند، رویداد "load" برای پنجره بالا می رود.

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

این نشریه ترجمه‌ای از مقاله مدیریت رویدادها است که توسط تیم پروژه دوستانه تهیه شده است

رویدادهای جاوا اسکریپت

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

- شناور کردن و حرکت دادن نشانگر ماوس روی یک عنصر با تغییر رنگ پس زمینه همراه است.

- هنگامی که کاربر سعی می کند پنجره را ببندد و سند را تخلیه کند، پیامی نمایش داده می شود

- وقتی روی یک تصویر کلیک می کنید، یک تابع showPict() اجرا می شود

نیمی از کنترل کننده ها توسط تقریباً تمام عناصر HTML پشتیبانی می شوند (). برخی از رویدادها را می توان با استفاده از روش های مناسب شبیه سازی کرد. در زیر لیستی از رویدادها بر اساس مشخصات HTML 4.0 و برخی رویدادهای پشتیبانی شده توسط MS IE. تعبیر مرورگرها ممکن است از نظر کاربرد کنترل کننده برای عناصر خاص با استاندارد متفاوت باشد

کنترل کننده رویداد	پشتیبانی از عناصر HTML	شرح	روش تقلید
onAbort	IMG	قطع شدن بارگذاری تصویر
در Blur		عنصر فعلی تمرکز را از دست می دهد، به عنوان مثال. به عنصر دیگری بروید زمانی رخ می دهد که ماوس را در خارج از یک عنصر کلیک می کنیم یا کلید تب را فشار می دهیم.	blur()
در تغییر	INPUT، SELECT، TEXTAREA	تغییر مقادیر عناصر فرم. پس از از دست دادن تمرکز یک عنصر رخ می دهد، به عنوان مثال. پس از رویداد تاری	تغییر دادن()
روی کلیک کنید		یک کلیک (دکمه ماوس فشرده و رها شد)	کلیک()
onDblClick	تقریبا تمام عناصر HTML	دوبار کلیک کنید
یک خطا	IMG، WINDOW	خطای اجرای اسکریپت رخ می دهد
روی فوکوس	A، AREA، BUTTON، INPUT، LABEL، SELECT، TEXTAREA	فوکوس کردن یک عنصر (کلیک کردن روی عنصر یا فشار دادن مجدد کلید Tab)	تمرکز()
onKeyDown	تقریبا تمام عناصر HTML	یک کلید روی صفحه کلید فشار داده می شود
onKeyPress	تقریبا تمام عناصر HTML	یک کلید روی صفحه کلید فشار داده شده و رها می شود
onKeyUp	تقریبا تمام عناصر HTML	کلید صفحه کلید آزاد شد
در بارگذاری	بدنه، قاب
روی ماوس پایین	تقریبا تمام عناصر HTML	دکمه ماوس در عنصر فعلی فشار داده شده است
روی MouseMove	تقریبا تمام عناصر HTML	مکان نما ماوس را درون عنصر فعلی حرکت دهید
onMouseOut	تقریبا تمام عناصر HTML	نشانگر ماوس خارج از عنصر فعلی است
روی MouseOver	تقریبا تمام عناصر HTML	نشانگر ماوس روی عنصر فعلی است
onMouseUp	تقریبا تمام عناصر HTML	دکمه ماوس در عنصر فعلی منتشر شد
onMove	پنجره	حرکت دادن یک پنجره
در بازنشانی	فرم	بازنشانی داده های فرم (روی دکمه کلیک کنید )	تنظیم مجدد ()
در تغییر اندازه	پنجره	تغییر اندازه یک پنجره
onSelect	ورودی، TEXTAREA	متن را در عنصر فعلی انتخاب کنید
در ارسال	فرم	ارسال داده های فرم (با کلیک بر روی دکمه )	ارسال()
در تخلیه	بدنه، قاب	تلاش برای بستن پنجره مرورگر و تخلیه سند