1. เหตุการณ์ฟองสบู่
มีโมเดลกิจกรรมสองประเภทสำหรับเบราว์เซอร์: จับเหตุการณ์และเหตุการณ์ฟอง เนื่องจาก IE ไม่สนับสนุนเหตุการณ์การจับภาพต่อไปนี้ส่วนใหญ่ใช้เหตุการณ์ฟองเป็นคำอธิบาย
(Dubbed Bubble) ประเภทฟองหมายถึงเหตุการณ์ที่เฉพาะเจาะจงที่สุดสำหรับเหตุการณ์ที่เฉพาะเจาะจงน้อยที่สุดที่ทริกเกอร์ทีละหนึ่ง
การคัดลอกรหัสมีดังนี้:
<body onclick = "add ('body <br>')">
<div onclick = "เพิ่ม ('div <br>')">
<ponclick = "เพิ่ม ('p <br>')"> คลิกฉัน </p>
</div>
</body>
<div id = "display">
</div>
<script type = "text/javascript">
ฟังก์ชั่นเพิ่ม (stext) {
var ulo = document.getElementById ("แสดง");
ulo.innerhtml += stext;
-
</script>
ฟังก์ชั่นทั้งสามข้างต้นได้เพิ่มฟังก์ชั่น onclick ฟังก์ชั่นทั้งสามหลังจากองค์ประกอบ P แบบสแตนด์อโลนถูกยิง องค์ประกอบ P จะถูกดำเนินการครั้งแรกจากนั้น DIV จะถูกดำเนินการและในที่สุดร่างกายจะถูกดำเนินการ
ที่นี่นี่เป็นเครื่องเตือนความทรงจำของเหตุการณ์การจับภาพและคำสั่งซื้อของมันตรงข้ามกับเหตุการณ์ฟองสบู่
2. การตรวจสอบเหตุการณ์
เหตุการณ์ต้องใช้ฟังก์ชันเพื่อตอบสนอง ฟังก์ชั่นประเภทนี้มักจะเรียกว่าตัวจัดการเหตุการณ์ จากมุมมองอื่นฟังก์ชั่นเหล่านี้กำลังฟังแบบเรียลไทม์ว่าเหตุการณ์เกิดขึ้นมักจะเรียกว่าผู้ฟังเหตุการณ์ ฟังก์ชั่นการฟังเหตุการณ์ค่อนข้างแตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกัน
ฉัน. วิธีการฟังทั่วไปเช่นการใช้วิธี onclick เกือบทุกแท็กรองรับวิธีนี้ และความเข้ากันได้ของเบราว์เซอร์นั้นสูงมาก
พิจารณาพฤติกรรมการแยกเหตุการณ์
โดยทั่วไปการตรวจสอบโดยใช้วิธีการต่อไปนี้
การคัดลอกรหัสมีดังนี้:
<body>
<div id = "me"> คลิก </div>
<script type = "text/javascript">
var opp = document.getElementById ("me"); พบเหตุการณ์ //
opp.onclick = function () {// ตั้งค่าฟังก์ชันเหตุการณ์
การแจ้งเตือน ("ฉันคลิก!")
-
</script>
</body>
ทั้งสองวิธีที่แนะนำข้างต้นนั้นสะดวกมากและเป็นที่รักของนักพัฒนา Everbright เมื่อทำและจัดการฟังก์ชั่นเล็ก ๆ แต่สำหรับเหตุการณ์เดียวกัน พวกเขาสามารถเพิ่มฟังก์ชั่นเดียวเช่นฟังก์ชั่น onclick ที่ทำเครื่องหมายด้วย p ทั้งสองวิธีสามารถมีฟังก์ชั่นเดียวเท่านั้น ดังนั้นเช่นมีวิธีแก้ปัญหาเพื่อนร่วมงานและ DOM มาตรฐานกำหนดวิธีอื่น
ii. วิธีการตรวจสอบใน IE
ในเบราว์เซอร์ตอนเช้าแต่ละองค์ประกอบมีสองวิธีในการจัดการการฟังเวลา
เป็นสิ่งที่แนบมา () และ detachenevt () ตามลำดับ
อย่างที่คุณเห็นจากชื่อฟังก์ชั่นของพวกเขา ataintEnevt () เป็นฟังก์ชั่นที่ใช้ในการเพิ่มการประมวลผลเหตุการณ์ในองค์ประกอบในขณะที่ DetacheVent () ใช้เพื่อลบฟังก์ชั่นการฟังในองค์ประกอบ ไวยากรณ์ของพวกเขามีดังนี้:
[Object] .attachevent ("enevt_handler", "fnhandler");
[Object] .detachevent ("enevt_handler", "fnhandler");
ในหมู่พวกเขา ENEVT_HANDLER แสดงถึง onClick, Onload, OnMouseOver ฯลฯ
FNHandler เป็นชื่อของฟังก์ชั่นฟัง
ในส่วนก่อนหน้าคุณสามารถใช้วิธีการแนบ () แทนที่จะเพิ่มฟังก์ชั่นการฟัง เมื่อคุณคลิกคุณสามารถใช้ DetacheVent () เพื่อลบฟังก์ชั่นการฟังเพื่อที่จะไม่ถูกดำเนินการหลังจากคลิกถัดไป
การคัดลอกรหัสมีดังนี้:
<script type = "text/javascript">
ฟังก์ชั่น fnclick () {
การแจ้งเตือน ("ฉันถูกคลิก!");
op.detachevent ("onclick", "fnclick");
-
var op;
window.onload = function () {
op = document.getElementById ("OOP"); // ค้นหาวัตถุ
op.attachevent ("onclick", "fnclick"); // เพิ่มฟังก์ชั่นฟัง
-
</script>
<div>
<p id = "oop">
</p>
</div>
iii. เพิ่มกิจกรรมการฟังหลายครั้ง (เช่น)
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น fnclick1 () {
การแจ้งเตือน ("ฉันถูกคลิกโดย fnclick1");
-
ฟังก์ชั่น fnclick2 () {
การแจ้งเตือน ("ฉันถูกคลิกโดย fnclick2");
//op.detachevent("onclick",fnclick1); // ลบฟังก์ชันฟัง 1
-
var op;
window.onload = function () {
op = document.getElementById ("myp"); // ค้นหาวัตถุ
op.attachevent ("onclick", fnclick1); // เพิ่มฟังก์ชั่นฟัง 1
op.attachevent ("onclick", fnclick2); // เพิ่มฟังก์ชั่นฟัง 2
-
</script>
</head>
<body>
<div>
<p id = "myp"> คลิกฉัน </p>
</div>
3. การตรวจสอบเหตุการณ์ DOM มาตรฐาน
ด้วยสองวิธีของ IE, DOM มาตรฐานยังใช้สองวิธีในการเพิ่มและลบฟังก์ชั่นฟังตามลำดับ เช่น addeventListener () และ removeVentListener ()
ซึ่งแตกต่างจาก IE ฟังก์ชั่นทั้งสองนี้ยอมรับพารามิเตอร์ 3 ตัวคือชื่อของเหตุการณ์ชื่อของฟังก์ชั่นที่จะกำหนดและไม่ว่าจะใช้สำหรับขั้นตอนฟองหรือขั้นตอนการจับภาพ พารามิเตอร์ของขั้นตอนการจับภาพเป็นจริงและพารามิเตอร์ของขั้นตอนฟองเป็นเท็จ ไวยากรณ์มีดังนี้:
การคัดลอกรหัสมีดังนี้:
[Object] .addeventListener ("Event_name", fnhandler, bcapture);
[Object] .removeEventListener ("Event_name", fnhandler, bcapture);
วิธีการใช้งานของฟังก์ชั่นทั้งสองนี้คล้ายกับ IE แต่คุณควรทราบว่าชื่อของ event_name คือ "คลิก", "Mouseover" ฯลฯ แทนที่จะเป็น "onclick" และ "onmouseover" ใน IE
นอกจากนี้พารามิเตอร์ที่สาม bcapture มักจะถูกตั้งค่าเป็นเท็จในขั้นตอนเดือด
วิธีการฟังเหตุการณ์ DOM มาตรฐาน:
การคัดลอกรหัสมีดังนี้:
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น fnclick1 () {
การแจ้งเตือน ("ฉันคลิก 1");
op.removeeVentListener ("คลิก", fnclick1, false);
-
ฟังก์ชั่น fnclick2 () {
การแจ้งเตือน ("ฉันถูกคลิก 2");
-
window.onload = function () {
op = document.getElementById ("myp");
op.addeventListener ("คลิก", fnclick1, false);
op.addeventListener ("คลิก", fnclick2, false);
-
</script>
<div>
<p id = "myp"> คลิกฉัน </p>
</div>
คุณสามารถทดสอบคำสั่งการดำเนินการเฉพาะ
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่าคุณจะชอบมัน