چه رویداد هایی دارن پشت صحنه یک صفحه وب اتفاق میفتن؟

توی این بلاگ قصد دارم در مورد چند تا Dom Event که در چرخه حیات یک صفحه وب اتفاق میفتن صحبت کنم اما نکته اول اینه که اصلا چرخه حیات یا life cycle یعنی چی؟ازلحظه اولی که یک صفحه وب در دسترس قرار میگیره تا لحظه ای که از اون صفحه خارج بشیم رو اصطلاحا چرخه حیات اون صفحه میدونیمDomContentLoadedاولین رویدادی که میخوایم راجع بهش صحبت کنیم Dom Content Loaded هست که به محض این که سند HTML کاملا پارس میشه( فرآیند دانلود شدن کامل صفحه HTML و تبدیل شدن به DOM tree) توسط خود document فراخونی میشه اما قبل ازاینکه Dom Content Loaded بتونه اتفاق بیفته تمام اسکریپت ها باید دانلود و اجرا بشن بنابراین سایر منابع مثل تصاویر یا هر منبع دیگه ای (به جزhtml و js scripts همونطوریکه بالاتر هم اشاره کردم)خیلی مورد توجه این Event نیست#code1 document.addEventListener('DOMContentLoaded',(e)=>{ console.log('Html parsed',e); });حالا دقیقا بعد ازاین خطه که میتونیم کدهایی رو بنویسیم که نیاز داریم بعد از اینکه DOM لود شده اجرابشن و خب ما تقریبا میخوایم تمام کدمون دقیقا بعد از اینکه DOM آماده شد اجرا بشه. اما این جمله معنیش این نیست که ما وابسته کد بالاییم که وب اپلیکیشنمون کار کنه. اما چرا؟چون ما تگ رویایی script رو داریم که معمولا قبل ازاینکه تگ body رو ببندیم فراخونیش میکنیم و این تگه که میاد و جاوا اسکریپت رو به HTML ایمپورت میکنهپس آخرین چیزی که HTML میخونه ایمپورت کردن جاوااسکریپته#code2 <script src='script.js'> </body> </html>پس اساسا مرورگر زمانی اسکریپت مارو پیدا میکنه که تمام HTML پارس شده.پس دیگه نیازی به شنیدن رویداد DomContentLoded نداریم (code1).اما شبیه به این فرآیند رو توی jquery هم داریم یعنی دقیقا جایی که میایم و تمام فرآیندمون رو وابسته به document.ready میکنیم این فرایند دقیقا کاریکه DomContentLoded توی جاوااسکریپت خام میکنه رو انجام میدهLoadEvent اما ما یک رویداد دیگه تحت عنوان LoadEvent هم داریم که بعداز اینکه تمام منابع مثل عکس ها یا css یا هر منبع خارجی دیگه ای دانلود شدن ، توسط window فراخونی میشه به عبارتی این رویداد زمانی فراخونی میشه که تمام صفحه تمام و کمال لود شده باشهwindow.addEventListener(&quotload&quot, (e) => { console.log(&quotPage fully loaded&quot, e); });تفاوت رویداد های DomContentLoaded و LoadEventbeforeunload یک رویداد خیلی جالب دیگه ای که وجود داره معروفه به beforeunload که دقیقا زمانی فراخونی میشه که کاربرداره از صفحه خارج میشه مثلا زمانیکه کاربر روی X مربوط به تب صفحه ما توی مرورگر کلیک میکنه تا از صفحه ما خارج شه یا مثلا زمانیکه صفحه رو میخواد بارگذاری مجدد کنه بنابراین میتونیم از این رویداد استفاده کنیم و از کاربر بپرسیم که آیا مطمئنه که میخواد صفحه رو ترک کنه یا نه و خب قاعدتا هم روی window فراخونی میشهمثال رایج برای همچین رویدادی میتونه صفحات درگاه پرداخت بانکی باشه که هر فعالیتی مربوط به لود مجدد یا ترک صفحه باشه مرورگر بهتون اخطار میدهwindow.addEventListener(&quotbeforeunload&quot, (e) => { e.returnValue = &quot " });مقدار e.returnValue هرچیزی میتونه باشه اما تغییری توی مقدار پیش فرضی که برای این رویداد وجود داره نخواهد داشت بنابراین خالی میمونه و این که برای بعضی از مرور گرها حتما باید از e.preventdefault()استفاده کنیم ولی توی کروم نیازی بهش نیستفراخونی beforeunload در لحظه reload کردن صفحهفراخونی beforeunload در لحظه ترک کردن صفحهاما خیلی مهمه که ازاین رویداد سو استفاده نکنیم چون واقعا برای کاربرهامون آزار دهنده میشه بنابراین جاهاییکه واقعا احساس میکنیم کاربر ممکنه به طور تصادفی از یک صفحه بیاد بیرون و زحماتش با یک اشتباه به هدر بره از این event استفاده میکنیم