تدفق الحدث: هناك نوعان. أي هو تدفق فقاعة الأحداث. عند بدء تشغيل الحدث ، يتم استلامه من العنصر الأكثر تحديداً وينتشر لأعلى خطوة بخطوة إلى عقد أقل محددة (عنصر -> مستند). على النقيض من ذلك ، دفق التقاط أحداث Netscape.
تنص أحداث مستوى DOM2 على أن تدفق الحدث يتضمن ثلاث مراحل: مرحلة التقاط الحدث ، والمرحلة المستهدفة ومرحلة فقاعة الأحداث.
معظم الوقت هي مرحلة الفقاعة لإضافة معالج الأحداث إلى دفق الحدث. كستناء EventuTil:
var eventUtil = {addHandler: function (element ، type ، handler) {if (element.addeventListener) {element.addeventListener (type ، handler ، false) ؛ } آخر إذا (element.attachevent) {element.attachevent ('On' + type ، handler) ؛ // ie8} آخر {element ['on' + type] = handler ؛ }} ، removeHandler: function () {...}}لنلقي نظرة عليه بالتفصيل أدناه:
معالج أحداث مستوى DOM0
تتمثل الطريقة التقليدية لتحديد معالجات الأحداث من خلال JavaScript في تعيين وظيفة إلى سمة معالج الأحداث.
كل عنصر له سمات معالج الأحداث الخاصة بها ، والتي عادة ما تكون جميعها صغيرة ، مثل Onclick. يمكن أن يحدد ضبط قيمة هذه الخاصية على وظيفة معالج الحدث.
var btn = document.getElementById ('mybtn') ؛ // إضافة معالج الأحداث btn.onclick = function () {Alert (this) ؛ // هو عنصر dom btn} ؛ // إزالة معالج الأحداث btn.onclick = null ؛المزايا: 1. بسيطة 2
العيوب: لم يتم تحديد معالجات الأحداث قبل تشغيل الرمز ، لذلك توجد هذه الرموز خلف الزر في الصفحة ، لذلك من الممكن عدم استلام أي استجابة بعد فترة من الزمن ، وتصبح تجربة المستخدم أسوأ.
معالج أحداث مستوى DOM2
يتم تعريف طريقتين للتعامل مع العمليات التي تحدد وحذف معالجات الأحداث: addeventListener () وإزالة expteventListener (). ثلاث معلمات ، 1. اسم الحدث الذي سيتم معالجته. 2. الوظيفة كمعالج الحدث 3. قيمة منطقية. القيمة المنطقية الأخيرة صحيحة ، مما يعني أن معالج الأحداث يسمى في مرحلة الالتقاط ، وينعكس كاذبة أن معالج الأحداث يسمى في مرحلة الفقاعة.
// إضافة متعددة معالجات الأحداث var btn = document.getElementById ('mybtn') ؛ btn.addeventListener ('click' ، function () {alert (this) ؛ // is dom element btn} ، false) ؛ btn.addeventListener ('click' ، function () {alert ('hello world') ؛} BTN.RemoveEventListener ('click' ، function () {// function anonymous function لا يمكن إزالة ، فشل الإزالة} ، خطأ) ؛ // rewrite var handler = function () {Alert (this.id) ؛ } ؛ btn.addeventListener ('Click' ، Handler ، false) ؛ // قم بإزالة معالج الحدث مرة أخرى btn.removeeventListener ("انقر" ، معالج ، خطأ)يتم إطلاق معالجات الأحداث هذين بالترتيب الذي تمت إضافته بهما. في معظم الحالات ، تتم إضافة معالجات الأحداث إلى مرحلة الفقاعات من تيار الحدث ، والتي يمكن أن تكون أقصى توافق مع إصدارات مختلفة من المتصفح.
المزايا: عنصر واحد يمكن أن يضيف معالجات الأحداث المتعددة
العيوب: لا تدعم IE8 وتحت المتصفحات معالجات أحداث مستوى DOM2. (بما في ذلك IE8)
IE معالج الأحداث
يتم تعريف طريقتين ، على غرار ما ورد أعلاه: ancankevent () ، detachevent (). تتلقى هاتان الطريقتان نفس المعلمتين: اسم معالج الحدث ووظيفة معالج الأحداث. نظرًا لأن IE8 والإصدارات السابقة تدعم فقاعات الأحداث فقط ، ستتم إضافة معالجات الأحداث من خلال Detachevent () إلى مرحلة الفقاعة.
var btn = document.getElementById ('mybtn') ؛ btn.attachevent ('onClick' ، function () {Alert (this) ؛ // window}) ؛ btn.attachevent ('onClick' ، funciton () {Alert ("Hello ، World") ؛}) ؛انقر فوق الزر ، فإن ترتيب التشغيل لهذين المعالجات الحدث هو عكس ما سبق بالضبط. لا يتم تشغيله بالترتيب في أي من معالجات الأحداث ، تمامًا عكس ذلك.
المزايا: عنصر واحد يمكن أن يضيف معالجات الأحداث المتعددة
العيوب: دعم فقط IE.
معالج حدث المتصفح
على سبيل المثال:
var eventUtil = {addHandler: function (ele ، type ، handler) {if (ele.addeventListener) {ele.addeventListener (type ، handler ، false) ؛ } آخر إذا (ele.attachevent) {ele.attachevent ('On' + type ، Handler) ؛ } else {eLe ['on' + type] = handler}} ، removeHandler: function (ele ، type ، handler) {if (ele.removeeventListener) {ele.RemoveEventListener (type ، handler ، false) ؛ } آخر إذا (ele.detachevent) {ele.detachevent ('on' + type ، handler) ؛ } آخر {eLe ['on' + type] = null ؛ }}}