از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
به این بایت خوش آمدید، جایی که نگاهی به مدیریت رویداد جاوا اسکریپت، به طور خاص تر، خواهیم انداخت window.onload و document.onload مناسبت ها. این دو رویداد معمولاً در توسعه وب مورد استفاده قرار می گیرند، اما آنها یکسان نیستند. بیایید ببینیم که آنها چگونه متفاوت هستند و چه زمانی از هر کدام استفاده کنیم.
مدیریت رویداد جاوا اسکریپت
قبل از اینکه به جزئیات بپردازیم window.onload و document.onload، باید کمی بیشتر در مورد مدیریت رویداد جاوا اسکریپت توضیح دهیم. در جاوا اسکریپت، رویدادها بخش مهمی از برنامه های کاربردی وب تعاملی هستند. آنها به ما اجازه می دهند به تعاملات کاربر مانند کلیک ها، حرکت های ماوس، فشار دادن کلیدها و حتی پاسخ دهیم. page بارگذاری.
button.addEventListener('click', function() {
console.log('Button clicked!');
});
در قطعه بالا، ما در حال گوش دادن به یک رویداد “کلیک” هستیم روی یک دکمه. هنگامی که دکمه کلیک می شود، تابع اجرا می شود و “دکمه کلیک شد!” به سیستم وارد شده است console.
چیست window.onload?
این window.onload رویداد زمانی ایجاد می شود که کل page بارگیری کرده است. این شامل تمام محتواهایی مانند تصاویر، اسکریپت‌ها، CSS و غیره می‌شود. می‌توانید آن را مانند یک برنامه‌ریز رویداد سخت‌گیرانه در نظر بگیرید که تا زمانی که هر مهمان وارد نشده است، رویداد را شروع نمی‌کند.
window.onload = function() {
console.log('All content loaded!');
};
در اینجا، “تمام محتوا بارگیری شد!” به سیستم وارد شده است console، اما فقط بعد از همه چیز روی را page به طور کامل بارگذاری شده است. این یک رویداد مفید برای مقداردهی اولیه برنامه جاوا اسکریپت یا شروع انیمیشن ها است، اما اگر نیاز دارید که در اسرع وقت اتفاقی بیفتد، ممکن است بهترین انتخاب نباشد.
چیست document.onload?
از طرفی داریم document.onload. این رویداد زمانی فعال می شود که DOM (مدل شیء سند) آماده باشد. بنابراین این بدان معناست که صبر نمی کند تا شیوه نامه ها، تصاویر یا فریم های فرعی بارگذاری شوند. در این صورت، برنامه‌ریز رویداد ساختگی ما حتی اگر رویداد را آغاز کند نه مهمان ها آمده اند
document.onload = function() {
console.log('DOM is ready!');
};
“DOM آماده است!” به سیستم وارد خواهد شد console به محض اینکه DOM به طور کامل بارگذاری شد. این می تواند بسیار سریعتر از window.onload در مواردی که تصاویر بزرگ یا منابع دیگری برای بارگذاری وجود دارد.
توجه داشته باشید: ذکر این نکته ضروری است document.onload به اندازه گسترده پشتیبانی نمی شود window.onload. برای سازگاری بهتر مرورگر، ممکن است بخواهید از jQuery استفاده کنید $(document).ready() روش به جای
در بخش بعدی این بایت، در مورد زمان استفاده از هر رویداد بحث خواهیم کرد.
زمان استفاده از هر کدام
انتخاب بین window.onload و document.onload (و یا به جای، DOMContentLoaded) مانند انتخاب ابزار مناسب برای کار است.
اگر اسکریپت شما نیاز به دستکاری تصاویر یا منابع دیگری دارد که ممکن است بارگذاری آن مدتی طول بکشد، window.onload چیزی است که شما نیاز دارید با صبر و حوصله منتظر می ماند تا آخرین منبع آماده شود.
window.onload = function() {
// This won't run until that super high-res image is ready to be manipulated
let img = document.getElementById('super-high-res-img');
img.style.filter = 'grayscale(100%)';
}
به عنوان مثال، زمانی که نیاز به اجرای برخی کدهای JS دارید، این کار مفید است روی یک یا چند منبع به طور کامل بارگذاری شود.
اما اگر اسکریپت شما فقط نیاز به دستکاری DOM دارد و به منابع دیگر (مانند تصاویر، CSS یا JS دیگر) اهمیتی نمی‌دهد. DOMContentLoaded کارآمدتر است. به محض آماده شدن DOM، بدون منتظر ماندن برای تصاویر بزرگ که دانلود آنها برای همیشه طول می کشد، کار می کند.
document.addEventListener('DOMContentLoaded', function() {
// This will run as soon as the DOM is ready, even if some images are still loading
let heading = document.getElementById('important-heading');
heading.style.color = 'red';
});
نتیجه
در این بایت، ما مقایسه کرده ایم window.onload و document.onload (و یا به جای، DOMContentLoaded، دو کنترل کننده رویداد جاوا اسکریپت با نام های مشابه اما رفتارهای متفاوت. window.onload منتظر می ماند تا همه منابع قبل از شلیک بارگیری شوند، در حالی که DOMContentLoaded به محض آماده شدن DOM آتش می گیرد. مثل همیشه، همه چیز در مورد انتخاب ابزار مناسب برای کار است – و اکنون می دانید که باید به کدام یک دست پیدا کنید.
منتشر شده در 1402-12-28 22:53:02
