ال عند النقر يحدث هذا الحدث عمومًا عندما ينقر المستخدم على عنصر ما. يسمح للمبرمج بتنفيذ وظيفة JavaScript عند النقر فوق عنصر ما. يمكن استخدام هذا الحدث للتحقق من صحة النموذج ورسائل التحذير وغير ذلك الكثير.
باستخدام JavaScript، يمكن إضافة هذا الحدث ديناميكيًا إلى أي عنصر. وهو يدعم كافة عناصر HTML باستثناء , , , ،، ،،
،، و . يعني أننا لا نستطيع تطبيق عند النقر الحدث على العلامات المحددة.
ما هو التعامل مع الاستثناءات في Java
في HTML، يمكننا استخدام عند النقر السمة وتعيين أ وظيفة جافا سكريبت إليها. يمكننا أيضًا استخدام JavaScript addEventListener() طريقة وتمرير أ انقر الحدث إليها لمزيد من المرونة.
بناء الجملة
الآن، نرى بناء الجملة لاستخدام عند النقر الحدث في HTML وفي جافا سكريبت (بدون addEventListener() الطريقة أو باستخدام addEventListener() طريقة).
في HTML
في جافا سكريبت
object.onclick = function() { myScript }; في JavaScript باستخدام طريقة addEventListener()
object.addEventListener('click', myScript);
دعونا نرى كيفية الاستخدام عند النقر الحدث باستخدام بعض الرسوم التوضيحية. والآن سوف نرى أمثلة على استخدام عند النقر الحدث في HTML، وفي جافا سكريبت.
مثال 1 - استخدام سمة onclick في HTML
في هذا المثال نستخدم لغة البرمجة عند النقر السمة وتعيين وظيفة JavaScript لها. عندما ينقر المستخدم على الزر المحدد، سيتم تنفيذ الوظيفة المقابلة، وسيتم عرض مربع حوار تنبيه على الشاشة.
function fun() { alert('Welcome to the javaTpoint.com'); } <h3> This is an example of using onclick attribute in HTML. </h3> <p> Click the following button to see the effect. </p> Click me اختبره الآن انتاج |
الوالدين مسج
بعد النقر على الزر المحدد، سيكون الإخراج -
مثال 2 - استخدام جافا سكريبت
في هذا المثال، نستخدم JavaScript عند النقر حدث. نحن هنا نستخدم عند النقر الحدث مع عنصر الفقرة.
عندما ينقر المستخدم على عنصر الفقرة، سيتم تنفيذ الوظيفة المقابلة، ويتغير نص الفقرة. عند النقر على العنصر، سيتم أيضًا تغيير لون الخلفية وحجم النص وحدوده ولونه.
عملية الروبوت الأساسية
onclick event <h3> This is an example of using onclick event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementById('para').style.color = 'blue'; document.getElementById('para').style.backgroundColor = 'yellow'; document.getElementById('para').style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } اختبره الآن انتاج |
بعد النقر على النص انقر فوق لي، سيكون الناتج -
تحميل فيديوهات اليوتيوب على برنامج vlc
مثال 3 - استخدام طريقة addEventListener()
في هذا المثال، نستخدم JavaScript addEventListener() طريقة إرفاق أ انقر الحدث إلى عنصر الفقرة. عندما ينقر المستخدم على عنصر الفقرة، يتغير نص الفقرة.
عند النقر على الفقرة، سيتغير أيضًا لون الخلفية وحجم خط العناصر.
<h3> This is an example of using click event. </h3> <p> Click the following text to see the effect. </p> <p id="para">Click me</p> document.getElementById('para').onclick = function() { fun() }; function fun() { document.getElementById('para').innerHTML = 'Welcome to the javaTpoint.com'; document.getElementsByTagName('body')[0].style.color = 'blue'; document.getElementsByTagName('body')[0].style.backgroundColor = 'lightgreen'; document.getElementsByTagName('body')[0].style.fontSize = '25px'; document.getElementById('para').style.border = '4px solid red'; } اختبره الآن انتاج |
عند النقر على النص انقر فوق لي ، سيكون الإخراج -
