TechCodeview

אנחנו בעצם מתמודדים עם מצב כלשהו במהלך התכנות ב-javascript שבו אנחנו יכולים ליצור כל פונקציה בלחיצת הכפתור. לדוגמה, עלינו לבחון עוד פונקציונליות בזמן בדיקות אוטומציה של דף אינטרנט או אתר. במקרים כאלה, טכניקת אירוע הקליק המפעיל של javascript הופכת אמינה ויעילה יותר להתמודדות עם האתגרים המוצהרים.

בהקשר זה, נלמד על נהלי אירוע ההדק ב-javascript.

כיצד נוכל להפעיל אירוע קליק ב-javascript:

עלינו ליישם את הטכניקות המפורטות להלן כדי להפעיל את אירוע הקליק ב-javascript:

א) שיטת click()

ב) שיטות addEventListener() ו- dispathEvent

כעת נשתמש בשיטות שנכתבו לעיל כדי להדגים כדלקמן:

שיטה 1:

הפעל אירוע קליק באמצעות שיטת אירוע קליק ב-javascript:

על האלמנט המוזכר, ה שיטת קליק משמש לביצוע הפעולה. באמצעות הפונקציה המוגדרת על ידי המשתמש כאשר המשתמש לוחץ על הכפתור הנדרש בעזרת יצירת הכפתור, קבלת המזהה שלו והפעלת אירוע הקליק, ניתן ליישם שיטה זו.

להבהרה נוספת, עלינו לעבור על הדוגמה המובאת להלן:

דוגמא:

בדוגמה שניתנה להלן עם שיש 'לחץ כאן' , ייווצר כפתור עם id ויחד עם אירוע הקליק לגישה לאירוע הקליק עליו;

 Click here 

על ידי ציון המזהה שלו ב-javascript, עלינו לגשת ללחצן שנוצר בשיטת document.getElementById. כדי לבצע את הפעולה הבאה, אירוע הלחיצה יופעל.

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

לבסוף, לאחר לחיצה על הכפתור, נגדיר להדפיס את הפונקציה הבאה בשם 'clickEvent()' בצורה שבקונסולה בשיטת הקליק.

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

מהפלט לעיל של הקוד המתאים, בשיטת הלחיצה באופן אוטומטי, ראינו שלוחצים על הכפתור ללחוץ כאן.

שיטה 2:

הפעל אירוע קליק ב-javascript בעזרת שיטת addEventListener() ו- dispatchEvent()

ב-javascript, זוהי השיטה האינטגרלית שמסופקת על ידי ממשק יעד האירועים של javascript.

מאזין אירועים נרשם בשיטה זו. אנו נקרא לפונקציה המוגדרת שלנו כאשר האירוע הנזכר נתפס על המטרה.

תחביר של האירוע:

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

תיאור התחביר:

• בתחביר לעיל, יש פרמטר שנקרא סוג $ , שהוא פרמטר חובה. מציין את סוג האירוע שיש לנטר, הפרמטרים מקבלים מחרוזת אחת בלבד. פרמטר זה הוא פרמטר תלוי-רישיות. אירועים שונים נתמכים בו, כמו מקלדת, קליק, מסד נתונים, קלט וכו'
• באותו אופן, ה $מאזין הוא פרמטר חובה גם בו. הודעה על האירוע מתקבלת על ידי פרמטר זה כאובייקט כאשר התרחש אירוע מהסוג שהוזכר. בפונקציית javascript או בממשק של 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 ') }