การดำเนินการของภาษาสคริปต์ JavaScript จะต้องถูกเรียกใช้ วิธีการทั่วไปคือการเขียนหลายฟังก์ชั่นโดยตรงบนหน้าเว็บ บางส่วนของพวกเขาจะถูกประมวลผลโดยเบราว์เซอร์เมื่อโหลดรหัสหรือใช้รหัสที่คล้ายกับต่อไปนี้เพื่อกระตุ้นการใช้งานฟังก์ชั่นที่เกี่ยวข้องกับฟังก์ชั่น
<div id =” ลิงค์” onclick =” fun ()”> </div>
รหัสด้านบนหมายความว่าเมื่อเมาส์คลิกบนองค์ประกอบที่มี ID เป็นลิงค์เหตุการณ์ onClick จะถูกทริกเกอร์และจากนั้นฟังก์ชั่นความสนุกที่กำหนดโดยใช้ JavaScript จะถูกดำเนินการ วิธีการนี้ไม่มีเหตุผลอย่างแน่นอนเนื่องจากการดำเนินการทริกเกอร์ถูกเขียนลงในโครงสร้าง HTML โดยตรงและเนื้อหาและพฤติกรรมไม่ได้แยกออกซึ่งจะทำให้เกิดความไม่สะดวกในการพัฒนาหรือการดัดแปลงรองในอนาคต
ควรสังเกตว่าเมื่อการประมวลผลเหตุการณ์ถูกผูกไว้กับองค์ประกอบที่เกี่ยวข้องการดำเนินการสามารถทำได้หลังจากโหลดองค์ประกอบนั้นเท่านั้น หากวางสคริปต์ที่ประมวลผลไว้ในพื้นที่ส่วนหัวเบราว์เซอร์จะรายงานข้อผิดพลาด เนื่องจากองค์ประกอบ HTML ต่อไปนี้ยังไม่ได้รับการโหลดสคริปต์การประมวลผลในหัวได้รับการประมวลผล
วิธีที่ดีในการเรียกใช้รหัส JavaScript ควรแยกเนื้อหาพฤติกรรมและประมวลผลหลังจากการโหลดหน้าเว็บ ดังนั้นเมื่อจัดการกับรหัส JavaScript เราจำเป็นต้องใช้เหตุการณ์โหลดของผู้ฟังและวัตถุหน้าต่าง
ผู้ฟัง
ฟังก์ชั่นจริงของผู้ฟังคือการแยกพฤติกรรมออกจากเนื้อหา ในอดีตจำเป็นต้องมีเหตุการณ์ทริกเกอร์บางอย่างเพื่อเรียกใช้ฟังก์ชั่นที่เกี่ยวข้องกับจาวาสคริปต์ ตอนนี้เราใช้ผู้ฟังโดยตรงสำหรับองค์ประกอบใน JavaScript เพื่อฟังเหตุการณ์ขององค์ประกอบนี้ หากองค์ประกอบนี้ถูกทริกเกอร์และฟังก์ชั่นการประมวลผลที่สอดคล้องกันสำหรับเหตุการณ์นี้ถูกกำหนดไว้ในผู้ฟังฟังก์ชั่นนี้จะถูกประมวลผล
วิธีมาตรฐานของ W3C เรียกว่า AddeventListener ซึ่งได้รับการสนับสนุนโดย IE9, Chrome, Firefox และ Opera วิธีการเขียนคือ:
window.addeventListener ('โหลด', ฟังก์ชั่น, เท็จ);วิธีที่แนบมาในช่วงต้น IE มีเอฟเฟกต์ที่คล้ายกัน:
window.attachevent ('onload', ฟังก์ชั่น);วิธีการใช้ผู้ฟังก็ง่ายมาก มันคือการได้รับองค์ประกอบในหน้าก่อนแล้วใช้ฟังสำหรับองค์ประกอบนี้เพื่อกำหนดเหตุการณ์ที่ฟังและฟังก์ชั่นการจัดการเหตุการณ์ที่เกี่ยวข้อง ตัวอย่างด้านบน:
document.getElementById ('ลิงก์'). addeventListener ('คลิก', สนุก, เท็จ);สำหรับคำแนะนำโดยละเอียดเพิ่มเติมเกี่ยวกับการใช้จอภาพโปรดดูข้อมูลเพิ่มเติมในตอนท้ายของบทความ
Window.onload Event
เหตุการณ์ ONLOAD จะถูกทริกเกอร์เฉพาะเมื่อทั้งหน้าถูกโหลดอย่างสมบูรณ์ เมื่อเราเขียนรหัส JavaScript ลงในเหตุการณ์ ONLOAD เราสามารถมั่นใจได้ว่าเบราว์เซอร์จะประมวลผลรหัส JavaScript ของเราหลังจากโหลดองค์ประกอบ HTML การเขียนขั้นพื้นฐาน:
window.onload = function () {// code}ด้วยวิธีนี้รหัสในฟังก์ชั่นนี้จะถูกประมวลผลหลังจากโหลด อย่างไรก็ตามวิธีนี้มีข้อเสียเปรียบซึ่งสามารถใช้กับฟังก์ชั่นนี้ได้เท่านั้น หลาย window.onload เหตุการณ์ไม่สามารถปรากฏบนหน้า หากมีเหตุการณ์ OnLoad หลายเหตุการณ์เนื้อหาที่ตามมาจะเขียนทับเหตุการณ์ก่อนหน้านี้
จากนั้นเราสามารถทำสิ่งนี้เขียนชื่อฟังก์ชั่นทั้งหมดที่ต้องโหลดในเหตุการณ์ window.onload จากนั้นกำหนดฟังก์ชั่นภายนอก:
window.onload = function () {func1 (); func2 (); } ฟังก์ชั่น func1 () {…} ฟังก์ชั่น func2 () {…}แม้ว่านี่จะโอเค แต่ก็ไม่สะดวกมากเพราะเราจำเป็นต้องเขียนชื่อฟังก์ชั่นทั้งหมดที่จะโหลดและมันจะลำบากมากในการแก้ไข แน่นอนจะต้องมีทางออก JQuery ให้วิธีการโหลดหลายสคริปต์ที่ทรงพลังมากดังนั้นจึงต้องมีวิธีแก้ปัญหาสำหรับ JavaScript ดั้งเดิม
window.onload จัดการหลายฟังก์ชั่นพร้อมกัน
เราต้องเขียนฟังก์ชั่นการประมวลผลและดูรหัสก่อน:
ฟังก์ชั่น addloadListener (fn) {if (typeof window.addeventListener! = 'undefined') {window.addeventListener ('โหลด', fn, false); } อื่นถ้า (typeof document.addeventListener! = 'undefined') {document.addeventListener ('โหลด', fn, false); } อื่นถ้า (typeof window.attachevent! = 'undefined') {window.attachevent ('onload', fn); } else {var oldfn = window.onload; if (typeof window.onload! = 'function') {window.onload = fn; } else {window.onload = function () {oldfn (); fn (); - -ลองแยกฟังก์ชั่น AddloadListener ที่กำหนดเองนี้โดยผ่านชื่อฟังก์ชันเป็นพารามิเตอร์ ก่อนอื่นจะกำหนดว่าเบราว์เซอร์รองรับผู้ฟังที่เกี่ยวข้องหรือไม่ หากรองรับผู้ฟังจะใช้ฟังฟังเหตุการณ์ OnLoad ของวัตถุหน้าต่างจากนั้นจัดการฟังก์ชั่นนี้ รหัสนี้ใช้คำสั่ง IF เพื่อตัดสินเหตุการณ์การฟังของเบราว์เซอร์ทั้งหมดและเข้ากันได้กับเบราว์เซอร์ข้าม
เราวางรหัสนี้ไว้ที่ด้านบนของเซ็กเมนต์รหัส JavaScript จากนั้นกำหนดฟังก์ชั่นที่เกี่ยวข้องด้านล่างจากนั้นใช้คำสั่งต่อไปนี้เพื่อโหลดฟังก์ชัน JavaScript
AddloadListener (func); ฟังก์ชั่น func () {…}ด้วยวิธีนี้ฟังก์ชั่น JavaScript ใด ๆ จะต้องดำเนินการหลังจากโหลดหน้าเว็บ คุณสามารถใช้ฟังก์ชัน AddloadListener ได้โดยตรงและสามารถใช้ฟังก์ชั่นหลายอย่างได้ โดยทั่วไปการพูดจะเป็นการดีที่สุดที่จะโหลด JavaScript ทั้งหมดโดยใช้เหตุการณ์ ONLOAD เพื่อหลีกเลี่ยงสถานการณ์ที่ไม่คาดคิด