ניהול אירועים ב-JavaScript

Articles

מאמר זה מסביר את ניהול האירועים ב-JavaScript.

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

ניהול אירועים ב-JavaScript

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

יסודות האירועים

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

קליק (click)
הזנת מקלדת (keydown, keyup)
תנועת עכבר (mousemove, mouseover)
שליחת טופס (submit)
טעינת דף הושלמה (DOMContentLoaded)
גלילה (scroll)

הוספת מאזיני אירועים

מאזיני אירועים מוגדרים באמצעות המתודה addEventListener(). מתודה זו מפעילה פונקציה מסוימת כאשר האירוע המוסמך מתרחש.

תחביר בסיסי של `addEventListener()`

1element.addEventListener(event, handler);

element הוא האלמנט של HTML שמנטר את האירוע.
event הוא שם האירוע (למשל, click).
handler היא הפונקציה שמבוצעת כאשר האירוע מתרחש.

אובייקט האירוע

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

דוגמה: שימוש באובייקט האירוע

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

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

אירועים טיפוסיים

אירוע לחיצה

אירוע click מתרחש כאשר המשתמש לוחץ על אלמנט.

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

הקוד הזה מציג הודעה במסוף כאשר האלמנט נלחץ.

אירועי מקלדת

אירועי keydown ו-keyup מתרחשים כאשר המשתמש לוחץ או משחרר מקש. ניתן להשתמש ב-event.key כדי לראות איזה מקש נלחץ.

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

הקוד הזה מציג את שם המקש במסוף כאשר המשתמש לוחץ על מקש.

אירועי עכבר

אירועי mousemove ו-mouseover מתרחשים בעת תנועת העכבר והצבת סמן העכבר על אלמנט.

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

הקוד הזה מציג את המיקום (קואורדינטות X ו-Y) במסוף בכל פעם שהעכבר זז.

אירועי טפסים

אירועים הקשורים לטפסים כוללים את submit ו-input. אירוע submit מתרחש כאשר טופס נשלח ומוביל בדרך כלל לטעינת העמוד מחדש, אך נעשה לעיתים קרובות שימוש ב-event.preventDefault() כדי למנוע זאת.

דוגמה: מניעת טעינת עמוד מחדש בשליחת טופס

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

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

התפשטות אירועים (בועה ולכידה)

אירועים מתפשטים בשני שלבים: שלב הכידוד, שנע מהאלמנטים ההורים לאלמנטים הילדים, ושלב ההתרחבות (בועה), שנע מהאלמנטים הילדים לאלמנטים ההורים.

בועת אירוע

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

דוגמה: דוגמת בועה

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

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

לכידת אירוע

על ידי הגדרת true כארגומנט השלישי ב-addEventListener(), ניתן לטפל באירועים בשלב לכידת האירוע.

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

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

מניעת התפשטות באמצעות `stopPropagation()`

אתה יכול למנוע מאירועים להתפשט באמצעות event.stopPropagation().

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

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

הסרת אירועים

אתה יכול להסיר מאזיני אירועים באמצעות removeEventListener(). כדי להסיר מאזין אירוע, אתה צריך הפניה לפונקציה שהוגדרה ב-addEventListener().

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

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

אירועים מותאמים אישית

ב-JavaScript, אפשר ליצור ולהפעיל אירועים מותאמים אישית בנוסף לאירועים סטנדרטיים. השתמש בבנאי CustomEvent.

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

הקוד הזה יוצר ושולח אירוע מותאם אישית בשם myCustomEvent, ומציג את פרטיו במסוף.

סיכום

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

מאזין אירוע: השתמש ב-addEventListener() כדי להגדיר מטפל אירוע על אלמנט.
אובייקט אירוע: כאשר אירוע מתרחש, מועבר אובייקט אירוע שיכול לשמש לקבלת מידע מפורט.
התפשטות אירועים: אירועים מתפשטים בשני שלבים: התפשטות למעלה (bubbling) והתפשטות למטה (capturing).
אירועי טופס ואירועים מותאמים אישית: ניתן לטפל בשליחת טפסים ובאירועים מותאמים אישית.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

צללים DOM בג'אווהסקריפט

ניהול אירועים ב-JavaScript

YouTube Video

ניהול אירועים ב-JavaScript

יסודות האירועים

הוספת מאזיני אירועים

תחביר בסיסי של addEventListener()

אובייקט האירוע

דוגמה: שימוש באובייקט האירוע

אירועים טיפוסיים

אירוע לחיצה

אירועי מקלדת

אירועי עכבר

אירועי טפסים

דוגמה: מניעת טעינת עמוד מחדש בשליחת טופס

התפשטות אירועים (בועה ולכידה)

בועת אירוע

דוגמה: דוגמת בועה

לכידת אירוע

מניעת התפשטות באמצעות stopPropagation()

הסרת אירועים

אירועים מותאמים אישית

סיכום

YouTube Video

תחביר בסיסי של `addEventListener()`

מניעת התפשטות באמצעות `stopPropagation()`