ה בלחיצה אירוע מתרחש בדרך כלל כאשר המשתמש לוחץ על אלמנט. זה מאפשר למתכנת לבצע פונקציה של JavaScript כאשר לוחצים על רכיב. ניתן להשתמש באירוע זה לאימות טופס, הודעות אזהרה ועוד רבות אחרות.
באמצעות JavaScript, ניתן להוסיף אירוע זה באופן דינמי לכל אלמנט. זה תומך בכל רכיבי HTML למעט , , , , , , , ,
, , ו . זה אומר שאנחנו לא יכולים ליישם את בלחיצה אירוע בתגיות הנתונות.
ב-HTML, אנו יכולים להשתמש ב- בלחיצה לייחס ולהקצות א פונקציית JavaScript אליו. אנחנו יכולים גם להשתמש ב-JavaScript addEventListener() שיטה ועוברים א נְקִישָׁה אירוע אליו לגמישות רבה יותר.
תחביר
כעת, אנו רואים את התחביר של השימוש ב- בלחיצה אירוע ב-HTML וב- javascript (לְלֹא addEventListener() שיטה או באמצעות addEventListener() שיטה).
ב-HTML
ב-JavaScript
object.onclick = function() { myScript }; ב-JavaScript על ידי שימוש בשיטת addEventListener()
object.addEventListener('click', myScript);
בוא נראה איך להשתמש בלחיצה אירוע באמצעות כמה איורים. כעת, נראה את הדוגמאות לשימוש ב- בלחיצה אירוע ב-HTML וב-JavaScript.
דוגמה1 - שימוש בתכונת onclick ב-HTML
בדוגמה זו, אנו משתמשים ב- 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
בדוגמה זו, אנו משתמשים ב-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'; } בדוק את זה עכשיו תְפוּקָה
לאחר לחיצה על הטקסט לחץ עלי, הפלט יהיה -
דוגמה3 - שימוש בשיטת addEventListener()
בדוגמה זו, אנו משתמשים ב-JavaScript addEventListener() שיטה לצרף א נְקִישָׁה אירוע לרכיב הפסקה. כאשר המשתמש לוחץ על רכיב הפסקה, הטקסט של הפסקה משתנה.
בלחיצה על הפסקה, גם צבע הרקע וגודל הגופן של האלמנטים ישתנו.
. שווה ל-java
<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'; } בדוק את זה עכשיו תְפוּקָה
בלחיצה על הטקסט לחץ עלי , הפלט יהיה -
