สำหรับประเภทเหตุการณ์ผู้ใช้สิ่งที่ใช้กันมากที่สุดคือเมาส์คีย์บอร์ดและเบราว์เซอร์
1. เหตุการณ์เมาส์:
เหตุการณ์เมาส์ทั้งหมดมักใช้ ตัวอย่างต่อไปนี้ใช้เพื่อทดสอบเหตุการณ์เมาส์ต่างๆ
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
มือจับฟังก์ชั่น (oEvent) {
var disp = document.getElementById ("แสดง");
if (window.event) oEvent = window.event; // จัดการความเข้ากันได้และรับวัตถุ
disp.innerhtml + = "ชื่อเหตุการณ์เมาส์:" + oevent.type + "<br>";
-
window.onload = function () {
var op = document.getElementById ("Box");
op.onmousedown = handle;
op.onmouseover = handle;
op.onmouseup = handle;
op.onmouseout = handle;
op.onclick = handle;
op.ondblclick = handle;
-
</script>
<div>
<div id = "box">
เนื้อหากล่อง
</div>
<p id = "display"> </p>
</div>
การทดสอบปุ่มค่าคีย์เมาส์ (พร้อมตารางอ้างอิง)
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น TestClick (oEvent) {
var odiv = document.getElementById ("แสดง");
if (window.event)
OEVENT = WINDOW.EVENT;
odiv.innerhtml += oevent.button; // เอาต์พุตค่าของปุ่ม
-
document.onmousedown = testClick;
window.onload = testClick; // การทดสอบไม่ได้กดปุ่มใด ๆ
</script>
<div>
<p id = "display"> </p>
</div>
2. กิจกรรมคีย์บอร์ด
มีกิจกรรมคีย์บอร์ดไม่กี่ประเภทมีเพียงสามประเภทของเหตุการณ์
Keydown (กดปุ่มกดค้างไว้จะทริกเกอร์ต่อไป)
Keypress (ทริกเกอร์เมื่อกดปุ่มและตัวละครถูกสร้างขึ้นนั่นคือมันจะละเว้นปุ่มฟังก์ชั่นเช่น Shift, Alt, Ctrl)
Keyup (ทริกเกอร์เมื่อมีการปล่อยคีย์)
ตัวอย่างการฟังแป้นพิมพ์:
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
มือจับฟังก์ชั่น (oEvent) {
if (window.event) oEvent = window.event; // จัดการความเข้ากันได้และรับวัตถุเหตุการณ์
var odiv = document.getElementById ("แสดง");
odiv.innerhtml + = oevent.type + ""; // ชื่อเหตุการณ์เอาท์พุท
-
window.onload = function () {
var otextarea = document.getElementById ("textin");
otextarea.onkeydown = handle; // ฟังกิจกรรมคีย์บอร์ดทั้งหมด
otextarea.onkeyup = handle;
otextarea.onkeypress = handle;
-
</script>
<div>
<textarea rows = "4" cols = "50" id = "textin">
</textarea>
<p id = "display"> </p>
</div>
สำหรับแป้นพิมพ์สิ่งที่สำคัญที่สุดไม่ใช่ชื่อของเหตุการณ์ แต่กดคีย์อะไร เนื่องจาก IE ไม่มีคุณสมบัติ charcode keycode จึงเหมือนกับ Keycode DOM มาตรฐานเฉพาะเมื่อเหตุการณ์ KeyDown และ KeyUp เกิดขึ้น
ในเหตุการณ์ KeyPress จะใช้วิธีการต่อไปนี้
การคัดลอกรหัสมีดังนี้: oevent.charcode = (oevent.type == "keypress")? oevent.keycode :();
เหตุผลที่ไม่ได้ใช้ปุ่มกดเป็นเพราะมันหมายถึงคีย์คีย์บอร์ดไม่ใช่อักขระเอาต์พุต ดังนั้นเอาท์พุท "A" และ "A", คิกจี้นั้นเทียบเท่ากันและ Charcode มีความโดดเด่นด้วยอักขระ
นอกจากนี้ใน KeyPress ค่าปุ่มกดของ DOM มาตรฐานอยู่เสมอ 0;
ตัวอย่าง: คุณสมบัติที่เกี่ยวข้องของเหตุการณ์แป้นพิมพ์:
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
มือจับฟังก์ชั่น (oEvent) {
var odiv = document.getElementById ("แสดง");
if (window.event) oEvent = window.event; // จัดการความเข้ากันได้และรับวัตถุเหตุการณ์
// ตั้งค่า arcode IE
OEVENT.CHARCODE = (OEVENT.TYPE == "KeyPress")? OEVENT.KEYCODE: 0;
odiv.innerhtml + = oevent.type + ": charcode" + oevent.charcode + "keycode" + oevent.keycode + "<br>"; // การทดสอบเอาต์พุต
-
window.onload = function () {
var otextarea = document.getElementById ("textin");
otextarea.onkeydown = handle; // ฟังกิจกรรมคีย์บอร์ดทั้งหมด
otextarea.onkeypress = handle;
-
</script>
<div>
<textarea rows = "4" cols = "50" id = "textin">
</textarea>
<p id = "display"> </p>
</div>
3. เหตุการณ์ HTM
สำหรับเบราว์เซอร์เหตุการณ์ HTML ต่าง ๆ มีเหตุการณ์ของตัวเองและบางเหตุการณ์มักจะถูกเปิดเผยโดยผู้ใช้เช่นโหลดข้อผิดพลาดเลือก ฯลฯ เหตุการณ์ HTML ที่ใช้กันทั่วไปมีดังนี้:
เหตุการณ์โหลดเป็นหนึ่งในเหตุการณ์ที่ใช้กันทั่วไปเนื่องจากเฟรมเวิร์ก DOM ไม่ได้ถูกสร้างขึ้นก่อนที่การโหลดหน้าจะเสร็จสมบูรณ์ดังนั้นจึงไม่มีการดำเนินการที่เกี่ยวข้อง
กำหนดโหลดไปยังวัตถุหน้าต่างเหตุการณ์การขนถ่ายเท่ากับวิธีการ ONLOAD และ ONUNLOAD ที่ทำเครื่องหมายด้วย <body>