เหตุการณ์ใน JavaScript คืออะไรและมีการจัดการอย่างไร?

เหตุการณ์คือการกระทำหรือเหตุการณ์ที่เกิดขึ้นในระบบ ในโลกของการเขียนโปรแกรม เหตุการณ์คือสิ่งที่เกิดขึ้นกับองค์ประกอบ HTML แต่เมื่อ ใช้ในหน้า HTML ซึ่งสามารถตอบสนองต่อเหตุการณ์เหล่านี้ได้ ในบทความนี้เราจะดูว่าเหตุการณ์ประเภทต่างๆใน JavaScript มีอะไรบ้างและทำงานอย่างไรตามลำดับต่อไปนี้:

• เหตุการณ์ใน JavaScript คืออะไร?
• ประเภทของเหตุการณ์ใน JavaScript
  • Onclick เหตุการณ์
  • เหตุการณ์ Onkeyup
  • เหตุการณ์ Onmouseover
  • Onload เหตุการณ์
  • เหตุการณ์ออนโฟกัส

เหตุการณ์ใน JavaScript คืออะไร?

Javascript มีเหตุการณ์ที่จัดเตรียมอินเทอร์เฟซแบบไดนามิกให้กับเว็บเพจ เหตุการณ์เหล่านี้เชื่อมต่อกับองค์ประกอบในไฟล์ Document Object Model (การตัดสิน).

นอกจากนี้โดยค่าเริ่มต้นเหตุการณ์เหล่านี้จะใช้การแพร่กระจายฟองเช่นขึ้นไปใน DOM จากเด็กไปยังผู้ปกครอง เราสามารถผูกเหตุการณ์ทั้งแบบอินไลน์หรือสคริปต์ภายนอก ด้วยความช่วยเหลือของ JavaScript คุณสามารถตรวจจับเมื่อมีเหตุการณ์บางอย่างเกิดขึ้นและทำให้เกิดสิ่งต่างๆเพื่อตอบสนองต่อเหตุการณ์เหล่านั้น

ประเภทของเหตุการณ์ใน JavaScript

มีเหตุการณ์หลายประเภทใน ที่ใช้เพื่อตอบสนองต่อเหตุการณ์ต่างๆ ในที่นี้เราจะกล่าวถึงเหตุการณ์ที่มีชื่อเสียงหรือเป็นที่นิยมมากที่สุดเช่น:

• เมื่อคลิก
• Onkeyup
• Onmouseover
• Onload
• ออนโฟกัส

ดังนั้นเรามาดูเหตุการณ์เหล่านี้ใน JavaScript พร้อมตัวอย่าง

Onclick เหตุการณ์

เหตุการณ์ Onclick เป็นเหตุการณ์ของเมาส์และกระตุ้นตรรกะใด ๆ ที่กำหนดไว้หากผู้ใช้คลิกที่องค์ประกอบที่ถูกผูกไว้ ลองดูตัวอย่างและดูว่ามันทำงานอย่างไร:

ฟังก์ชัน edu () {alert ('Welcome to Edureka!')} คลิกปุ่ม

เอาท์พุต:

หลังจากคลิกปุ่มคุณจะได้รับข้อความแจ้งเตือนดังต่อไปนี้:

เหตุการณ์ Onekeyup

เหตุการณ์นี้เป็นเหตุการณ์ของแป้นพิมพ์และใช้เพื่อดำเนินการคำสั่งเมื่อใดก็ตามที่ปล่อยปุ่มหลังจากกด ตัวอย่างต่อไปนี้แสดงการทำงานของเหตุการณ์:

อาร์เรย์เรียงลำดับ c ++

var a = 0 var b = 0 var c = 0 ฟังก์ชัน changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 if (a> 255) a = a - b if (b> 255) b = a if (c> 255) c = b}

เอาท์พุต:

หลังจากที่คุณเขียนบางสิ่งจะมีลักษณะดังนี้:

เหตุการณ์ Onmouseover

เหตุการณ์ onmouseover ใน JavaScript สอดคล้องกับการวางเมาส์ไว้เหนือองค์ประกอบและลูกของมันที่ถูกผูกไว้ ตัวอย่างดังแสดงด้านล่าง:

ฟังก์ชัน hov () {var e = document.getElementById ('hover') e.style.display = 'none'}

เอาท์พุต:

กล่องสีจะปรากฏขึ้นก่อนที่จะวางเมาส์ ทันทีที่คุณวางเมาส์เหนือกล่องกล่องนั้นจะหายไป

Onload เหตุการณ์

เหตุการณ์ onload จะเกิดขึ้นเมื่อโหลดองค์ประกอบอย่างสมบูรณ์ ลองดูตัวอย่างและดูว่ามันทำงานอย่างไร:

เอาท์พุต:

เหตุการณ์ออนโฟกัส

เหตุการณ์ออนโฟกัสมีรายการองค์ประกอบซึ่งดำเนินการคำสั่งเมื่อใดก็ตามที่ได้รับโฟกัส ตัวอย่างต่อไปนี้แสดงให้เห็นว่าเหตุการณ์ออนโฟกัสทำงานอย่างไร:

เน้นฟังก์ชัน () {var e = document.getElementById ('input') if (ยืนยัน ('โฟกัสเหตุการณ์')) {e.blur ()}}
โฟกัสในช่องป้อนข้อมูล:
 

เอาท์พุต:

นี่คือเหตุการณ์ที่ใช้บ่อยที่สุดใน JavaScript ด้วยเหตุนี้เราจึงสิ้นสุดบทความของเรา ฉันหวังว่าคุณจะเข้าใจว่าเหตุการณ์คืออะไรและใช้อย่างไร

ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อกนี้แล้วเราจะติดต่อกลับไป