مفهوم الأحداث
الحدث: يشير إلى بعض لحظات التفاعل المحددة التي تحدث في نافذة وثيقة أو متصفح. يمكننا جدولة الأحداث من خلال المستمعين (أو المعالجات) حتى يتم تنفيذ الكود المقابل عند حدوث الحدث.
1. تدفق الحدث
1. تدفق الحدث: يصف الترتيب الذي يتم قبول الأحداث في الصفحة
2. فقاعات الأحداث: تم استلامها بواسطة العنصر الأكثر تحديداً ثم تم نشرها لأعلى خطوة بخطوة إلى عقدة العنصر الأقل تحديدًا (وثيقة)
3. التقاط الحدث: تتلقى العقدة الأقل تحديدًا الحدث أولاً ، في حين يجب أن تتلقى العقدة الأكثر تحديداً الحدث الماضي.
2. التعامل مع الأحداث
1.html معالجة الأحداث: أضف مباشرة إلى بنية HTML
2. معالجة أحداث مستوى DOM0: قم بتعيين وظيفة إلى سمة معالج الأحداث
3. معالجة الأحداث على مستوى DOM2:
AddEventListener ("اسم الحدث" ، "وظيفة معالج الأحداث" ، القيمة المنطقية)
صحيح: التقاط الأحداث
خطأ: فقاعات الأحداث
removeEventListener () ؛
4. أي معالج الأحداث
ملحق
detachevent
<! doctype html> <html> <head> <meta charset = "utf-8"> </title> </title> </head> <body> <div id = "div" معالجة ") ؛} </script>-> <!-<script> var btn1 = document.getElementById (" btn1 ") ؛ btn1.onclick = function () {alert (" hello dom0 stileder stileder ") function () {Alert ("Hello Dom0 Level Event Handler 3")} ؛ </script>-> <!-<script> var btn1 = document.getElementById ("btn1") ؛ btn1.addeventListener ("Click" ، Demo1) ؛ btn1.addeventListerener ("Click" ، Demo2) ؛ BTN1.AdDeventListener ("Click" ، Demo3) معالج الحدث 2 ") ؛} دالة Demo3 () {Alert (" معالج أحداث مستوى DOM2 3 ") ؛} btn1.removeeventListerener (" Click "، Demo2) </script>-> <script> var btn1 = document.getElementById ("btn1") ؛ if (btn1.addeventListener) {btn1.addeventListener ("click" ، demo) ؛} آخر إذا (btn1.attachevent) {btn1.attachevent ("onclick" ، demo)} DEMO () {Alert ("Hello") ؛} </script> </body> </html>ثالثا. كائن الحدث
1. كائن الحدث: سيتم إنشاء كائن عند تشغيل حدث DOM.
2. حدث كائن الحدث:
النوع: احصل على نوع الحدث
الهدف: احصل على هدف الحدث
توقف التوقف (): منع الأحداث من الفقاعات
PRESEDEFAULT (): حظر السلوك الافتراضي للحدث
<! doctype html> <html> <head> <meta charset = "utf-8"> </title> </title> </head> <body> <div id = "div"> <button id = "btn1"> button </button> <a href = "http://www.baidu.com" ID = "Aid"> baidu </a> </viv> <script> document.getElementById ("BTN1"). AddEventListener ("Click" ، showtype) ؛ document.getElementById ("div"). addeventListener ("Click" ، showdiv) ؛ document.getElementByid ("Aid") ShowType (event) {// ALERT (event.type) ؛ Alert (event.target) ؛ event.stoppropagation () ؛ // stop event bubbles} function showdiv () {alert ("div") Event.PreventDefault () ؛} </script> </body> </html>