วัตถุเหตุการณ์: (วัตถุเหตุการณ์เป็นคุณสมบัติของวัตถุหน้าต่างเมื่อเหตุการณ์เกิดขึ้นวัตถุเหตุการณ์จะถูกสร้างขึ้นในเวลาเดียวกันเหตุการณ์จะสิ้นสุดลงและวัตถุเหตุการณ์จะหายไป)
เช่น: window.event; // รับวัตถุ
ใน DOM: อาร์กิวเมนต์ [0]; // รับวัตถุ
วิธีแอตทริบิวต์ทั่วไปสำหรับวัตถุเหตุการณ์ใน IE:
1.Clientx: เมื่อเหตุการณ์เกิดขึ้น X พิกัดของตัวชี้เมาส์ในพื้นที่ไคลเอนต์ (ไม่รวมแถบเครื่องมือ, แถบเลื่อน ฯลฯ );
2.Clienty: เมื่อมีเหตุการณ์เกิดขึ้นพิกัด y ของตัวชี้เมาส์ในพื้นที่ไคลเอนต์ (ไม่รวมแถบเครื่องมือ, แถบเลื่อน ฯลฯ );
3.KEYCODE: สำหรับเหตุการณ์ KYCODE จะระบุอักขระ Unicode ของคีย์ที่กดและสำหรับเหตุการณ์ keydown/keyup จะระบุว่าแป้นพิมพ์ที่กดเป็นตัวบ่งชี้ตัวเลข (รับค่าของคีย์);
4.Offsetx: พิกัด X ของตัวชี้เมาส์เมื่อเทียบกับวัตถุที่ทำให้เกิดเหตุการณ์;
5. Offsety: พิกัด Y ของตัวชี้เมาส์เมื่อเทียบกับวัตถุที่ทำให้เกิดเหตุการณ์;
6.Sreclement: องค์ประกอบที่ทำให้เหตุการณ์เกิดขึ้น;
วิธีแอตทริบิวต์ทั่วไปสำหรับวัตถุเหตุการณ์ใน DOM:
1.clientx;
2.clienty;
3. หน้า; พิกัด X ของตัวชี้เมาส์ที่สัมพันธ์กับหน้า;
4.pagey; พิกัด y ของตัวชี้เมาส์ที่สัมพันธ์กับหน้า;
5. StopPropagation: การเรียกวิธีนี้สามารถป้องกันการแพร่กระจายของเหตุการณ์ (เดือด) เพิ่มเติม;
6. เป้าหมาย: องค์ประกอบเหตุการณ์/วัตถุที่เรียก;
7.Type: ชื่อของเหตุการณ์;
ความเหมือนและความแตกต่างระหว่างวัตถุเหตุการณ์สองรายการ :
ความคล้ายคลึงกัน:
1. รับประเภทเหตุการณ์
2. รับรหัสแป้นพิมพ์ (เหตุการณ์คีย์ดาวน์/คีย์อัพ);
3. ตรวจจับ Shift, Alt, Ctrl;
4. รับพิกัดของพื้นที่ลูกค้า
5. รับพิกัดหน้าจอ;
ความแตกต่าง:
1. รับเป้าหมาย;
// ie: var otarget = oevent.srcelement;
// dom: var otarget = oevent.target;
2. รับรหัสอักขระ
// ie: var icharcode = oevent.keycode;
// dom: var icharcode = oevent.charcode;
3. พฤติกรรมเริ่มต้นของการปิดกั้นเหตุการณ์;
// ie: oevent.returnvalue = false;
// dom: oevent.preventdefault;
4. หยุดเดือด:
//ie:oevent.cancelbubble=true;
//dom:Oevent.stoppropagation
ประเภทเหตุการณ์:
1. เหตุการณ์เมาส์:
OnMouseOver: เมื่อเมาส์ถูกย้ายเข้ามา;
Onmouseout: เมื่อเมาส์ถูกย้ายออกไป;
Onmousedown: เมื่อกดเมาส์;
OnMouseUp: เมื่อเมาส์ถูกยกขึ้น;
onclick: เมื่อคลิกปุ่มเมาส์ซ้าย
ondblclick: เมื่อคลิกสองครั้งที่ปุ่มเมาส์ซ้าย;
2. กิจกรรมแป้นพิมพ์:
onkeydown: เกิดขึ้นเมื่อผู้ใช้กดปุ่มบนแป้นพิมพ์
onkeyup: เกิดขึ้นเมื่อผู้ใช้ปล่อยคีย์กด;
KeyPress: เมื่อผู้ใช้กดปุ่มต่อไป;
สามเหตุการณ์ html:
OnLoad: เมื่อโหลดหน้า;
Onunload: เมื่อถอนการติดตั้งหน้า;
การยกเลิก: หากผู้ใช้ไม่ได้ทำซ้ำอย่างสมบูรณ์ก่อนที่กระบวนการโหลดจะถูกยกเลิกเหตุการณ์การยกเลิกจะเกิดขึ้นหากเขาไม่ได้ทำซ้ำอย่างสมบูรณ์
ข้อผิดพลาด: เหตุการณ์ที่เกิดขึ้นเมื่อเกิดข้อผิดพลาดใน JavaScript;
เลือก: Event Select Triggered เมื่อผู้ใช้เลือกอักขระในอินพุตหรือ textarea
เปลี่ยน: ในอินพุตหรือ textarea เมื่อสูญเสียโฟกัสเหตุการณ์การเปลี่ยนแปลงจะถูกเรียกใช้ในการเลือก
ส่ง: เมื่อส่งแบบฟอร์มเหตุการณ์ส่งจะถูกเรียกใช้;
รีเซ็ต: รีเซ็ต
ปรับขนาด: เหตุการณ์ที่เกิดขึ้นเมื่อหน้าต่างหรือเฟรมถูกปรับขนาด
Scroll: เหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้เลื่อนหรือมีแถบเลื่อน
โฟกัส: เมื่อโฟกัสหายไป;
เบลอ: เมื่อคุณได้รับโฟกัส;
โมเดลเหตุการณ์ JavaScript
1. JavaScript Event Model: 1. Bubble Type: <input type = "ปุ่ม"> เมื่อผู้ใช้คลิกปุ่ม: อินพุต-body-html-document-window (ฟองจากล่างขึ้นไปด้านบน) IE เบราว์เซอร์เพียงแค่ใช้ฟอง
2. ประเภทการจับภาพ: <อินพุต type = "ปุ่ม"> เมื่อผู้ใช้คลิกปุ่ม: Window-Document-html-body-input (จากบนลงล่าง)
หลังจากมาตรฐาน ECMA เบราว์เซอร์อื่น ๆ รองรับสองประเภทและการจับภาพเกิดขึ้นก่อน
2. สามวิธีในการเขียนเหตุการณ์ดั้งเดิม:
1. <อินพุต type = "ปุ่ม" onclick = "การแจ้งเตือน ('helloWorld!')">
2. <อินพุต type = "ปุ่ม onclick = name1 ()"> ====== <สคริปต์> function name1 () {alert ('helloword!');} </script> // ฟังก์ชันชื่อ
3. <อินพุต type = "ปุ่ม" id = "input1"> // ฟังก์ชันที่ไม่ระบุชื่อ
การคัดลอกรหัสมีดังนี้:
<script>
var button1 = document.getElementById ("input1");
button1.onclick = funtion () {
แจ้งเตือน ('Helloword!')
-
</script>
3. วิธีการเขียนเหตุการณ์ที่ทันสมัย:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ปุ่ม" id = "input1"> // เพิ่มเหตุการณ์ใน IE
<script>
var fnclick () {
การแจ้งเตือน ("ฉันถูกคลิก")
-
var oinput = document.getElementById ("input1");
oinput.attachevent ("onclick", fnclick);
-
oinput.detachevent ("onclick", fnclick); // ลบเหตุการณ์ใน IE
</script>
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ปุ่ม" id = "input1"> // เพิ่มเหตุการณ์ใน dom
<script>
var fnclick () {
การแจ้งเตือน ("ฉันถูกคลิก")
-
var oinput = document.getElementById ("input1");
oinput.addeventListener ("onclick", fnclick, true);
-
oinput.removeeVentListener ("onclick", fnclick); // ลบเหตุการณ์ใน DOM
</script>
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "ปุ่ม" id = "input1"> // เข้ากันได้กับเหตุการณ์ IE และ DOM เพิ่มเติม
<script>
var fnclick1 = function () {alert ("ฉันถูกคลิก")}
var fnclick2 = function () {alert ("ฉันถูกคลิก")}
var oinput = document.getElementById ("input1");
if (document.attachevent) {
oinput.attachevent ("onclick", fnclick1)
oinput.attachevent ("onclick", fnclick2)
-
อื่น (document.addeventListener) {
oinput.addeventListener ("คลิก", fnclick1, true)
oinput.addeventListener ("คลิก", fnclick2, true)
-
</script>