القراءات ذات الصلة:
ملخص تعلم حدث JavaScript (V) نوع حدث الماوس في JS
//www.vevb.com/article/86259.htm
ملخص تعلم حدث JavaScript (ط) تدفق الحدث
//www.vevb.com/article/86261.htm
ملخص تعلم الأحداث JavaScript (4) أعضاء الحدث العام (الخصائص والأساليب)
//www.vevb.com/article/86262.htm
ملخص تعلم حدث JavaScript (II) معالج الأحداث JS
//www.vevb.com/article/86264.htm
ملخص تعلم الأحداث JavaScript (III) كائن حدث JS
1. معالج الحدث
كما ذكرنا سابقًا ، فإن الأحداث هي بعض الإجراءات التي يقوم بها المستخدم أو المتصفح نفسه ، مثل النقر والتحميل والماوس من جميع أسماء الأحداث. تسمى الوظيفة التي تستجيب لحدث معين معالج الأحداث (يسمى أيضًا معالج الأحداث ، معالج الأحداث). يبدأ اسم معالج الأحداث بـ "ON" ، وبالتالي فإن معالج الأحداث لحدث Click هو OnClick ، ويكون معالج الحدث لحدث التحميل onload.
هناك ثلاث طرق رئيسية لتحديد معالجات الأحداث للأحداث.
1. HTML معالج الأحداث
بادئ ذي بدء ، هذا النهج قديم. نظرًا لأن الإجراءات (رمز JavaScript) والمحتوى (رمز HTML) مقترنة بإحكام. ولكن لا يزال من الممكن استخدامه عند كتابة عرض تجريبي صغير.
هناك طريقتان للقيام بذلك ، وكلاهما بسيط للغاية:
النوع الأول: حدد مباشرة معالج الأحداث والإجراءات المضمنة في HTML.
نسخة الكود كما يلي: <إدخال type = "button" value = "انقر فوق!"/>
النوع الثاني: يحدد معالج الحدث في HTML ، وتدعو الإجراءات التي تم تنفيذه البرنامج النصي المحدد في مكان آخر.
نسخة الكود كما يلي: <input type = "button" value = "Click Me!"/> <script> function showMessage () {Alert ("Clicked!") ؛} </script>
ملحوظة:
1) من خلال متغير الحدث ، يمكنك الوصول مباشرة إلى الحدث نفسه. على سبيل المثال ، سوف يطفو OnClick = "Alert (event.type)" على الحدث النقر.
2) هذه القيمة تساوي العنصر المستهدف للحدث ، حيث يتم إدخال العنصر الهدف. على سبيل المثال ، يمكن أن يحصل OnClick = "Alert (this.value)" على قيمة قيمة عنصر الإدخال.
2. معالج أحداث مستوى DOM0
هذه الطريقة بسيطة ومتصفح ، ولكن يمكنها فقط إضافة معالج الأحداث إلى عنصر واحد.
نظرًا لأن هذه الطريقة تضيف معالجات الأحداث المتعددة إلى العناصر ، فإن ما يلي سيتخطى الطريقة السابقة.
أضف معالج الأحداث:
<type type = "button" value = "انقر فوق لي!" onClick = "showMessage ()"/> <script> وظيفة showMessage () {Alert ("Clicked!") ؛} </script>حذف معالج الأحداث:
نسخة الكود كما يلي: mybtn.onclick = null ؛
3. معالج الأحداث على مستوى DOM2
يمكن لمجالات الحدث على مستوى DOM2 إضافة معالجات الأحداث المتعددة إلى عنصر واحد. إنه يحدد طريقتين لإضافة وإزالة معالجات الأحداث: AddEventListener () و RemoveEventListener ().
تتطلب كلتا الطريقتين 3 معلمات: اسم الحدث ، وظيفة معالج الأحداث ، والقيمة المنطقية.
هذه القيمة المنطقية صحيحة ، ويتم معالجة الحدث في مرحلة الالتقاط ، ويتم معالجة الحدث في مرحلة الفقاعة ، والتي تتخلف عن سدادها.
أضف معالج الأحداث: الآن أضف معالجتين للحدث للزر ، وتظهر أحدهما "Hello" والآخر الملوثات العضوية الثابتة "World".
<input id = "mybtn" type = "button" value = "Click Me!"/> <script> var mybtn = document.getElementById ( mybtn.addeventListener ("Click" ، function () {Alert ("Hello") ؛} ، false) ؛ mybtn.addeventListener ("Click" ، function () {Alert ("World") ؛} ، false) ؛ </script>حذف معالج الأحداث: يجب حذف معالج الأحداث من خلال AddEventListener من خلال RemoveEventListener ، والمعلمات متسقة.
ملاحظة: لن يتم حذف الوظيفة المجهولة التي تمت إضافتها من خلال AddEventListener. الرمز التالي لن يعمل!
نسخة الكود كما يلي: mybtn.removeeventListener ("Click" ، function () {Alert ("World") ؛} ، false) ؛
يبدو أن RemoveEventListener متسقة مع معلمة AddEventListener أعلاه ، ولكن في الواقع ، فإن الوظيفة المجهولة في المعلمة الثانية مختلفة تمامًا.
لذلك من أجل حذف معالج الأحداث ، يمكن كتابة الرمز مثل هذا:
<input id = "mybtn" type = "button" value = "Click Me!"/> <script> var mybtn = document.getElementById ( var handler = function () {Alert ("hello") ؛ } mybtn.addeventListener ("انقر" ، معالج ، خطأ) ؛ mybtn.removeeventListener ("انقر" ، معالج ، خطأ) ؛ </script>2. أي معالج الأحداث
1. سيناريوهات التطبيق العملي
لا تدعم IE8 و Browsers أدناه addeventListener. إذا كنت تريد أن تكون متوافقًا مع IE8 وأسفل المتصفحات في التطوير الفعلي. إذا كنت تستخدم أحداث الربط الأصلي وتحتاج إلى معالجتها ، فيمكنك استخدام JQuery Bind بدلاً من ذلك.
2. IE8 الحدث الربط
تقوم IE8 والمتصفحات التالية بتنفيذ طريقتين متشابهتين كما في DOM: AttachEvent () و detachevent ().
تتطلب كلتا الطريقتين معلمتين: اسم معالج الأحداث ودالة معالج الأحداث.
ملحوظة:
IE11 يدعم فقط addeventListener!
IE9 و IE10 دعم ملحق و addeventListener!
TE8 وتحت دعم الملحق فقط!
يمكنك استخدام الكود التالي لاختباره في متصفحات إصدار IE المختلفة.
<input id = "mybtn" type = "button" value = "Click Me!"/> <script> var mybtn = document.getElementById ( var handlerie = function () {Alert ("helloie") ؛ } var handlerdom = function () {Alert ("hellodom") ؛ } mybtn.addeventListener ("Click" ، Handlerdom ، false) ؛ mybtn.attachevent ("onclick" ، handlerie) ؛ </script>أضف معالج الأحداث: الآن أضف معالجتين للحدث للزر ، وتظهر أحدهما "Hello" والآخر الملوثات العضوية الثابتة "World"
<script> var mybtn = document.getElementById ("mybtn") ؛ mybtn.attachevent ("onClick" ، function () {Alert ("Hello") ؛}) ؛ mybtn.attachevent ("onClick" ، function () {Alert ("World") ؛}) ؛ </script>ملاحظة: إن تأثير التشغيل هنا يستحق الإشارة إلى:
يظهر "World" أولاً في المتصفحات أدناه IE8 ، ثم "Hello". ترتيب الحدث الذي يؤدي إلى DOM هو معاكس.
IE9 وما فوق المتصفحات يطفو على السطح "Hello" ثم يطفو على "World". نفس الترتيب مثل الحدث الذي يؤدي إلى DOM.
يمكن أن نرى أن متصفح IE هو تدريجيا على المسار الصحيح. . .
حذف معالج الأحداث: يجب حذف معالج الأحداث المضافة من خلال المرفق من خلال طريقة الانفصال ، والمعلمات متسقة.
مثل حدث DOM ، لن يتم حذف الوظائف المجهولة المضافة.
لذلك من أجل حذف معالج الأحداث ، يمكن كتابة الرمز مثل هذا:
<input id = "mybtn" type = "button" value = "Click Me!"/> <script> var mybtn = document.getElementById ( var handler = function () {Alert ("hello") ؛ } mybtn.attachevent ("onClick" ، Handler) ؛ mybtn.detachevent ("onClick" ، Handler) ؛ </script>ملاحظة : هناك مكان آخر للانتباه إليه في معالج أحداث IE: SCOPE.
باستخدام طريقة مرفق () ، يعمل معالج الأحداث في النطاق العالمي ، لذلك هذا يساوي النافذة.
يكون نطاق الطريقة على مستوى DOM2 أو DOM0 داخل العنصر ، وهذه القيمة هي العنصر الهدف.
المثال التالي سوف يطفو على السطح.
<input id = "mybtn" type = "button" value = "Click Me!"/> <script> var mybtn = document.getElementById ( mybtn.attachevent ("onClick" ، function () {Alert (this === window) ؛}) ؛ </script>هذا شيء يجب وضعه في الاعتبار عند كتابة رمز المتصفح.
الكشف IE7/8:
// القاضي ie7/8 الكشف عن التوافق var isie = !! window.activexObject ؛ var isie6 = isie &&! window.xmlhttprequest ؛ var isie8 = isie && !! document.documentMode ؛ var isie7 = isie &&! isie6 &&! isie8 ؛ if (isie8 || isie7) {li.attachevent ("onClick" ، function () {_marker.openinfowindow (_iw) ؛}} else {li.addeventListener ("انقر" ، وظيفة () {_marker.openinfowindow (_iw) ؛ما سبق هو المعرفة ذات الصلة بملخص تعلم حدث JavaScript (2) من معالج أحداث JS الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا للجميع!