แนวคิดของเหตุการณ์
เหตุการณ์: หมายถึงช่วงเวลาการโต้ตอบเฉพาะบางอย่างที่เกิดขึ้นในเอกสารเอกสารหรือเบราว์เซอร์ เราสามารถกำหนดเวลากิจกรรมผ่านผู้ฟัง (หรือตัวจัดการ) เพื่อให้รหัสที่เกี่ยวข้องจะถูกดำเนินการเมื่อเหตุการณ์เกิดขึ้น
1. การไหลของเหตุการณ์
1. การไหลของเหตุการณ์: อธิบายลำดับที่เหตุการณ์ได้รับการยอมรับในหน้า
2. ฟองเหตุการณ์: ได้รับโดยองค์ประกอบที่เฉพาะเจาะจงที่สุดจากนั้นเผยแพร่ทีละขั้นตอนไปยังโหนดขององค์ประกอบที่เฉพาะเจาะจงน้อยที่สุด (เอกสาร)
3. การจับเหตุการณ์: โหนดที่เฉพาะเจาะจงน้อยที่สุดจะได้รับเหตุการณ์ก่อนในขณะที่โหนดที่เฉพาะเจาะจงที่สุดควรได้รับเหตุการณ์ล่าสุด
2. การจัดการเหตุการณ์
1. การประมวลผลเหตุการณ์ HTML: เพิ่มโครงสร้าง HTML โดยตรงโดยตรง
2. การประมวลผลเหตุการณ์ระดับ DOM0: กำหนดฟังก์ชั่นให้กับแอตทริบิวต์ตัวจัดการเหตุการณ์
3. การจัดการเหตุการณ์ระดับ DOM2:
addeventListener ("ชื่อเหตุการณ์", "ฟังก์ชันตัวจัดการเหตุการณ์", ค่าบูลีน)
จริง: การจับเหตุการณ์
FALSE: Event Bubbles
removeEventListener ();
4. เช่นตัวจัดการกิจกรรม
สิ่งที่แนบมาด้วย
แช่
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <body> <div id = "div"> <button id = "btn1"> ปุ่ม </button> </div> <! btn1 = document.getElementById ("btn1"); btn1.onclick = function () {การแจ้งเตือน ("Hello Dom0 Event Handler" Handler ")}; // overrided btn1.onclick = function () {Alert (" Hello Dom0 Handler 2 ")}; 3 ")}; </script>-> <!-<Script> var btn1 = document.getElementById (" btn1 "); btn1.addeventListener (" คลิก ", demo1); btn1.addeventListener (" คลิก ", demo2); demo1 () {Alert ("ตัวจัดการเหตุการณ์ระดับ DOM2 1");} ฟังก์ชั่น demo2 () {แจ้งเตือน ("ตัวจัดการเหตุการณ์ระดับ DOM2 2");} ฟังก์ชั่น demo3 () {แจ้งเตือน ("ตัวจัดการเหตุการณ์ระดับ Dom2 3") document.getElementById ("btn1"); ถ้า (btn1.addeventListener) {btn1.addeventListener ("คลิก", สาธิต);} อื่นถ้า (btn1.attachevent) {btn1.attachevent ( Demo () {Alert ("Hello");} </script> </body> </html>iii. วัตถุเหตุการณ์
1. วัตถุเหตุการณ์: วัตถุจะถูกสร้างขึ้นเมื่อเหตุการณ์ DOM ถูกทริกเกอร์
2. เหตุการณ์เหตุการณ์เหตุการณ์:
ประเภท: รับประเภทเหตุการณ์
เป้าหมาย: รับเป้าหมายเหตุการณ์
stoppropagation (): ป้องกันเหตุการณ์จากฟองสบู่
PreventDefault (): บล็อกพฤติกรรมเริ่มต้นของเหตุการณ์
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "div"> <button id = "btn1"> ปุ่ม </pution> <a href = "http://www.baidu.com" ID = "AID"> BAIDU </a> </div> <script> document.getElementById ("BTN1"). addEventListener ("คลิก", showtype); document.getElementById ("div"). addeventListener ("คลิก" showtype (เหตุการณ์) {// alert (event.type); Alert (event.target); event.stoppropagation (); // stop Event Bubbles} ฟังก์ชั่น showdiv () {alert ("div")} ฟังก์ชั่น showa (เหตุการณ์) {// event.stoppropagation (); Event.preventDefault ();} </script> </body> </html>