ה addEventListener() השיטה משמשת לצירוף מטפל באירועים לאלמנט מסוים. זה לא עוקף את מטפלי האירועים הקיימים. אומרים שאירועים הם חלק מהותי מה-JavaScript. דף אינטרנט מגיב בהתאם לאירוע שהתרחש. אירועים יכולים להיות שנוצרו על ידי משתמשים או על ידי ממשקי API. מאזין אירועים הוא הליך של JavaScript שמחכה להתרחשות של אירוע.
השיטה addEventListener() היא פונקציה מובנית של JavaScript . אנו יכולים להוסיף מספר מטפלי אירועים לאלמנט מסוים מבלי להחליף את מטפלי האירועים הקיימים.
תחביר
element.addEventListener(event, function, useCapture);
למרות שיש לו שלושה פרמטרים, הפרמטרים מִקרֶה ו פוּנקצִיָה נמצאים בשימוש נרחב. הפרמטר השלישי הוא אופציונלי להגדרה. הערכים של פונקציה זו מוגדרים כדלקמן.
ערכי פרמטרים
מִקרֶה: זה פרמטר נדרש. ניתן להגדיר אותו כמחרוזת המציינת את שם האירוע.
הערה: אל תשתמש בקידומת כלשהי כגון 'מופעל' עם ערך הפרמטר. לדוגמה, השתמש ב-'click' במקום 'onclick'.
פוּנקצִיָה: זה גם פרמטר נדרש. זה פונקציית JavaScript אשר מגיב להתרחשות האירוע.
משופר עבור לולאה java
useCapture: זה פרמטר אופציונלי. זהו ערך מסוג בוליאני שמציין אם האירוע מבוצע בשלב הבעבוע או הלכידה. הערכים האפשריים שלו הם נָכוֹן ו שֶׁקֶר . כאשר הוא מוגדר כ-true, המטפל באירועים מבצע בשלב הלכידה. כאשר הוא מוגדר כ-false, המטפל מבצע בשלב הבעבוע. ערך ברירת המחדל שלו הוא שֶׁקֶר .
בוא נראה כמה מהאיורים של השימוש בשיטת addEventListener() .
דוגמא
זוהי דוגמה פשוטה לשימוש בשיטת addEventListener(). עלינו ללחוץ על הנתון כפתור HTML לראות את האפקט.
דוגמה לשיטת addEventListener().
לחץ על הכפתור הבא כדי לראות את האפקט.
לחץ עלי document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'שלום עולם' + '' + 'ברוכים הבאים ל-javaTpoint.com'; }בדוק את זה עכשיו
תְפוּקָה
סעיפי sql
לאחר לחיצה על כפתור ה-HTML הנתון, הפלט יהיה -
כעת, בדוגמה הבאה נראה כיצד להוסיף אירועים רבים לאותו אלמנט מבלי לדרוס את האירועים הקיימים.
דוגמא
בדוגמה זו, אנו מוסיפים מספר אירועים לאותו אלמנט.
זוהי דוגמה להוספת אירועים מרובים לאותו אלמנט.
לחץ על הכפתור הבא כדי לראות את האפקט.
לחץ על פונקציה fun() { alert('ברוכים הבאים ל-javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'זוהי פונקציה שנייה'; } function fun2() { document.getElementById('para1').innerHTML = 'זוהי פונקציה שלישית'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('קליק', כיף); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);בדוק את זה עכשיותְפוּקָה
כעת, כאשר אנו לוחצים על הכפתור, תוצג התראה. לאחר לחיצה על כפתור ה-HTML הנתון, הפלט יהיה -
כאשר אנו יוצאים מההתראה, הפלט הוא -
דוגמא
בדוגמה זו, אנו מוסיפים מספר אירועים מסוג אחר לאותו אלמנט.
הבדל סימטרי
זוהי דוגמה להוספת אירועים מרובים מסוג שונה לאותו אלמנט.
לחץ על הכפתור הבא כדי לראות את האפקט.
Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'צהוב'; btn.style.color = 'כחול'; } function fun1() { document.getElementById('para').innerHTML = 'זוהי פונקציה שנייה'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('עבר עכבר', כיף); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);בדוק את זה עכשיותְפוּקָה
כאשר נעביר את הסמן מעל הכפתור, הפלט יהיה -
לאחר לחיצה על הכפתור ועזוב את הסמן, הפלט יהיה -
בועת אירועים או לכידת אירועים
כעת, אנו מבינים את השימוש בפרמטר השלישי של addEventListener() של JavaScript, כלומר, useCapture.
ב-HTML DOM, פִּכפּוּך ו לכידת הן שתי הדרכים להפצת אירועים. אנו יכולים להבין את הדרכים הללו על ידי נטילת דוגמה.
נניח שיש לנו אלמנט div ואלמנט פסקה בתוכו, ואנחנו מיישמים את ה 'נְקִישָׁה' אירוע לשניהם באמצעות addEventListener() שיטה. כעת השאלה היא על לחיצה על אלמנט הפסקה, אירוע הלחיצה של האלמנט מטופל ראשון.
כיצד לבצע סקריפט
אז, ב פִּכפּוּך, תחילה מטופל האירוע של רכיב הפסקה, ולאחר מכן מטופל באירוע של רכיב ה-div. זה אומר שבבעבוע, מטפלים קודם באירוע של האלמנט הפנימי, ולאחר מכן מטופל האירוע של האלמנט החיצוני ביותר.
ב לכידת תחילה מטופל האירוע של רכיב div, ולאחר מכן מטופל האירוע של רכיב הפסקה. זה אומר שבלכידת האלמנט החיצוני יטופל קודם כל, ולאחר מכן יטופל האירוע של האלמנט הפנימי ביותר.
כיצד לחסום מודעות יוטיוב באנדרואיד
addEventListener(event, function, useCapture);
אנו יכולים לציין את ההפצה באמצעות ה useCapture פָּרָמֶטֶר. כאשר הוא מוגדר כ-false (שהוא ערך ברירת המחדל שלו), אז האירוע משתמש בהפצה של בועות, וכאשר הוא מוגדר כ-true, יש את התפשטות הלכידה.
אנחנו יכולים להבין את פִּכפּוּך ו לכידה באמצעות איור.
דוגמא
בדוגמה זו, ישנם שני רכיבי div. אנו יכולים לראות את האפקט המבעבע על אלמנט ה-div הראשון ואת אפקט הלכידה על אלמנט ה-div השני.
כאשר אנו לוחצים פעמיים על רכיב span של אלמנט ה-div הראשון, אז האירוע של אלמנט ה-span מטופל קודם כל מאשר אלמנט ה-div. זה נקרא פִּכפּוּך .
אבל כאשר אנו לוחצים פעמיים על אלמנט span של אלמנט ה-div השני, אז האירוע של אלמנט ה-div מטופל קודם כל מאשר אלמנט span. זה נקרא לכידה .
div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true); בדוק את זה עכשיו תְפוּקָה
עלינו ללחוץ פעמיים על האלמנטים הספציפיים כדי לראות את האפקט.