تتضمن إحدى المهارات الأساسية لمطور الويب التعامل مع الأحداث على الصفحة باستخدام لغة برمجة جافا سكريبت. يعد تفاعل المستخدم مع صفحة الويب والقدرة على الاستجابة لأفعالها جوانب مهمة لإنشاء تطبيقات ويب تفاعلية وديناميكية.
أحد الأحداث الأكثر شيوعا التي يستجيب لها المطورون هو النقر بالماوس. عندما ينقر المستخدم على عنصر في صفحة ويب ، يتم تشغيل حدث نقرة. يمكن استخدام معالجات الأحداث للتعامل مع هذا الحدث وتنفيذ إجراءات معينة.
تقدم جافا سكريبت طرقا مختلفة لإضافة معالجات الأحداث إلى عناصر الصفحة. واحدة من أسهل الطرق هي استخدام خاصية أونكليك للعنصر. قد تحتوي هذه الخاصية على شفرة جافا سكريبت التي سيتم تنفيذها عند حدوث حدث نقرة على العنصر. على سبيل المثال ، إذا كان لديك زر مع معرف "بلدي زر" وتريد تنفيذ بعض الإجراءات عند النقر عليه ، يمكنك استخدام التعليمات البرمجية التالية:
وثيقة.جيتليمنتبيد ("زري").انقر فوق = وظيفة () {وحدة التحكم.سجل ("تم الضغط على الزر!");
}
- لماذا أحتاج إلى معالج نقرة لعنصر?
- كيفية العثور على عنصر في بنية هتمل
- كيفية إضافة معالج النقر باستخدام سمة هتمل
- كيفية إضافة معالج نقرة باستخدام خاصية عنصر في جافا سكريبت
- كيفية إضافة معالج نقرة باستخدام حدث
- كيفية تمرير المعلمات إلى معالج النقر
- كيفية حذف معالج النقر
- 1. باستخدام طريقة ريموفيفنتليستينر ()
- 2. باستخدام سمة أونكليك
- أمثلة على استخدام معالج النقر لعنصر
- سؤال وجواب
- كيف يمكنني ربط معالج النقر إلى عنصر?
- هل من الممكن استخدام السمة هتمل لربط معالج النقر?
- كيف يمكنني إزالة معالج النقر من عنصر?
- هل من الممكن ربط معالجات النقر المتعددة بعنصر واحد?
لماذا أحتاج إلى معالج نقرة لعنصر?
معالج النقر لعنصر هو وظيفة يتم تنفيذها عندما ينقر المستخدم على هذا العنصر. تسمح لك إضافة معالج النقر بالرد على إجراءات المستخدم وتنفيذ الإجراءات اللازمة أو تغيير حالة العناصر.
فيما يلي بعض الأسباب التي قد تؤدي إلى الحاجة إلى معالج نقرة لعنصر:
- معالجة إدخال المستخدم: عند النقر فوق عنصر مثل زر أو رابط ، قد يؤدي معالج النقر إلى تنفيذ رمز معين. على سبيل المثال ، عند النقر فوق الزر "إرسال" ، يمكن التحقق من البيانات التي أدخلها المستخدم وإرسالها إلى الخادم للمعالجة.
- تغيير حالة عنصر: عند النقر فوق عنصر ، يمكن لمعالج النقر تغيير حالته. على سبيل المثال ، عند النقر فوق مربع اختيار ، يمكن للمعالج تبديل حالته بين المحدد وغير المحدد.
- التنقل في الصفحة: يمكن استخدام معالج النقر لتنفيذ التنقل في الصفحة. على سبيل المثال ، عند النقر فوق ارتباط ، يمكن للمعالج إعادة توجيه المستخدم إلى صفحة أخرى أو تمرير الصفحة إلى عنصر معين.
- تفاعل البيانات: عند النقر فوق عنصر ، يمكن لمعالج النقر طلب البيانات أو معالجتها. على سبيل المثال ، عند النقر فوق الزر "تحميل" ، يمكن للمعالج إرسال طلب أجاكس إلى الخادم لتلقي البيانات وتحديث محتوى الصفحة.
تعد إضافة معالج نقرة لعنصر إحدى الطرق الأساسية لإنشاء تفاعل صفحة الويب. يسمح لك بالرد على إجراءات المستخدم وإنشاء تجربة مستخدم أكثر ديناميكية وسهلة الاستخدام.
كيفية العثور على عنصر في بنية هتمل
إذا كان لديك مهمة للعثور على عنصر في بنية هتمل باستخدام جافا سكريبت ، فهناك عدة طرق للقيام بذلك:
- جيتليمينتبيد(): تستخدم للبحث عن عنصر مع معرف معين (معرف).
- جيتليمنتسبيكلاسينام (): يسمح لك للعثور على جميع العناصر مع فئة معينة.
- جيتليمنتسبيتاغنام (): إرجاع مجموعة من العناصر مع علامة محددة.
- كيريسيليكتور (): يسمح لك للعثور على عنصر المقابلة لمحدد كس محددة.
- كيريسيلكتورال (): إرجاع كافة العناصر التي تطابق محدد المغلق محددة.
ستحصل على مجموعة من العناصر ، ويمكنك استخدام الفهرسة أو التكرار للوصول إلى كل عنصر.
على سبيل المثال ، للعثور على عنصر بمعرف معين ، يمكنك استخدام الكود التالي:
كونست إليم = وثيقة.جيتليمينتبيد ('مياليمنت');إذا كنت ترغب في العثور على جميع العناصر مع فئة معينة ، يمكنك استخدام التعليمات البرمجية التالية:
عناصر كونست = وثيقة.الحصول على عناصرالاسم العام ('ميكلاس');يمكنك تمرير محدد كس كوسيطة للعثور على العنصر:
كونست إليم = وثيقة.كيريسيليكتور ('.ميكلاس');، سوف تحصل على مجموعة من العناصر المقابلة لمحدد كس:
عناصر كونست = وثيقة.استفسر عن كل شيء ('.ميكلاس');عند العثور على عنصر ، يمكنك تنفيذ عمليات مختلفة ، مثل تغيير الأنماط أو إضافة معالجات الأحداث أو تغيير محتويات العنصر.
الآن ، ومعرفة الطرق المختلفة للبحث عن العناصر في بنية هتمل ، يمكنك بسهولة العثور على العناصر الضرورية والعمل معها باستخدام جافا سكريبت.
كيفية إضافة معالج النقر باستخدام سمة هتمل
هتمل لديه سمة خاصة تسمى أونكليك. تتيح لك هذه السمة إضافة معالج أحداث نقرة إلى عنصر معين.
لإضافة معالج نقرة باستخدام سمة هتمل ، تحتاج إلى تحديد قيمة هذه السمة بين علامتي اقتباس وتمرير شفرة جافا سكريبت إليها ، والتي يجب تنفيذها عند النقر فوق العنصر.
على سبيل المثال ، إذا كان لديك عنصر وتريد إضافة معالج نقرة له ، فيمكنك القيام بذلك على النحو التالي:
انقر لي!
في هذا المثال ، عند النقر فوق الزر ، ستظهر نافذة منبثقة بها الرسالة " النقر على الزر!".
يمكنك أيضا استدعاء وظيفة جافا سكريبت عن طريق تمرير اسمها كقيمة السمة أونكليك:
ادفعني!
في هذا المثال ، عند النقر على الزر ، سيتم استدعاء وظيفة جافا سكريبت ميفونكتيون () ، والذي يعرض نافذة منبثقة مع الرسالة "تم استدعاء وظيفة ميفونكتيون ()!".
باستخدام السمة هتمل أونكليك يسمح لك بسرعة وسهولة إضافة معالجات الحدث دون الحاجة إلى تضمين شفرة جافا سكريبت مباشرة في ملف هتمل. ومع ذلك ، فإن هذه الطريقة لها حدودها ويمكن أن تصبح غير مريحة عند العمل مع عدد كبير من المعالجات.
بشكل عام ، باستخدام السمة هتمل أونكليك هو وسيلة سهلة لإضافة معالج نقرة إلى عنصر ، ومناسبة للمشاريع الصغيرة أو الحالات التي تحتاج إلى إضافة بسرعة وظائف بسيطة دون استخدام أطر جافا سكريبت أو المكتبات.
كيفية إضافة معالج نقرة باستخدام خاصية عنصر في جافا سكريبت
في جافا سكريبت ، هناك عدة طرق لإضافة معالج حدث نقرة لعنصر. واحد منهم يستخدم خاصية عنصر أونكليك. تسمح لك هذه الخاصية بربط دالة بحدث النقر لعنصر ما والاتصال به عند النقر فوقه.
مثال على استخدام خاصية أونكليك:
السماح إليم = وثيقة.جيتليمينتبيد ('مياليمنت');
إليم.انقر فوق = وظيفة () {
تنبيه ('قمت بالنقر فوق العنصر');
};
في المثال أعلاه ، نحصل على العنصر باستخدام طريقة جيتليمنتبيد وربط وظيفة مجهولة إلى خاصية أونكليك ، الذي يخرج رسالة عند النقر فوق العنصر.
لإزالة معالج أحداث النقر ، يمكنك تعيين العنصر إلى فارغ:
إليم.أونكليك = لاغية;
أيضا ، باستخدام الخاصية أونكليك ، يمكنك ربط ليس وظيفة مجهولة ، ولكن وظيفة موجودة:
وظيفة مقبض () {
تنبيه ('قمت بالنقر فوق العنصر');
}
إليم.أونكليك = هاندلكليك;
الآن ، عند النقر فوق عنصر ، سيتم استدعاء وظيفة النقر اليدوي.
ومع ذلك ، فإن استخدام خاصية أونكليك له حدوده. إذا كان معالج حدث النقر ملزما بالفعل بالعنصر باستخدام الخاصية أونكليك ، سيؤدي ربط الوظيفة الجديدة إلى حذف الوظيفة الموجودة. وبالإضافة إلى ذلك ، الخاصية أونكليك يسمح لك لربط وظيفة واحدة فقط إلى الحدث انقر. إذا كنت بحاجة إلى ربط معالجات متعددة ، يمكنك استخدام أساليب أخرى ، مثل أديفنتليستينر.
الاستنتاجات:
- لإضافة معالج حدث نقرة لعنصر ، يمكنك استخدام الخاصية أونكليك.
- ربط وظيفة إلى الخاصية أونكليك يسمح لك لاستدعاء هذه الوظيفة عند النقر فوق عنصر.
- لإزالة معالج الأحداث انقر فوق تعيين الخاصية أونكليك إلى فارغة.
- خاصية أونكليك لها قيود: يربط وظيفة واحدة فقط ويحل محل وظيفة موجودة ، إذا كانت موجودة بالفعل.
كيفية إضافة معالج نقرة باستخدام حدث
في جافا سكريبت ، هناك عدة طرق لإضافة معالجات الأحداث إلى العناصر الموجودة على صفحة الويب. واحدة من أكثر الطرق شيوعا هي استخدام حدث النقر.
لإضافة معالج نقرة إلى عنصر في جافا سكريبت ، يمكنك استخدام طريقة أديفنتليستينر. تسمح لك هذه الطريقة بإضافة وظيفة معالج سيتم استدعاؤها عند النقر فوق عنصر.
نموذج التعليمات البرمجية:
انقر على الزر!
في هذا المثال ، تتم إضافة معالج أحداث النقر إلى الزر الذي يحمل المعرف"الزر". عند النقر فوق الزر ، النص " قمت بالنقر فوق الزر!"سيتم عرضها في الفقرة مع المعرف "ليالفقرة".
هنا نستخدم وظيفة مجهولة كمعالج. يمكنك أيضا استخدام وظيفة مسماة إذا كنت تريد أن تكون شفرتك أكثر تنظيما وقابلية للقراءة.
هذه الطريقة لإضافة معالجات الأحداث هي الأبسط والأكثر ملاءمة. تحتاج فقط إلى تحديد العنصر الذي تريد ربط المعالج والوظيفة التي تريد الاتصال بها عند حدوث الحدث.
كيفية تمرير المعلمات إلى معالج النقر
يمكن تمرير معالج أحداث النقر بمعلمات إضافية بحيث يمكن استخدام معلومات من سياق خارجي عند النقر فوق عنصر. للقيام بذلك ، يمكنك استخدام إغلاق أو طريقة الربط ().
1. الإغلاق
يتيح لك استخدام الإغلاق حفظ حالة السياق الخارجي وتمريرها إلى معالج الأحداث.
دع المعلمة = 'قيمة المعلمة';
إليم.انقر فوق = وظيفة () {
// معالج الأحداث
وحدة التحكم.سجل (بارام);
};
2. ربط()
طريقة تسمح لك طريقة الربط () بتعيين السياق وتمرير المعلمات إلى وظيفة المعالج.
دع المعلمة = 'قيمة المعلمة';
إليم.انقر فوق = وظيفة () {
// معالج الأحداثوحدة التحكم.سجل (بارام);
}.ربط (لاغية ، المعلمة);
عند استخدام طريقة الربط () ، يجب تمرير فارغة كمعلمة أولى ، لأن السياق ليس مهما في هذه الحالة.
وبالتالي ، باستخدام طريقة الإغلاق أو الربط () ، يمكنك تمرير المعلمات إلى معالج حدث النقر واستخدامها داخل الوظيفة عند النقر فوق عنصر.
كيفية حذف معالج النقر
في جافا سكريبت ، يمكنك إضافة معالج حدث نقرة إلى عنصر دوم للرد على نقرة المستخدم. ولكن في بعض الأحيان قد يكون من الضروري حذف هذا المعالج. وهنا بعض الطرق للقيام بذلك:
1. باستخدام طريقة ريموفيفنتليستينر ()
لإزالة معالج الأحداث انقر فوق ، يمكنك استخدام الأسلوب ريموفيفينتليستينر (). تسمح لك هذه الطريقة بإزالة معالج معين لهذا الحدث. فمن الضروري أن تمر إلى طريقة ريموفيفنتليستينر () اسم الحدث (في هذه الحالة ، 'انقر') ، وظيفة معالج ليتم حذفها ، وسيطة ثالثة اختيارية تشير إلى حالات استخدام هذا المعالج يجب حذفها.
مثال على استخدام طريقة ريموفيفنتليستينر ():زر كونست = وثيقة.كيريسيليكتور ('زر');
وظيفة كليكهاندلر () {
وحدة التحكم.سجل ('انقر معالج');
}
زر.أدفينتليستينر ('انقر' ، كليكهاندلر);
زر.ريموفيفينتليستينر ('انقر' ، كليكهاندلر);
2. باستخدام سمة أونكليك
هناك طريقة أخرى لإزالة معالج أحداث النقر وهي ببساطة إزالة سمة النقر من العنصر. يمكن القيام بذلك يدويا أو باستخدام طريقة ريموفاتريبوت() لعنصر دوم. مثال على حذف سمة أونكليك:زر كونست = وثيقة.كيريسيليكتور ('زر'); زر.ريموفياتريبوت ('أونكليك');تسمح لك كلتا الطريقتين بحذف معالج أحداث النقر. يعتمد الاختيار بينهما على احتياجاتك وتفضيلاتك. أمثلة على استخدام معالج النقر لعنصريمكن إضافة معالج النقر إلى عنصر باستخدام طريقة أديفنتليستينر. يسمح لك بتعيين وظيفة سيتم استدعاؤها عند النقر فوق هذا العنصر.فيما يلي بعض الأمثلة على استخدام معالج النقر لعناصر مختلفة:مثال 1:
إضافة معالج نقرة إلى زر:
كود أتش تي أم أل: ادفعنيشفرة جافا سكريبت: وثيقة.جيتليمنتبيد ("زري").أديفنتليستينر ("انقر" ، ميفونكتيون);وظيفة جافا سكريبت: وظيفة ميفونكتيون () {تنبيه ("تم الضغط على الزر!");}المثال 2:إضافة معالج نقرة إلى ارتباط:
كود أتش تي أم أل:
ادفعني شفرة جافا سكريبت:
وظيفة جافا سكريبت:
حدث.منعالافتراضي();
} المثال 3:إضافة معالج نقرة إلى عنصر قائمة: كود أتش تي أم أل:
الركن 1
الركن 2
الركن 3
شفرة جافا سكريبت:
وثيقة.جيتليمنتبيد ("مايليست").أديفنتليستينر ("انقر" ، ميفونكتيون);
وظيفة جافا سكريبت:
وظيفة ميفونكتيون (الحدث) {
فار الهدف = الحدث.الهدف;
إذا (الهدف.تاغنام.إلىحروف صغيرة () = = = "لي") {
تنبيه ("لقد حددت" + الهدف.النص الداخلي);
}
}