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

توی این بلاگ قصد دارم در مورد چند تا 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);
});

• beforeunload

یک رویداد خیلی جالب دیگه ای که وجود داره معروفه به beforeunload که دقیقا زمانی فراخونی میشه که کاربرداره از صفحه خارج میشه مثلا زمانیکه کاربر روی X مربوط به تب صفحه ما توی مرورگر کلیک میکنه تا از صفحه ما خارج شه یا مثلا زمانیکه صفحه رو میخواد بارگذاری مجدد کنه بنابراین میتونیم از این رویداد استفاده کنیم و از کاربر بپرسیم که آیا مطمئنه که میخواد صفحه رو ترک کنه یا نه و خب قاعدتا هم روی window فراخونی میشه

مثال رایج برای همچین رویدادی میتونه صفحات درگاه پرداخت بانکی باشه که هر فعالیتی مربوط به لود مجدد یا ترک صفحه باشه مرورگر بهتون اخطار میده

window.addEventListener(&quotbeforeunload&quot, (e) => {
e.returnValue = &quot "
});

مقدار e.returnValue هرچیزی میتونه باشه اما تغییری توی مقدار پیش فرضی که برای این رویداد وجود داره نخواهد داشت بنابراین خالی میمونه و این که برای بعضی از مرور گرها حتما باید از

e.preventdefault()

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

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