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

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

كيف يمكننا تشغيل حدث النقر في جافا سكريبت:

يتعين علينا تطبيق التقنيات الواردة أدناه لتشغيل حدث النقر في جافا سكريبت:

أ) طريقة النقر ().

ب) أساليب addEventListener() وdispathEvent

للحلقة في ج

الآن سوف نستخدم الطرق التي كتبت أعلاه لتوضيح ما يلي:

طريقة 1:

تشغيل حدث النقر باستخدام طريقة حدث النقر في جافا سكريبت:

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

ولمزيد من التوضيح علينا أن نتبع المثال الموضح أدناه:

مثال:

في المثال الوارد أدناه مع وجود 'انقر هنا' سيتم إنشاء زر بالمعرف ومع حدث النقر للوصول إلى حدث النقر عليه؛

 Click here 

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

 const get= document.getElementById('btn'); get.click(); 

أخيرًا، عند النقر فوق الزر، سنحدد طباعة الوظيفة التالية المسماة 'انقر على الحدث ()' بطريقة على وحدة التحكم باستخدام طريقة النقر.

 function clickEvent() { console.log('now the Click Event is triggered ') } 

من الناتج أعلاه للكود المعني، باستخدام طريقة النقر بطريقة آلية، لاحظنا أنه تم النقر فوق الزر انقر هنا.

الطريقة الثانية:

قم بتشغيل حدث النقر في جافا سكريبت بمساعدة طريقة addEventListener() وdisplayEvent()

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

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

بناء جملة الحدث:

 target.addEventListener( $type, $listener); target.addEventListener( $type, $listener, $options); target.addEventListener( $type, $listener, $useCapture); 

وصف بناء الجملة:

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

مثال 1

 Open bing const link = document.getElementById(&apos;btn&apos;); link.addEventListener(&apos;click&apos;, e =&gt; {}); for(let i = 0; i <5; i++) { link.dispatchevent(new event('click')); } function opengooglebymethod() console.log('the required event is triggered') < pre> <p> <strong>Output:</strong> </p> <pre> &apos;The required event is triggered&apos;. &apos;The required event is triggered&apos;. &apos;The required event is triggered&apos;. &apos;The required event is triggered&apos;. &apos;The required event is triggered&apos;. </pre> <p> <strong>Example 2:</strong> </p> <p>In this example, first of all, we will include a button with a corresponding id with an onclick event along with a value as same as like previous one.</p> <pre> Click here </pre> <p>After that, with the help of the <strong> <em>addEventListener()</em> </strong> method, we will retrieve the button and click the event in it to specify the <strong> <em>&apos;e&apos;</em> </strong> in its argument, which refers to the event click object.</p> <pre> const get = document.getElementById(&apos;btn&apos;); get.addEventListener(&apos;click&apos;, e =&gt; {}); get.dispatchEvent(new Event(&apos;click&apos;)); </pre> <p>Finally, as same as the previous method, we will define the click event to display the corresponding message in it at the time the click event is triggered.</p> <pre> function clickEvent() { console.log(&apos;The required event is triggered &apos;) } </pre> <hr></5;>

مثال 2:

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

 Click here 

وبعد ذلك بمساعدة addEventListener() الطريقة، سوف نقوم باسترداد الزر وانقر فوق الحدث فيه لتحديد 'إنها' في الوسيطة الخاصة به، والتي تشير إلى كائن النقر فوق الحدث.

 const get = document.getElementById('btn'); get.addEventListener('click', e => {}); get.dispatchEvent(new Event('click')); 

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

 function clickEvent() { console.log('The required event is triggered ') }