توثيق أحداث جافا سكريبت. JavaScript - أنواع الأحداث. إرفاق الأحداث بالعناصر الصحيحة

موضوع الأحداث مهم جدا وشيق جدا. بفضلها ، يمكنك القيام بالكثير من الأشياء الشيقة التي سيسعد المستخدم بها. حدث JavaScriptهو إجراء محدد يتم تشغيله بواسطة المستخدم أو المستعرض. على سبيل المثال ، يمكن أن يكون الحدث عبارة عن نقرة بالماوس على زر ، وحركة الماوس ، والتركيز على عنصر ، وتغيير قيمة في بعض الحقول النصية ، وتغيير حجم نافذة المتصفح ، وما إلى ذلك.

لقد أعددت جدولًا يحتوي على جميع الأحداث (التي أعرفها على الأقل) فيها جافا سكريبت... ستجد فيه ، أولاً ، اسم الحدث والعناصر التي يمكن أن تولد هذا الحدث ووصف الحدث نفسه. أحداث JavaScript.

حدث	شيء	سبب حدوثها
إحباط	صورة	مقاطعة تحميل الصور
طمس		فقدان تركيز العنصر
يتغيرون	FileUpload ، حدد ، نص ، Textarea	تغيير القيمة
انقر	منطقة ، زر ، خانة اختيار ، وثيقة ، رابط ، راديو ، إعادة تعيين ، إرسال	انقر بالماوس على عنصر
DblClick	منطقة ، وثيقة ، وصلة	انقر مرتين على عنصر
دراج دروب	نافذة او شباك	انتقل إلى نافذة المتصفح
ركز	زر ، خانة اختيار ، تحميل ملف ، إطار ، طبقة ، كلمة مرور ، راديو ، إعادة تعيين ، تحديد ، إرسال ، نص ، منطقة نصية ، نافذة	وضع التركيز على عنصر
زر أسفل		الضغط على مفتاح في لوحة المفاتيح
ضغط المفتاح	وثيقة ، صورة ، وصلة ، منطقة تيكستريا	الضغط على مفتاح على لوحة المفاتيح
KeyUp	وثيقة ، صورة ، وصلة ، منطقة تيكستريا	تحرير مفتاح على لوحة المفاتيح
حمل	وثيقة ، صورة ، طبقة ، نافذة
MouseDown	زر ، مستند ، رابط	تم الضغط على زر الفأرة
تحرك الماوس	نافذة او شباك	الفأرة في الحركة
إخراج الفأر	منطقة ، طبقة ، وصلة	الماوس خارج حدود العنصر
MouseOver	منطقة ، طبقة ، وصلة	الماوس فوق العنصر
MouseUp	زر ، مستند ، رابط	صدر زر الماوس
نقل	إطار	نقل عنصر
إعادة ضبط	استمارة	إعادة ضبط النموذج
تغيير الحجم	إطار ، نافذة	تغيير الحجم
يختار	نص ، Textarea	اختيار النص
يقدم	استمارة	نقل البيانات
تفريغ	نافذة او شباك	تفريغ الصفحة الحالية

الآن دعنا نتعرف على كيفية القيام بذلك استخدام الأحداث في JavaScript... هناك ما يسمى معالجات الأحداث. معالجات الأحداثفقط حدد ما سيحدث عند وقوع حدث معين. معالجات أحداث JavaScriptله الشكل العام التالي:

OnNameEvents

وهذا يعني أن البادئة تأتي أولاً " تشغيل"، فما الخطوة التالية اسم الحدث، على سبيل المثال ، مثل معالجات الأحداث: مركز, عند النقر, عند تقديمإلخ. أعتقد أنه لم تكن هناك أسئلة هنا. والآن السؤال الرئيسي: " كيف أستخدم الأحداث في JavaScript؟". مساحة التطبيق الخاصة بهم ضخمة ، وسننظر الآن في مشكلة واحدة معك. هناك ثلاثة روابط على الصفحة. كل رابط مسؤول عن لون خلفية مختلف (على سبيل المثال ، الأبيض والأصفر والأخضر ). في البداية ، الخلفية بيضاء. عند تحريك الماوس فوق ارتباط معين ، يتغير لون الخلفية. عند تحريك الماوس ، يعود لون الخلفية إلى اللون الافتراضي. عند النقر بالماوس على الرابط ، يتم الاحتفاظ بلون الخلفية كإعداد افتراضي.

أبيض
أصفر
لون أخضر

دعونا نتعامل مع هذا السيناريو ، أو بالأحرى مع الكل صفحة HTMLبدعم جافا سكريبتو CSS(بمعنى آخر ، هذا مثال DHTML). الأشياء المعتادة تأتي أولاً علامات HTMLالذي يبدأ به أي صفحة HTML... بعد ذلك ، نقوم بإنشاء نمط نطلب فيه أن تكون جميع الروابط على هذه الصفحة باللون الأزرق ، وأن يكون تحتها خط وأن يكون مؤشر الماوس عليها على شكل "المؤشر". قد تقول ، "لماذا تحتاج إلى تعيين النمط؟ بعد كل شيء ، ستكون الروابط هي نفسها تمامًا على أي حال." هذا صحيح ، روابط ، لكن ليس لدينا روابط على هذا النحو (بعد كل شيء ، لا توجد سمة hrefفي العلامة) ، لذلك سيكون نصًا عاديًا أسود بشكل افتراضي (على الرغم من أنه يمكنك النقر فوق النص أيضًا). لذلك ، الأسلوب أمر لا بد منه. يمكنك إزالته ومعرفة ما سيحدث. الأفضل من ذلك ، ضع سمة href(أي قيمة ، حتى فارغة) واشرح سبب توقف البرنامج النصي عن العمل. علاوة على ذلك بدأ بالفعل جافا سكريبت... نقوم بإنشاء متغير اللون الافتراضيوهو المسؤول عن اللون الافتراضي. ثم هناك ثلاث وظائف:

وظيفة setTempColor ()مسؤول عن تغيير اللون المؤقت.

وظيفة setDefaultColor ()مسؤول عن تغيير اللون الافتراضي.

وظيفة اللون الافتراضي ()يضبط لون الخلفية الافتراضي.

ثم هناك روابط ذات سمات في النموذج معالجات الأحداث... عند تحريك الماوس فوق الارتباط ، حدث MouseOver، على التوالى، معالج الحدث onMouseOverيستدعي الوظيفة setTempColor ()ويمرر المعلمة المقابلة. عندما تزيل الماوس من العنصر ، حدث MouseOut، ثم استدعاه وظيفة defaultColor ()، مما يجعل لون الخلفية هو اللون الافتراضي. وأخيرًا ، عند النقر فوق الارتباط ( معالج onClick) تسمى الوظيفة setDefaultColor ()، والذي يضبط اللون المحدد في المعلمة على لون الخلفية الافتراضي. كما ترى ، كل شيء بسيط للغاية.

كان مبدأ استخدام الأحداث في JavaScript، وبعد ذلك كل شيء يعتمد فقط على خيالك!

تعتمد قدرة JavaScript على إنشاء صفحات html ديناميكية على ثلاث ركائز. تم بالفعل تغطية اثنين منهم في المقالات السابقة. والثالث هو الأحداث.

• إدارة نافذة المتصفح - استخدام كائن النافذة.
• إدارة الكائنات داخل النافذة هو DOM.
• تنفيذ كود جافا سكريبت على الأحداث.

حدث- رد فعل الكمبيوتر على عمل المستخدم. على سبيل المثال ، مع T. يعتبر حدث جافا سكريبت بمثابة ضغط على زر لوحة المفاتيح وحركة الماوس والنقرات وإغلاق نافذة المتصفح. كل الأحداث مع t. يتم إنشاء جافا سكريبت بواسطة كائنات المستند والمستعرض (لا يوجد مفهوم "المستخدم"). على سبيل المثال ، عند النقر فوق فقرة ، يتم إنشاء حدث النقر بالماوس بواسطة كائن - فقرة.

لكي تكون قادرًا على تشغيل بعض أكواد جافا سكريبت التي تستجيب للأحداث ، تحتاج إلى ربط هذا الرمز بحدث تم إنشاؤه من كائن معين ، أي بحدث معين من كائن معين. يسمى هذا الإجراء - اشتراك الحدث.

يعني الاشتراك أننا نربط دالة بحدث معين من كائن معين في نموذج كائن المتصفح. وعندما ينشئ هذا الكائن (يولد) هذا الحدث ، سيتم إطلاق هذه الوظيفة تلقائيًا.

• عند النقر - النقر فوق زر الماوس.
• ondblclick - نقرة مزدوجة على زر الفأرة.
• onmoused down - يتم الضغط على زر الماوس (لأسفل).
• onmousemove - يتحرك الماوس فوق الكائن (تحدث العديد من الأحداث ، حركة الماوس بمقدار 1 بكسل = حدث واحد).
• onmouseout - يترك الماوس الكائن.
• onmouseover - يتحرك الماوس فوق الكائن المطلوب.
• onmouseup - يتم تحرير زر الفأرة (مرفوع).
• onkeydown - الضغط على زر لوحة المفاتيح (لأسفل).
• عند الضغط - الضغط على زر لوحة المفاتيح.
• عند المفتاح - يتم تحرير زر لوحة المفاتيح (مرفوع).
• onblur - فقدان تركيز الإدخال (المؤشر الوامض).
• عند التركيز - اللحظة التي يتلقى فيها هذا العنصر تركيز الإدخال.
• عند التغيير - يتم إنشاؤه بواسطة عنصر التحكم بعد فقد التركيز ، إذا تم تغيير النص (على سبيل المثال ، في مربع نص). الاستثناء هو عنصر القائمة "تحديد" ، حيث يتم إنشاء هذا الحدث على الفور ، وليس بعد فقدان التركيز.
• عند التحميل - يتم إنشاؤه عند انتهاء تحميل الصفحة في النافذة. تُستخدم عادةً عندما تحتاج إلى تشغيل بعض تعليمات JavaScript البرمجية بعد تحميل الصفحة بالكامل.
• عند التحميل - يحدث قبل إلغاء تحميل المستند من النافذة (أي عندما نغلق هذا المستند أو ننتقل إلى مستند آخر).
• onreset - تمت إعادة تعيين النموذج.
• onsubmit - تم تقديم نموذج البيانات.

الاشتراك في الأحداث

• الاشتراك عبر جافا سكريبت. تستخدم هذه الطريقة في معظم الحالات. أولاً ، نحتاج إلى العثور على كائن العنصر الذي نريد الاشتراك في الحدث من أجله ، على سبيل المثال ، من خلال طريقة getElementById (حدد معرف العنصر المطلوب).

وظيفة myFunc () ( // خلق وظيفة بسيطةتنبيه ("مرحبًا") ؛ ) الوظيفة pageInit () (var p = document. getElementById ("1")؛ p. onclick = myFunc؛) // دعا الوظيفة لتحريك الحدثنافذة او شباك. onload = pageInit ؛ // سيطلق الحدث عند تحميل الصفحة < p id= 1 >الفقرة 1 // تعيين معرف الفقرة

• الاشتراك عن طريق كود html. عيب هذا الأسلوب هو أنه يفسد كود html مع كود جافا سكريبت الخاص به. بالإضافة إلى ذلك ، هناك العديد من القيود ، وفي الحالات المعقدة يكون من غير المناسب استخدامها.

< script type= "text/javascript" >وظيفة myFunc () ( // خلق وظيفة بسيطةتنبيه ("مرحبًا") ؛ ) < p onclick= "myFunc()" >الفقرة 2 // تسمى الوظيفة

نموذج معالجة الحدث

عند حدوث حدث لعنصر ما ، يجب أن تحدث أحداث مماثلة أيضًا لجميع عناصره الرئيسية حتى أعلى الصفحة (حتى "النص الأساسي" ، نظرًا لأنها المنطقة الرئيسية من المستند). وبالتالي ، فإن أي حدث يقع على الصفحة سوف يطلق النار على الجسم.

ثم يطرح السؤال ، في أي ترتيب ستقع مثل هذه الأحداث؟ في المتصفحات الحديثة ، يُطلق على نموذج معالجة الأحداث اسم نموذج الفقاعة. جوهرها: أولاً ، يحدث حدث للعنصر الذي تم النقر عليه ، ثم للعنصر الأصل ، وهكذا حتى القمة - إلى "الجسم".

العنصر -> العنصر 2 -> المستند -> النافذة

معلمات الحدث (كائن الحدث)

هناك شيء من هذا القبيل حدثالتي لها العديد من الخصائص. من خلال قراءة هذه الخصائص ، يمكنك الحصول على معلومات حول الأحداث. للحصول على المعلومات ، يجب عليك أولاً الحصول على الكائن نفسه.

الرئيسية الخصائصمن هذا الكائن:

• x ، y - إحداثيات الماوس وقت الحدث.
• clientX ، clientY هما نفس الشيء.
• offsetX ، offsetY - نفس الشيء ، لكن هذا هو إزاحة الماوس بالنسبة للعنصر الأصل.
• screenX ، screenY - إحداثيات الشاشة.
• الزر - أي زر الماوس تم الضغط عليه (0 - غير مضغوط ، 1 - الضغط على الزر الأيسر ، 2 - الضغط على الزر الأيمن ، 4 - الضغط على الزر الأوسط).
• keyCode الرمز الرقمي لمفتاح لوحة المفاتيح المضغوط.
• srcElement - العنصر الذي أثار الحدث.
• fromElement - العنصر الذي انتقل منه الماوس.
• toElement - إشارة إلى الكائن الذي دهس الماوس فوقه.
• CancelBubble - طريقة غير قياسية ، إذا أعطيتها القيمة true ، فسيتم إلغاء "الفقاعة المنبثقة" ؛ أو يمكنك تغيير رمز المفتاح الذي ضغط عليه المستخدم.

من المؤلف:بعد تحميل صفحة الويب بالكامل وجاهزيتها ، يتم تشغيل سلسلة كاملة من الأحداث في JavaScript ، والتي تصبح أكبر عندما يبدأ المستخدم في التفاعل مع الصفحة بطريقة أو بأخرى. تشمل الأحداث تحميل صفحة أو التمرير لأسفل أو النقر فوق الزر أو حتى ملء نموذج. لتشغيل الأحداث في JavaScript ، تحتاج إلى رمز خاص تصممه وتكتبه بنفسك ، وبالتالي بناء تفاعل أعمق.

يمكن تقسيم الأحداث في JS إلى 4 مجموعات كبيرة:

أحداث واجهة المستخدم: يتم إطلاقها عندما يتفاعل المستخدم مع واجهة مستخدم المتصفح (الأزرار حول صفحة الويب التي تعد جزءًا من واجهة المتصفح). يمكن أن تتضمن هذه الأحداث أيضًا تلك الإجراءات التي تقوم بها الصفحة بشكل مستقل عن المستخدم. تتضمن هذه الأحداث تغيير حجم النافذة وتمرير الصفحة وتحميل المحتوى وتفريغه.

أحداث لوحة المفاتيح والماوس وشاشة اللمس: يتم تشغيلها عندما يضغط المستخدم على الأزرار الموجودة على لوحة المفاتيح أو يحررها ، أو يتحكم في الماوس أو لوحة التتبع أو يستخدم شاشة اللمس.

أحداث التركيز والإعاقة. غالبًا ما يرتبط بالنماذج: "يتلقى حقل الإدخال التركيز" عندما يكون المستخدم جاهزًا للتفاعل معه. تتعقب الأحداث الأخرى عمليات إرسال النماذج والتغييرات في قيم حقل النموذج وما إلى ذلك.

جافا سكريبت. بداية سريعة

أحداث الطفرة والمراقبين. يتم تتبع العناصر المتغيرة عندما تتغير بنية DOM: على سبيل المثال ، عندما يتم إدراج العناصر في الصفحة أو إزالتها بواسطة البرنامج النصي.

ربط معالج الحدث

الكود المخصص الذي سيتم إطلاقه فقط لعنصر DOM محدد ينشئ معالج حدث. توجد ثلاث طرق في JS لإنشاء معالج حدث:

1. معالج حدث HTML قياسي عبر السمات

أقدم طريقة لربط الأحداث ، وهي واحدة من أكثر الطرق استخدامًا حتى الآن. تستخدم الطريقة سمات خاصة في الترميز. على سبيل المثال:

< input type = "text" id = "username" onblur = "checkName()" >

في المثال أعلاه ، بعد أن يتلقى الحقل التركيز ويستمر المستخدم في ملء الحقل التالي (على سبيل المثال ، باستخدام TAB أو نقرة عادية) ، سيستدعي العنصر وظيفة checkName ، والتي تتم كتابتها في JS.
لا يُنصح باستخدام معالجات أحداث HTML القياسية في التطوير الحديث ، ويرجع ذلك أساسًا إلى حقيقة أن الوظيفة مختلطة مع الترميز ، مما يجعل من الصعب العمل وتصحيح الكود.

2. معالجات الأحداث القياسية في DOM

تفصل هذه التقنية بين JS والترميز ، ولكن لها نفس القيد - يمكن تخصيص وظيفة واحدة فقط للأحداث. سيكون مكافئ HTML لمعالج الأحداث في DOM هو:

var username = document.getElementbyId ("اسم المستخدم") ؛ username.onblur = checkName ؛

اسم االمستخدم. onblur = checkName ؛

جافا سكريبت. بداية سريعة

تعلم أساسيات JavaScript بمثال عملي لبناء تطبيق ويب

كما في المثال السابق ، يتم تشغيل وظيفة checkName بعد أن يفقد عنصر النموذج التركيز.

3. المستمعين الحدث

طريقة حديثة لإضافة معالج حدث ، تسمح لك بربط أحداث ووظائف متعددة:

var username = document.getElementbyId ("اسم المستخدم") ؛ username.addEventListener ("blur"، checkName، false) ؛

var اسم المستخدم = المستند. getElementbyId ("اسم المستخدم") ؛ اسم االمستخدم. addEventListener ("blur"، checkName، false) ؛

تشير القيمة المنطقية في النهاية إلى ما إذا كان سيتم التقاط الحدث أم لا. عادة ما يتم تعيينه على خطأ. في النصوص البسيطة ، غالبًا ما تتم كتابة الحدث كوظيفة مجهولة:

var username = document.getElementbyId ("اسم المستخدم") ؛ username.addEventListener ("طمس" ، الوظيفة () (// إجراءات لتشغيل الحدث))

ليست كل الأحداث متساوية من المهم أن نفهم أنه لا يمكن التعامل مع جميع الأحداث بالطريقة نفسها. يتم تشغيل أحداث التمرير وتغيير الحجم كثيرًا ، ولهذا السبب يجب أن تكون حذرًا جدًا معهم حتى لا تبطئ أداء النص. الأمر نفسه ينطبق على أحداث الإدخال التي تبدو غير ضارة. يمكن أن يتدهور أداء البرنامج النصي بشدة إذا كان يحاول الاستجابة باستمرار لحدث الإدخال الذي يتم تشغيله بشكل متكرر في شريط تمرير النطاق. لا يتم تعقب جميع الأحداث لا يستطيع مراقبو الطفرة حاليًا تتبع جميع التغييرات التي تم إجراؤها على جميع العناصر على الصفحة. على سبيل المثال ، لا توجد طريقة لتتبع التغيير في ارتفاع العنصر (عندما تتقلص الحاوية في التصميم سريع الاستجابة ، يعاد ترتيب النص الموجود بداخلها ، وتصبح العناصر أطول). لا تزال هناك طرق لتتبع التغييرات ، سأتحدث عن هذا في المقالة التالية. إرفاق الأحداث بالعناصر الصحيحة ينطبق حدث onclick على العديد من العناصر ، بما في ذلك الروابط. هناك قاعدة عامة - لا يوصى بإرفاق كود JS بالروابط. من خلال النقر على الرابط ، يجب على المستخدم الانتقال إلى منطقة أخرى من الموقع أو إلى جهة ارتساء. إذا كنت بحاجة إلى عنصر واجهة مستخدم يمكن استخدامه لتغيير شيء ما في نفس الصفحة ، فسوف يناسبك الزر. يمكنك تعليق JavaScript على الزر دون أي مشاكل. لا تستخدم JavaScript إذا كان بإمكانك القيام بذلك باستخدام CSS بالمقارنة مع CSS ، فإن JavaScript بطيء وغير موثوق به. بشكل أساسي ، يجب استخدام CSS كبديل للبرمجة النصية المعقدة حيثما أمكن ذلك. ومع ذلك ، فإن CSS لا تفعل كل شيء. يقوم بعمل جيد مع: hover (يستبدل أحداث اللمس في كثير من الحالات) ويمكنه أيضًا استبدال أحداث النقر بـ: target في بعض الحالات. يتم تشغيل الرسوم المتحركة لـ CSS تلقائيًا بعد تحميل الصفحة ، وهناك حالات CSS خاصة يمكن تشغيلها لعناصر مثل أزرار الاختيار. ومع ذلك ، من الأفضل ترك شيء أكثر تعقيدًا لجافا سكريبت.

أثناء العمل مع الصفحة ، يقوم المستخدم بتنفيذ إجراءات مختلفة: النقر فوق أزرار الماوس ، وإدخال نص على لوحة المفاتيح. كل إجراء من هذا القبيل هو حدث متصفح. يمكن تتبعها وتنفيذها بواسطة سطور معينة من البرنامج عند حدوثها. جافا سكريبت لديها معالجات الأحداث لهذا الغرض. بالإضافة إلى إجراءات المستخدم ، هناك أحداث أخرى في المتصفح مثل تحميل الصفحة بالكامل.

كل حدث له اسمه الخاص. النقر هو الضغط على زر الماوس الأيسر ، والضغط على المفتاح هو الضغط على المفتاح ، والتركيز هو التركيز على عنصر النموذج ،

التعامل مع الحدث

يتم استدعاء الوظيفة التي يتم تنفيذها عند تشغيل حدث معالج الحدث... كل نوع من الأحداث له معالج خاص به. يتكون اسم المعالج من الكلمة في واسم الحدث. على سبيل المثال ، يسمى معالج حدث النقر عند النقر. لا تحدث الأحداث على الصفحة بشكل عام ، ولكن على عنصر معين. وفقًا لذلك ، لا يعد المعالج وظيفة منفصلة. يتم وضع المعالج على بعض عناصر الصفحة.

هناك طرق مختلفة لتعيين معالج حدث إلى عنصر. يمكنك تعيين معالج عبر سمة العلامة. تتم كتابة الكود المراد تنفيذه عند بدء الحدث في قيمة السمة. دعنا ننشئ صفحة ونضيف زرًا إليها ونخصص معالج حدث نقرة لها:

1 2 3 4 5 6 7

جافا سكريبت:

جافا سكريبت:

17 18 19 20 21 22

var inform = function () (alert ("زر آخر") ؛) ؛ var mbutton = document.getElementById ("mbutton") ؛ mbutton.onclick = إبلاغ ؛

عند تعيين دالة لمعالج ، لا توجد أقواس بعد اسم الوظيفة. إذا وضعت أقواسًا ، فلن يكون تعيين وظيفة ، بل دعوة للتنفيذ.

هناك طريقة addEventListener () تقوم أيضًا بتعيين معالج حدث إلى عنصر. يعتبر أكثر حداثة. لا يتم استخدامه كثيرًا الآن ، ولكن هناك أحداث جديدة في JavaScript لا يمكن التعامل معها إلا باستخدام هذه الطريقة.

element.addEventListener (حدث ، وظيفة)

خيارات:

حدث - حدث يحتاج إلى معالجة

دالة - دالة تصبح معالجًا

في معلمات هذه الطريقة ، يتم كتابة اسم الحدث بين علامتي اقتباس ولا تحتاج إلى كتابة الكلمة قبله.

كود HTML:

زر جديد

جافا سكريبت:

24 25 26 27 28 29

var newinform = function () (تنبيه ("تم الضغط على زر جديد") ؛) ؛ var newbutton = document.getElementById ("newbutton") ؛ newbutton.addEventListener ("انقر" ، newinform) ؛

تسمح لك طريقة removeEventListener () بإزالة معالج.

element.removeEventListener (حدث ، وظيفة)

باستخدام الطريقة المدروسة ، يمكن تعيين معالجات متعددة لعنصر ما لنفس الحدث. ثم تحتاج إلى حذف كل منهم على حدة.

كائن الحدث

في كل مرة يتم تشغيل حدث ، يتم إنشاء كائن حدث. الكائن يحتوي على معلومات حول الحدث. أنواع مختلفة من الأحداث لها كائنات مختلفة. ولكن هناك أيضًا خصائص يمتلكها أي كائن. على سبيل المثال ، تحتوي خاصية النوع على نوع الحدث.

يتم تمرير كائن الحدث كمعامل إلى الدالة التي هي المعالج. للوصول إلى الكائن ، تحتاج إلى إنشاء معلمة في الوظيفة. تستخدم هذه المعلمة للإشارة إلى الكائن. إذا كانت الوظيفة تتطلب أيضًا معلمات أخرى ، فيجب أن يكون كائن الحدث هو المعلمة الأولى. دعونا نغير معالج الزر بالمعرف الذي يساوي "الزر". دعنا نصل إلى كائن الحدث. بدلاً من رسالة حول الضغط على الزر ، سنعرض نوع الحدث. سيبدو المعالج الآن كما يلي:

13 14 15 16

button.onclick = وظيفة (حدث) (تنبيه (event.type) ؛) ؛

انقر فوق الزر ، سيتم عرض نوع الحدث الذي تم تشغيله.

جميع كائنات الحدث لها خاصية CurrentTarget. تقوم بإرجاع العنصر الذي أطلق الحدث. قد يبدو هذا بلا معنى. بعد كل شيء ، يتم تعيين المعالج لعنصر معين. لماذا إعادة هذا العنصر مرة أخرى؟ ولكن مع أحداث المتصفح ، تصبح الأمور أكثر تعقيدًا بعض الشيء. سوف تتعلم كيف يتم استخدام هذا بعد قليل. سننظر في خصائص أخرى عند دراسة أحداث معينة.

أنواع الأحداث

في فجر تطور شبكة الويب العالمية ، كان على مطوري الويب التعامل مع عدد قليل فقط من الأحداث: "تحميل" ، و "انقر" ، و "تمرير الماوس" وغيرها. هذه الأنواع القديمة من الأحداث مدعومة جيدًا من قبل جميع المتصفحات. مع تطور منصة الويب ، تم تضمين واجهات برمجة تطبيقات أكثر قوة وزاد عدد الأحداث بشكل كبير. لا يوجد معيار يحدد مجموعة كاملة من الأحداث ، ويستمر عدد الأحداث المدعومة في النمو بسرعة. تم تحديد هذه الأحداث الجديدة في المصدرين التاليين:

مواصفات أحداث المستوى 3 من DOM ، والتي ، بعد سنوات عديدة من الركود ، بدأ تطويرها بنشاط تحت رعاية اتحاد W3C.

تحدد العديد من واجهات برمجة التطبيقات الجديدة في مواصفات HTML5 (والمواصفات الإضافية ذات الصلة) الأحداث الجديدة المستخدمة ، على سبيل المثال ، لإدارة السجل والسحب والإفلات وتبادل الرسائل بين المستندات وتشغيل الصوت والفيديو.

لاحظ أن العديد من أنواع الأحداث الجديدة هذه لم يتم دعمها على نطاق واسع حتى الآن ويتم تحديدها بواسطة معايير لا تزال في مرحلة التصميم. غالبًا ما تندرج الأحداث التي ستستخدمها غالبًا في تطبيقات الويب الخاصة بك في فئة طويلة الأمد ومدعومة من قبل جميع المتصفحات: إنها أحداث للعمل باستخدام الماوس ولوحة المفاتيح ونماذج HTML وكائن Window. سننظر في هذه الأحداث.

أحداث تحميل المستند

تحتاج معظم تطبيقات الويب تمامًا إلى متصفح الويب لإعلامها عند انتهاء تحميل المستند ويكون جاهزًا لإجراء العمليات عليه. هذا الغرض يخدمه الحدث حملفي كائن النافذة. يتم رفع حدث التحميل فقط بعد أن يتم تحميل المستند وجميع صوره بالكامل. ومع ذلك ، يمكن عادةً تشغيل البرامج النصية مباشرةً بعد تحليل المستند ، قبل تحميل الصور. يمكنك تقليل وقت بدء تشغيل تطبيق الويب بشكل كبير عن طريق بدء البرمجة النصية لأحداث أخرى غير التحميل.

حدث DOMContentLoadedيتم تشغيله بمجرد تحميل المستند وتحليله بواسطة المحلل اللغوي وتم تنفيذ كافة البرامج النصية المؤجلة. في هذه المرحلة ، قد يستمر تحميل الصور والنصوص ذات السمة غير المتزامنة ، لكن المستند نفسه سيكون جاهزًا لإجراء العمليات. تم تقديم هذا الحدث لأول مرة في Firefox ومنذ ذلك الحين تم اعتماده من قبل جميع صانعي المستعرضات الآخرين ، بما في ذلك Microsoft ، والتي أضافت دعمًا لهذا الحدث في IE9. على الرغم من بادئة DOM في الاسم ، فإن هذا الحدث ليس جزءًا من معيار أحداث المستوى 3 من DOM ، ولكنه موحد وفقًا لمواصفات HTML5.

أثناء تحميل المستند ، تتغير قيمة خاصية المستند. كل تغيير في قيمة هذه الخاصية في IE يكون مصحوبًا بحدث readystatechange في كائن المستند ، لذلك في IE يمكن استخدام هذا الحدث لتحديد وقت حدوث الحالة الكاملة. مواصفات HTML5 تقيس الحدث اقرأ التغيير، ولكنه يوجه إلى إطلاقه مباشرة قبل حدث التحميل ، لذلك فليس من الواضح تمامًا ما هي ميزة حدث "استرجاع التغيير" على الحمل.

يحدد المثال أدناه وظيفة whenReady (). يتم استدعاء الوظيفة التي تم تمريرها إلى whenReady () (كطريقة لكائن المستند) بمجرد أن يصبح المستند جاهزًا لإجراء العمليات. تستمع whenReady () إلى أحداث DOMContentLoaded و readystatechange وتستخدم حدث التحميل فقط كبديل احتياطي في حالة استخدامه في المتصفحات القديمة التي لا تدعم الحدثين الأولين. سيتم استخدام الوظيفة whenReady () في بعض السيناريوهات التالية:

/ * قم بتمرير وظيفتك إلى whenReady () وسوف تسميها (كطريقة لكائن المستند) بمجرد تحليل المستند وجاهزًا لأداء العمليات. يتم استدعاء الوظائف المسجلة في أول حدث DOMContentLoaded أو readystatechange أو تحميل. بمجرد أن يصبح المستند جاهزًا ويتم استدعاء جميع الوظائف ، ستستدعي whenReady () على الفور جميع الوظائف التي تم تمريرها إليها. * / var whenReady = (function () (// يتم إرجاع هذه الوظيفة من خلال دالة whenReady () var funcs = ؛ // الدالات التي سيتم استدعاؤها في الحدث var ready = false ؛ // Get true عند استدعاء دالة المعالج / / معالج الأحداث ، والذي يتم استدعاؤه بمجرد أن يكون المستند // جاهزًا لأداء معالج وظيفة العمليات (e) (// إذا تم استدعاء المعالج بالفعل ، فما عليك سوى إرجاع التحكم إذا (جاهز) يعود ؛ // إذا كان هذا الحدث readystatechange والحالة // ممتازة من "مكتمل" ، مما يعني أن المستند ليس جاهزًا بعد إذا (e.type === "readystatechange" && document.readyState! == "complete") عاد ؛ // اتصل بالجميع المسجلين / لاحظ أن كل قيمة من قيمة // property funcs.length يتم فحصها مرة واحدة ، في حالة إحدى الدوال المسماة // تسجل وظائف إضافية. لـ (var i = 0؛ i

أحداث الماوس

هناك عدد غير قليل من الأحداث المرتبطة بالماوس. كلهم مدرجون في الجدول أدناه. جميع أحداث الماوس باستثناء Mouseenter و mouseleave تطفو على السطح. انقر فوق الأحداث الموجودة على الروابط وأزرار إرسال النموذج تحتوي على إجراءات افتراضية يمكن التراجع عنها. من الممكن نظريًا إلغاء حدث قائمة السياق ومنع قائمة السياق من الظهور ، لكن بعض المتصفحات بها إعدادات تجعل هذا الحدث غير قابل للإلغاء.

أحداث الماوس JavaScript

نوع من	وصف
انقر	حدث عالي المستوى يتم رفعه عندما يضغط المستخدم على زر الماوس ويحرره أو ينشط عنصرًا بطريقة أخرى.
قائمة السياق	حدث قابل للإلغاء يتم طرحه قبل عرض قائمة السياق. تعرض المستعرضات الحالية قائمة سياق عند النقر بزر الماوس الأيمن ، لذلك يمكن أيضًا استخدام هذا الحدث كحدث نقرة.
dblclick	يتم التشغيل عندما ينقر المستخدم نقرًا مزدوجًا.
الفأرة	أطلق عندما يضغط المستخدم على زر الفأرة.
فأر	يتم إطلاقه عندما يحرر المستخدم زر الماوس.
تحرك الماوس	يُثار عندما يحرك المستخدم مؤشر الماوس.
تمرير الماوس	يُطلق عند وضع مؤشر الماوس فوق عنصر. تحدد الخاصية relatedTarget (أو fromElement في IE) العنصر الذي تم نقل مؤشر الماوس منه.
تجاوز الماوس	يُطلق عندما يغادر مؤشر الماوس العنصر. تحدد الخاصية relatedTarget (أو toElement في IE) العنصر الذي تم نقل مؤشر الماوس إليه.
فأر	على غرار الماوس ، ولكن لا يطفو على السطح. ظهر لأول مرة في IE وتم توحيده في HTML5 ، ولكن لم يتم دعمه بعد من قبل جميع المتصفحات.
ترك الماوس	مثل تجاوز الماوس ، لكن لا يظهر. ظهر لأول مرة في IE وتم توحيده في HTML5 ، ولكن لم يتم دعمه بعد من قبل جميع المتصفحات.

الكائن الذي تم تمريره إلى معالجات أحداث الماوس له خصائص العميلو العميلالتي تحدد إحداثيات المؤشر بالنسبة للنافذة. لتحويلها إلى إحداثيات المستند ، تحتاج إلى إضافة مواضع شريط تمرير نافذة إليها.

الخصائص مفتاح بديل, مفتاح السيطرة, metaKeyو مفتاح التحولتحديد حالات مفاتيح التعديل المختلفة التي ربما تم الاحتفاظ بها في وقت الحدث: يمكن استخدامها للتمييز بين النقرة البسيطة والنقرة مع الضغط على مفتاح Shift ، على سبيل المثال.

ملكية زريحدد زر الماوس الذي تم الضغط عليه وقت الحدث. ومع ذلك ، تكتب المتصفحات المختلفة قيمًا مختلفة لهذه الخاصية ، لذلك من الصعب استخدامها بطريقة محمولة.

تقوم بعض المتصفحات برفع حدث النقر فقط عند النقر فوق الزر الأيسر. لذلك ، إذا كنت بحاجة إلى التعامل مع نقرات الأزرار الأخرى ، فيجب عليك استخدام أحداث الماوس والماوس. يشير حدث قائمة السياق عادةً إلى إجراء نقرة بزر الماوس الأيمن ، ولكن كما هو مذكور أعلاه ، ليس من الممكن دائمًا منع قائمة السياق من الظهور في معالجات هذا الحدث.

يوضح المثال أدناه وظيفة السحب () التي ، عندما يتم استدعاؤها من معالج أحداث الماوس ، تسمح للمستخدم بسحب عناصر المستند ذات المواضع المطلقة بالماوس. تعمل وظيفة السحب () مع كل من نماذج الأحداث ، DOM و IE.

تأخذ وظيفة السحب () وسيطتين. الأول هو العنصر الذي يتم سحبه. قد يكون هذا هو العنصر الذي رفع حدث mousedown والعنصر الذي يحتوي عليه (على سبيل المثال ، يمكنك السماح للمستخدم بالاستيلاء على عنصر يشبه عنوان النافذة وسحب العنصر المحتوي الذي يشبه النافذة). ومع ذلك ، في أي حال ، يجب أن يكون عنصر مستند تم وضعه بشكل مطلق باستخدام سمة موضع CSS. الوسيطة الثانية هي كائن الحدث الذي تم استلامه مع حدث mousedown:

/ * pull () - سحب وإفلات عناصر HTML ذات المواقع المطلقة. يجب استدعاء هذه الوظيفة من معالج الأحداث onmousedown. ستؤدي أحداث تحريك الماوس اللاحقة إلى تحريك العنصر المحدد. سيكمل حدث الماوس فوق هذه الخطوة. يعمل هذا التنفيذ في كل من نماذج الأحداث القياسية و IE. يستخدم الدالة getScrollOffsets (). وسيطات elementToDrag: العنصر الذي تلقى أو يحتوي على حدث الماوس. يجب وضع هذا العنصر بشكل مطلق. ستتغير قيم خصائص style.left و style.top الخاصة به عندما يحرك المستخدم مؤشر الماوس. الحدث: كائن الحدث الذي تم تلقيه بواسطة معالج حدث mousedown. * / سحب الوظيفة (elementToDrag، event) (// تحويل إحداثيات البداية للماوس إلى إحداثيات المستند var scroll = getScrollOffsets () ؛ // وظيفة المساعد المُعلنة أدناه var startX = event.clientX + scroll.x ؛ var startY = الحدث. clientY + scroll.y؛ // الإحداثيات الأولية (المتعلقة ببداية المستند) للعنصر الذي // سيتم نقله. نظرًا لأن elementToDrag يتم تحديد موضعه تمامًا ، يُفترض أن تشير الخاصية offsetParent إلى المستند body var OrigX = elementToDrag.offsetLeft؛ var OrigY = elementToDrag.offsetTop؛ // ابحث عن المسافة بين نقطة حدث الماوس والزاوية اليسرى العلوية للعنصر. // ستؤخذ هذه المسافة في الاعتبار عند تحريك مؤشر الماوس. deltaX = startX - OrigX؛ var deltaY = startY - OrigY؛ // تسجيل معالجات mousemove و mouseup الأحداث // التي تتبع حدث mousedown.if (document.addEventListener) (// نموذج حدث قياسي // سجل اعتراض المعالجات في المستند document.addEventListener ("mousemove"، moveHandler، true)؛ document.addEventListener ("mouseup"، upHandler، true) ؛ ) وإلا إذا (document.attachEvent) (// نموذج حدث IE لـ IE5-8 // في نموذج حدث IE ، يتم اعتراض الأحداث عن طريق استدعاء // طريقة setCapture () للعنصر. elementToDrag.setCapture () ؛ elementToDrag. attachEvent ("onmousemove"، moveHandler)؛ elementToDrag.attachEvent ("onmouseup"، upHandler) ؛ // تفسير فقدان التقاط حدث الماوس كعنصر حدث صعود الماوس إلى الماوس - ToDrag.attachEvent ("onlosecapture"، upHandler) ؛) // هذا الحدث كان يتم التعامل معها ويجب عدم تمريرها إلى معالجات أخرى إذا (event .stopPropagation) event.stopPropagation () ؛ // النموذج القياسي else event.cancelBubble = صحيح ؛ // IE // منع تنفيذ الإجراءات الافتراضية. إذا (event.preventDefault) event.preventDefault () ؛ // النموذج القياسي else event.returnValue = false ؛ // IE / * هذا المعالج يمسك بأحداث mousemove التي تحدث أثناء سحب عنصر. إنه مسؤول عن تحريك العنصر. * / function moveHandler (e) (if (! e) e = window.event؛ // IE Event Model // انقل العنصر إلى موضع مؤشر الماوس بناءً على الموضع // من أشرطة التمرير والإزاحات المتعلقة بـ click.var التمرير الأولي = getScrollOffsets () ؛ elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px" ؛ elementToDrag.style.top = (e.clientY + scroll.y - deltaY) + "px" ؛ // وإجهاض نشر الحدث بشكل أكبر. يكمل عملية السحب. * / function upHandler (e) (if (! e) e = window.event؛ // IE Event Model // إزالة معالجات أحداث الاعتراض. if (document.removeEventListener) (// DOM Event Model document.removeEventListener ("mouseup" ، upHandler، true)؛ document.removeEventListener ("mousemove"، moveHandler، true)؛) وإلا إذا (document.detachEvent) (// IE 5+ Event Model elementToDrag.detachEvent ("onlosecapture"، upHandler)؛ elementToDrag.detachEvent ( "onmouseup"، upHandler)؛ elementToDrag.detachEvent ("onmousemove"، moveHandler)؛ elementToDrag.releaseCapture () ؛) // ومقاطعة المزيد من انتشار الحدث. إذا (e.stopPropagation) e.stopPropagation () ؛ // قياسي model else e.cancelBubble = true ؛ // IE)) // يُرجع مواضع شريط التمرير الحالية كخصائص x و y لوظيفة الكائن getScrollOffsets (w) (// استخدم النافذة المحددة أو النافذة الحالية ، // إذا كان يتم استدعاء الوظيفة بدون وسيطة w = w | | window ؛ // تعمل الطريقة التالية في جميع المتصفحات باستثناء الإصدار 8 من IE وأدناه إذا كان (w.pageXOffset! = فارغ) إرجاع (x: w.pageXOffset، y: w.pageYOffset) ؛ // بالنسبة إلى IE (والمتصفحات الأخرى) في الوضع القياسي var d = w.document؛ إذا كان (document.compatMode == "CSSICompat") يعود (x: d.documentElement.scrollLeft، y: d.documentElement.scrollTop) ؛ // بالنسبة إلى المتصفحات في وضع التوافق ، يعود (x: d.body.scrollLeft ، y: d.body.scrollTop) ؛ )

يوضح المقتطف التالي كيفية استخدام وظيفة السحب () في ملف HTML:

الأهم هنا هو سمة onmousedown على العنصر المتداخل