diff options
Diffstat (limited to 'files/he/learn/javascript/building_blocks/events')
| -rw-r--r-- | files/he/learn/javascript/building_blocks/events/index.html | 588 |
1 files changed, 588 insertions, 0 deletions
diff --git a/files/he/learn/javascript/building_blocks/events/index.html b/files/he/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..9fc4363939 --- /dev/null +++ b/files/he/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,588 @@ +--- +title: היכרות ראשונית עם אירועים - Events +slug: Learn/JavaScript/Building_blocks/Events +translation_of: Learn/JavaScript/Building_blocks/Events +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">אירועים (Evants) אלו פעולות או התרחשויות אשר קורות במערכת שאנחנו מתכנתים בה, והמערכת אומרת לנו בדרך מסויימת על ההתרחשות שלהם, כך שאנחנו יכולים להגיב להתרחשות של האירוע המסויים בדרך מסויימת שנרצה. לדוגמא אם משתמש לחץ על כפתור באתר, אולי נרצה בתגובה לטפל באירוע הלחיצה הזה על ידי הצגת הודעה כלשהי. במאמר זה אנחנו נדון בעקרונות החשובים של events ונסתכל כיצד הם עובדים בדפדפדנים. אנחנו לא נרחיב יותר מדי, אלא רק מה שתצטרכו לדעת בשלב זה.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">ידע מוקדם:</th> + <td>הכרות בסיסית עם המחשב ועם הבסיס של HTML ו- CSS, וכן סיום במלאו של <a href="/en-US/docs/Learn/JavaScript/First_steps">מודול צעדים ראשונים ב-JavaScript</a>.</td> + </tr> + <tr> + <th scope="row">מטרה:</th> + <td>להבין את התיאוריה הבסיסית של אירועים וכיצד הם עובדים בדפדפנים וכיצד אירועים יכולים להיות שונים בסביבות פיתוח שונות.</td> + </tr> + </tbody> +</table> + +<h2 id="מה_הם_אירועים">מה הם אירועים? </h2> + +<p>כפי שרשמנו למעלה, אירועים, <strong>events,</strong> הם פעולות או התרחשויות שקורות במערכת שאנחחנו מתכנתים עליה - המערכת שולחת סימן מסויים שהאירוע מתרחש וגם מספקת לנו מכניזם מסויים שעל פיו כלומר, קוד מסויים ירוץ בתגובה להתרחשות אירוע מסויים. כמו בדוגמא עם לחיצת הכפתור שפירטנו למעלה. כאשר האירוע של ״לחיצת כפתור״ התרחש, הדפדפן שלח לנו סימן מסויים שהתרחש אירוע וטיפלנו בו באמצעות הקפצת חלונית.</p> + +<p>במקרה שלנו, אירועים מתרחשים בתוך חלון הדפדפן, ונוטים להיות מחוברים לפריט מסויים שבו הם התרחשו או עליו הם קרו - זה יכול להית אלמנט אחד, מספר אלמנטים, אירוע של טעינה דף HTML בלשונית מסויימת או טעינתו של חלון הדפדפן כולו.</p> + +<p>יש הרבה סוגים של אירועים שיכולים להתרחש. הנה דוגמא קטנה שלהם:</p> + +<ul> + <li>המשתמש לחץ על אלמנט מסויים או עבר עם העכבר על אלמנט מסויים.</li> + <li>המשתמש לחץ על כפתור במקלדת.</li> + <li>המשתמש הגדיל או הקטין את חלון הדפדפן.</li> + <li>דף אינטרנט סיים להיטען במלואו.</li> + <li>טופס נשלח.</li> + <li>וידאו החל להתנגן או הושהה או סיים לנגן.</li> + <li>התרחשה שגיאה.</li> +</ul> + +<p>תוכלו לראות בדף MDN בנושא <a href="/en-US/docs/Web/Events">Event reference</a> שיש <strong>לא מעט</strong> סוגי אירועים שניתן לטפל בהם - כלומר להגיב להתרחשותם.</p> + +<p>לכל אירוע זמין יש ״<strong>מטפל אירוע</strong>״ - <strong>event handler</strong>, שזה בעצם בלוק של קוד שבדרך כלל זו פונקציה שאנחנו נגדיר בעצמנו ושירוצו כאשר האירוע החל להתרחש. שימו לב שלפעמים <strong>event handlers</strong> נקראים <strong>event listeners</strong> - ״<strong>מאזיני אירוע</strong>״ בעיקרון, הם כמעט אותו דבר מבחינתנו כרגע, אבל יש הבדלים ביניהם, הם עובדים יחד: מאזין אירוע - <strong>event listeners</strong> - מאזין להתרחשות האירוע, ואילו מטפל האירוע - <strong>event handlers</strong>, מטפל באותו אירוע שהתרחש - (הקוד שמורץ בתגובה להתרחשות של אותו אירוע).</p> + +<div class="note"> +<p><strong>לתשומת לב</strong>: חשוב לדעת כי אירועי web אינם חלק מהבסיס של JavaScript - הם מוגדרים כחלק מה-API של JavaScript המובנים בתוך הדפדפן.</p> +</div> + +<h3 id="דוגמא">דוגמא</h3> + +<p>נסתכל על דוגמא פשוטה על מנת להסביר את הנושא. ראינו כבר אירועים ו-event handlers בהרבה מהדוגמאות במהלך הקורס אבל בואו נרענן את הזיכרון.</p> + +<p>הסתכלו בדוגמא הבאה, יש לנו אלמנט {{htmlelement("button")}} אחד, אשר כאשר הוא נלחץ, הוא שנה את הצבע של הרקע לצבע אקראי:</p> + +<pre class="brush: html"><button>Change color</button></pre> + +<div class="hidden"> +<pre class="brush: css">button { margin: 10px };</pre> +</div> + +<p>קוד ה-JavaScript שלנו נראה כך:</p> + +<pre class="brush: js">var btn = document.querySelector('button'); + +function random(number) { + return Math.floor(Math.random()*(number+1)); +} + +btn.onclick = function() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p>בדוגמא למעלה, אחסנו הפניה לאלמנט <code><button></code> בתוך משתנה שנקרא <code>btn</code>, באמצעות פונקציית {{domxref("Document.querySelector()")}}. בנוסף ,הגדרנו פונקציה שמחזירה לנו מספר אקראי. החלק השלישי של הקוד הוא מטפל האירוע - event handler. המשתנה <code>btn</code> מצביע על אלמנט <code><button></code> ולסוג הזה של האובייקט יש מספר מסוים של אירועים שיכולים להתרחש עליו, ולכן יש מספר מטפלי אירוע זמינים עבורו.</p> + +<p>בדוגמא זו אנחנו מקשיבים בעצם לאירוע/התרחשות של לחיצת עכבר באמצעות השמת ערך לתכונה (property) של event handler השווה לפונקציה אנונימית. פונקציה אנונימית זו מכילה קוד שמייצר צבע רנדומלי בפורמט rgb וקובעת את ה-<code>background-color</code> לצבע זה.</p> + +<p>הקוד שבפונקציה האנונימית ירוץ בכל פעם שאירוע הלחיצה על האלמנט <code><button></code> יתרחש, כלומר בכל פעם שהמשתמש לחץ על האלמנט הזה.</p> + +<p>התוצאה של הדוגמא תהא כך:</p> + +<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="זה_לא_רק_בדפי_האינטרנט">זה לא רק בדפי האינטרנט</h3> + +<p>דבר נוסף שנרצה להזכיר בנקודה זו הוא שאירועים הם לא מיוחדים ל-JavaScript - רוב שפות התכנות מכילות מודל כלשהו של אירועים, והדרך שבה מודל זה עובד בהם, יהיה לרוב שונה מהדרך שבה מודל זה עובד ב-JavaScript. האמת, מודל האירועים ב-JavaScript עבור דפי אינטרנט, שונה ממודל האירועים עבור JavaScript כאשר היא בסביבות אחרות.</p> + +<p>לדוגמא, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> היא סביבה המאפשרת לנו הרצה ושימוש ב-JavaScript בצד השרת. <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">מודל האירועים של Node.js </a>מתבסס על מאזינים (listeners) אשר מאזינים לאירועים ועל פולטים (emitters) אשר פולטים אירועים בתדירות מסויימת - זה לא נשמע שונה, אבל הקוד הוא שונה, ושם מתבצע שימוש בפונקציות כמו <code>()on</code> על מנת לרשום מאזין אירוע ו-<code>()once</code> על מנת לרשום מאזין אירוע שיאזין באופן חד פעמי ויתבטל לאחר שהורץ פעם אחת. דוגמא לכך ניתן לראות ב-<a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a>.</p> + +<p>דוגמא נוספת למודל אירועים שונים אנחנו יכולים לראות כאשר משתמשים ב-JavaScript על מנת לבנות תוספים לדפדפנים (מעין שיפורים לדפדפנים) - באמצעות טכנולוגיה שנקראת <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. מודל האירועים שם הוא דומה למודל האירועים של ה-Web, אבל שונה מעט - מאזיני האירועים הם camel-cased - כלומר, <code>on<strong>M</strong>essage</code> ולא <code>on<strong>m</strong>essage</code>, והם צריכים להיות ביחד עם פונקצית <code>addListener</code>. לדוגמאות ראו <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage page</a>.</p> + +<p>אינכם צריכים להבין עכשיו שום דבר על הסביבות הללו, רק רצינו להסביר לכם שאירועים ומודל האירועים יכול להיות בסביבות פיתוח שונות.</p> + +<h2 id="דרכים_לשימוש_ב-web_events">דרכים לשימוש ב-web events</h2> + +<p>יש מספר דרכים שונות שבהם אנחנו יכולים להוסיף מאזין אירוע -event listener לדפי הרשת על מנת שהוא יריץ את ה-event handler כאשר יתרחש האירוע הרלוונטי (event registration). בחלק זה, אנחנו נסקור את הדרכים השונות ונדון באילו מהן אנו צריכים להשתמש.</p> + +<h3 id="דרך_I_הוספת_תכונה_של_מטפל_אירוע_-_Event_handler_properties">דרך I: הוספת תכונה של מטפל אירוע - Event handler properties</h3> + +<p>דרך אחת היא בעצם לתת לאלמנט מסויים תכונה של מאזין אירוע והערך שלה יהיה מטפל אירוע. אנו נקרא לה ״<strong>תכונת מטפל אירוע</strong>״. נתקלנו בזה במהלך הקורס לא מעט. אם נחזור לדוגמא למעלה:</p> + +<pre class="brush: js">var btn = document.querySelector('button'); + +btn.onclick = function() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p>התכונה <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> היא תכונת מטפל האירוע (מאזין האירוע) הרלוונטית כרגע לדוגמא זו. היא תכונה בדיוק כמו שיש ל-<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.498039);">btn</span></font> תכונות נוספות שזמינו תעבורו כמו <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, או <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>, אבל היא תכונה מסוג מיוחד - כאשר אנחנו משימים בה ערך ששווה לקוד מסויים, הקוד הזה ירוץ בכל פעם שהאירוע יתרחש על הכפתור (או על האלמנט אשר נתנו לו את התכונה הזו).</p> + +<p>אנחנו גם יכולים לתת למטפל אירוע שכזה שיהיה שווה לשם של פונקציה מסויימת, כמו שראינו במאמר <a href="he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a>. הקוד הבא יעבוד בצורה מצויינת:</p> + +<pre class="brush: js">var btn = document.querySelector('button'); + +function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.onclick = bgChange;</pre> + +<p>יש הרבה סוגים של תכונות מטפלות אירוע שזמינות. ננסה כמה מהם:</p> + +<p>ראשית, שמרו לכם עותק מקומי של <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, ופיתחו אותו בדפדפן. זהו עותק של הדוגמא הפשוטה של בחירת הצבע שראינו בעבר. עכשיו שנו את ה- <code>btn.onclick</code> לערכים הבאים, כל אחד בתור, וראו מה קורה :</p> + +<ul> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> ו- <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — הצבע ישתנה כאשר הפוקוס יהיה על הכפתור וכאשר הוא יוצא ממנו - באמצעות מקש <kbd>tab</kbd>. אלו משמשים אותנו להצגת מידע כיצד למלא שדות בטופס שלנו או על מנת להציג הודעת שגיאה כאשר הכניסו בשדה ערך שגוי.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — כאן הצבע ישתנה רק כאשר נלחץ עליו פעמיים - דאבל קליק.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — כאן הצבע ישתנה כאשר המשתמש לחץ על כפתור במקלדת אשר יכול להפיק תו ושחרר אותו. <code>keypress</code> הוסר מהסטנדרטים המקובלים ולא מומלץ להשתמש באירוע מסוג זה מכיוון שהתמיכה בו נעלמת. <code>keydown</code> and <code>keyup</code> לא מדובר באירוע של לחיצה על לחצני החצים - אלא מדובר באירוע שמתרחש ברגע שהכפתור נלחץ ואירוע אחר שמתרחש ברגע שהפסיק ללחוץ על הכפתור. שימו לב שזה לא עובד אם נרשום את המטפל אירוע הזה על הכפתור צמו - אנחנו צריכים לרשום אותו על אובייקט <a href="/en-US/docs/Web/API/Window">window</a> שמייצג את החלון הדפדפן כולו. </li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> ו- <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — כאן הצבע ישתנה כאשר סמן העכבר עובר מעל הכפתור וכאשר הוא יוצא ממנו, בהתאמה.</li> +</ul> + +<p>ישנם אירועים שהם מאד כלליים והם זמינים כמעט בכל מקום או עבור כל אלמנט - לדוגמא - אפשר להאזין לאירוע <code>onclick</code> כמעט על כל אלמנט, בעוד יש כאלו שהם יותר ספציפיים ושימושיים בסיטואציות מסויימת. לדוגמא, הגיוני לנו ש-<a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> יהיה זמין רק לאלמנטים מסוג מסויים כמו {{htmlelement("video")}}.</p> + +<h3 id="דרך_II_לידיעה_בלבד_-_לא_להשתמש_בהם_-_Inline_event_handlers">דרך II: לידיעה בלבד - לא להשתמש בהם - Inline event handlers</h3> + +<p>יכול להיות שראיתם קוד שנראה כך:</p> + +<pre class="brush: html"><button onclick="bgChange()">Press me</button> +</pre> + +<pre class="brush: js">function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<div class="note"> +<p><strong>לתשומת לב</strong>: אתם יכולים לראות את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">קוד המקור</a> לדוגמא זו ב- GitHub או <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">בדף אינטרנט</a>.</p> +</div> + +<p>בעבר, הדרך לרשום (register) מטפלי אירוע הייתה באמצעות <strong>event handler HTML attributes</strong> הידועים גם כ- <strong>inline event handlers,</strong> כמו שרשום בדוגמא למעלה. הערך של אותו attribute הוא ממש קוד JavaScript שאנחנו רוצים שירוץ כאשר האירוע מתרחש. הדוגמא למעלה מפעילה פונקציה שמוגדרת בתוך האלמנט {{htmlelement("script")}} אבל באותה הדרך אנחנו יכולים להכניס פונקציה שלמה לתוך אותו attribute:</p> + +<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> + +<p>אל תשתמשו בדרך שכזו על מנת לטפל באירוע, זה נחשב כ- bad practice (פרקטיקה שאינה מקובלת בתעשייה). זה אולי נשמע יותר פשוט, אבל מהר מאוד זה הופך למשהו שלא ניתן לעקוב אחריו ולא יעיל.</p> + +<p>בנוסף, זה לא רעיון טוב לערבב בין HTML לבין JavaScript מאחר שזה נהיה קשה לעיבוד - היצמדו לכך שכל ה-JavaScript נמצא במקום אחד.</p> + +<p>אפילו כאשר מדובר בקובץ אחד, inline event handlers הם לא רעיון טוב. כאשר יש כפתור אחד זה עוד סביר, אבל מה אם היו לנו 100 כפתורים? היינו צריכים להוסיף 100 attributes לתוך הקובץ. מהר מאוד זה הופך לסיוט מבחינת תחזוקה של הקוד. עם JavaScript, אנחנו יכולים בקלות להוסיף מטפל אירוע לכל הכפתורים, לא משנה כמה יש כאלו, באמצעות קוד כזה:</p> + +<pre class="brush: js">var buttons = document.querySelectorAll('button'); + +for (var i = 0; i < buttons.length; i++) { + buttons[i].onclick = bgChange; +}</pre> + +<div class="note"> +<p><strong>לתשומת לב</strong>: הפרדה בין הקוד שלנו לבין התוכן גם הופך את האתר שלנו ליותר ידידותי למנועי החיפוש.</p> +</div> + +<h3 id="דרך_addEventListener()_III_ו-_()removeEventListener">דרך addEventListener() : III ו- ()removeEventListener</h3> + +<p>הסוג החדש ביותר של מנגנון אירועים הוגדר ב- <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> של ארגון W3C. מסמך זה הגדיר דרך טובה יותר לנהל אירועים, בין היתר באמצעות אובייקט מיוחד בשם <code>EvantTarget</code> אשר נוצר בדפדפן כאשר אירוע מתרחש. לאובייקט זה יש שלוש מתודות ואחת מהן היא <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code>. מתודה זו דומה לדרך הראשונה של event handler properties, אבל הסינטקס שונה. אנחנו יכולים לכתוב את הדוגמא שלנו עם הצבעים האקראיים בצורה הזו:</p> + +<pre class="brush: js">var btn = document.querySelector('button'); + +function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p><strong>לתשומת לב</strong>:תוכלו למצוא את <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">קוד המקור </a> של דוגמא זו ב- GitHub או ראו כ- <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">דף אינטרנט</a>).</p> +</div> + +<p>בתוך מתודת <code>()addEventListener</code>, אנחנו מציינים שני פרמטרים - אחד בעבור אותו האירוע, אותו ה-event אשר אנחנו רוצים שיאזינו והפרמטר השני זה פונקציה של הקוד שאנחנו רוצים שירוץ כמטפל באותו אירוע. שימו לב שזה בסדר גמור לשים את כל הקוד שיטפל באירוע כפונקציה אנונימית, בשונה מהדוגמא למעלה:</p> + +<pre class="brush: js">btn.addEventListener('click', function() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +});</pre> + +<p>לשיטה הזו יש יתרונות ברורים על השיטות הישנות שדנו בהם למעלה. ראשית, יש מתודה נוספת בשם <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">()removeEventListener</a></code> אשר מאפשרת לנו להסיר מאזיני אירוע. לצורך העניין, הקוד הבא יסיר את מאזין האירוע שקבענו למעלה:</p> + +<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> + +<p>זה אמנם לא כזה משמעותי עבור תוכניות קטנות או פשוטות, אבל בעבור תוכניות גדולות או מורכבות, זה יכול להגביר את היעילות ומאפשר לנקות מטפלי אירוע שאינם בשימוש עוד. בנוסף, זה מאפשר לנו שלאותו אלמנט - לאותו הכפתור - יהיו מספר מטפלי אירועים אשר יפעלו בצורה אחרת באירועים שונים - כל מה שאנחנו צריכים לעשות זה להוסיף/להסיר מטפלי אירוע בהתאם.</p> + +<p>בנוסף, אנחנו גם יכולים לרשום מספר מטפלי אירוע לאותו אירוע - הקוד הבא לדוגמא לא יכול להחיל שני מטפלי אירוע:</p> + +<pre class="brush: js">myElement.onclick = functionA; +myElement.onclick = functionB;</pre> + +<p>זאת מכיוון שהשורה השנייה דורסת את הערך שנקבע ל-<code>onclick</code> של השורה הראשנה. על מנת להוסיף מטפל אירוע נוסף מבלי לדרוס את מטפל את האירוע הקיים, אנחנו יכולים לעשות משהו כזה:</p> + +<pre class="brush: js">myElement.addEventListener('click', functionA); +myElement.addEventListener('click', functionB);</pre> + +<p>במקרה זה, שתי הפונקציות ירוצו כאשר ילחצו על האלמנט.</p> + +<p>כמו כן, יש מספר אפשרויות משמעותיות ותכונות זמינות עבור מנגנון ירועים בדרך הזו. אנחנו לא נרחיב עליהם, אך אם תרצו להרחיב את ידיעתכם בנושא, היכנסו לדפי ההסבר של MDN בנושא <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code> ובנושא <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">()removeEventListener</a></code>.</p> + +<h3 id="באיזה_מנגנון_אירועים_להשתמש">באיזה מנגנון אירועים להשתמש?</h3> + +<p>מתוך שלושת המנגנונים הללו, בוודאות <u><strong>אל</strong></u> תשתמשו במנגנון HTML event handler attributes - זה מנגנון ישן, שלא נמצא כבר בשימוש ונחשב כ- bad practice להשתמש בו.</p> + +<p>השניים האחרים הם יחסית די חלופיים כאשר מדובר בתוכנית פשוטה או כאשר מדובר בשימוש פשוט שנרצה לעשות באירועים:</p> + +<ul> + <li>ל- <strong>Event handler properties</strong> יש פחות אפשרויות ופחות כוח אך תמיכת הדפדפנים רחבה יותר (כולל Internet Explorer 8).</li> + <li>DOM Level 2 Events - כגון <code>addEventListener() ו-()removeEventListener</code> ועוד, מאפשרים לנו הרבה יותר אפשרויות, אבל יכולים להיות מורכבים ובעלי פחות תמיכת דפדפנים (נתמך החל מגרסת Internet Explorer 9). השתדלו לנסות ולהשתמש בהם בכך מתי שניתן. </li> +</ul> + +<p>כמו שאמרנו, היתרון העיקרי של המנגנון השלישי הוא שאתם יכולים להסיר קוד שמטפל באירוע, באמצעות <code>()removeEventListener</code>, ואתם יכולים להוסיף מספר מאזיני אירוע לאותו אלמנט. לדוגמא, אנחנו יכולים לקרוא ל-<code>({ ... }()addEventListener('click', function</code> על אלמנט מסויים מספר רב של פעמים, כאשר בכל פעם תהיה פונקציה אחרת בארגומנט השני. אופציה זו לא אפשרית ב- event handler properties כי כל הגדרה נוספת של property תמחוק את ההגדרה הקודמת שלו:</p> + +<pre class="brush: js">element.onclick = function1; +element.onclick = function2; +etc.</pre> + +<div class="note"> +<p><strong>לתשומת לב</strong>: אם אתם נדרשים לתמוך בדפדפנים ישנים מאינטרנט אקפלורר 8, אתם עלולים להיתקל בקשיים שכן דפדפדנים ישנים אלו משתמשים במודל אירועים שונה מדפדפנים חדשים, אך אל פחד. מרבית ספריות JavaScript (כמו לדוגמא jQuery) מכילות פונקציות מובנות שמבטלות כביכול את ההבדלים בין הדפדנים השונים. אין לכם צורך לדאוג לנושא זה בתחילת הלמידה שלכם.</p> +</div> + +<h2 id="עקרונות_נוספים_בנושא_אירועים">עקרונות נוספים בנושא אירועים</h2> + +<p>בחלק זה, אנחנו נגע בקצרה בנושאים מתקדמים הקשורים לאירועים. אין זה הכרחי להבין נושאים אלו לעומק בשלב זה, אך זה עלול לסייע לכם להבין תבניות קוד שתיתקלו בהם מדי פעם.</p> + +<h3 id="Event_objects">Event objects</h3> + +<p>לפעמים בתוך פונקצייה המטפלת באירוע (event handler) - אתם תראו פרמטר המצויין בתך הסוגריים, הנושא שם כמו <code>event</code>, <code>evt</code>, או סתם <code>e</code>. זה נקרא <strong>event object - האובייקט של האירוע עצמו,</strong> והוא <strong>מועבר בצורה אוטומטית למטפלי האירוע</strong> על מנת לספק אפשרויות נוספות ומידע נוסף. לדוגמא, נרשום את דוגמת הצבעים שלנו מחדש בצורה קצת שונה:</p> + +<pre class="brush: js">function bgChange(e) { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + e.target.style.backgroundColor = rndCol; + console.log(e); +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p><strong>לתשומת לב</strong>: תוכלו למצוא <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">את קוד המקור</a> ב-GitHub וגם לראות <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">את הדוגמא כדף אינטרנט</a>.</p> +</div> + +<p>כאן אנחנו יכולים לראות שאנחנו כוללים את האובייקט של האירוע - <strong>e</strong>, בתוך הפונקציה, ובתוך הפונקציה אנחנו קובעים צבע רקע ל- <code>e.target</code> — שזה בעצם הכפתור עצמו. המאפין <code>target</code> של event object הוא תמיד <strong>הפנייה לאלמנט שהאירוע התרחש עליו</strong>. כך, בדוגמא שלנו, אנחנו קובעים בעצם צבע רקע אקראי לכפתור עצמו שהאירוע הלחיצה התרחש עליו ולא לדף.</p> + +<div class="note"> +<p><strong>לתשומת לב</strong>: אתם יכולים להשתמש באיזה שם שנרצה עבור event object — רק השתמשו בשם שיהיה ברור שזה הפניה ל- event object. השמות המקובלים הם <code>e</code>/<code>evt</code>/<code>event</code> מכיוון שהם קצרים וקל לזכור את ההקשר שלהם.</p> +</div> + +<p><code>e.target</code> הוא שימושי להפליא כשאנחנו רוצים לקבוע את אותו event handler על מספר אלמנטים ולעשות משהו לכולם כאשר אותו אירוע מתרחש. לדוגמא, נניח ויש לנו סט של 16 אריחים שנעלמים כאשר הם נלחצים. זה נוח יותר כאשר מתאפשר לנו לקבוע שאלמנט יעלם כשאנחנו נלחץ עליו באמצעות שימוש ב- <code>e.target</code> , מאשר לבחור אותו בצורה מורכבת אחרת. בדוגמאות הבאות למשל ב-<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html - קוד המקור</a> (ניתן לראות גם ב-<a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">דף האינטרנט</a>) יצרנו 16 אלמנטים מסוג {{htmlelement("div")}} באמצעות JavaScript, ואנחנו בוחרים את כולם באמצעות {{domxref("document.querySelectorAll()")}} ואז עוברים על כל אחד מהם באמצעות לולאה ומוסיפים מאזין אירוע ומטפל אירוע של <code>onclick</code> לכל אחד מהם כך שכאשר כל אחד מהאלמנטים הללו נלחץ על ידי המשתמש, צבע אקראי אחר ניתן לאותו אלמנט:</p> + +<pre class="brush: js">var divs = document.querySelectorAll('div'); + +for (var i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } +}</pre> + +<p>הפלט נראה כך. נסו לשחק איתו:</p> + +<div class="hidden"> +<h6 id="Hidden_example">Hidden example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Useful event target example</title> + <style> + div { + background-color: red; + height: 100px; + width: 25%; + float: left; + } + </style> + </head> + <body> + <script> + for (var i = 1; i <= 16; i++) { + var myDiv = document.createElement('div'); + document.body.appendChild(myDiv); + } + + function random(number) { + return Math.floor(Math.random()*number); + } + + function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + return rndCol; + } + + var divs = document.querySelectorAll('div'); + + for (var i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } + } + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>הרבה ממאזיני האירועים/מטפלי האירועים שניתקל בהם הם בעלי סט סטנדרטי של properties ופונקציות - או יותר נכון מתודות, אשר זמינים עבור ה-event object - ראו את הדף בנושא אובייקט {{domxref("Event")}} לרשימה המלאה.</p> + +<p>יש מטפלי אירועים יותר מורכבים, המכילים properties מיוחדים בעלי מידע ספציפי שהם צריכים על מנת לתפקד כמטפל אירוע. לדוגמא ל-<a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, יש סוג אירוע - <code>dataavailable</code> - שמתרחש כאשר אודיו או וידאו הוקלטו והם זמינים כך שניתן לבצע עליהם פעולות מסויימות - לדוגמא לשמור אותם או לנגן אותם שוב. למאזין האירוע/מטפל אירוע התואם <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> יש property שזמין בשם <code>data</code> עבורו המכיל את האודיו/וידאו שהוקלט ומאפשר לנו לגשת אליו ולעשות איתו דברים.</p> + +<h3 id="מניעת_התנהגות_ברירת_מחדל">מניעת התנהגות ברירת מחדל</h3> + +<p>לפעמים אנחנו ניתקל בסיטואצית שאנחנו נרצה למנוע מאירוע לבצע את מה שהוא אמור לעשות כברירת מחדל. הדוגמא הכי נפוצה היא טופס באינטרנט. כאשר אנחנו נמלא את הפרטים ונלחץ על כפתור ה-Submit , ההתנהגות ברירת המחדל תהיה לשלוח את המידע שהוכנס בטופס לדף מסויים בשרת לשם עיבוד, והדפדפן יועבר למעין דף של ״הפרטים נשלחו בהצלחה״ או משהו דומה.</p> + +<p>הבעיה מתעוררת כאשר המשתמש לא הזין את המידע כראוי - כמפתחים, אנחנו נרצה למנוע שליחה של המידע השגוי לשרת ולתת למשתמש הודעת שגיאה שאומרת להם מה הייתה הטעות ומה הם צריכים לעשות. חלק מהדפדנים תומכים בולידציה של מידע בטפסים, אך מכיון שהרבה לא ומסיבות נוספות, אנחנו ממליצים לא להסתמך על ולידציה של דפדפנים אלא לבנות את הולידציה בעצמכם. לדוגמא:</p> + +<p>נתחיל עם טופס HTML פשוט דורש מאיתנו להכניס שם פרטי ושם משפחה:</p> + +<pre class="brush: html"><form> + <div> + <label for="fname">First name: </label> + <input id="fname" type="text"> + </div> + <div> + <label for="lname">Last name: </label> + <input id="lname" type="text"> + </div> + <div> + <input id="submit" type="submit"> + </div> +</form> +<p></p></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} +</pre> +</div> + +<p>כעת קצת JavaScript - כאן החלנו בדיקה פשוטה מאוד בתוך מטפל האירוע <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (האירוע של submit מתרחש כאשר הטופס נשלח).</p> + +<p>הבדיקה שלנו בודקת הם שדות הטקסט ריקים. אם כן, אנחנו קוראים לפונקציית <code><a href="/en-US/docs/Web/API/Event/preventDefault">()preventDefault</a></code> על ה- event object - כלומר על האלמנט שעליו התרחש האירוע. פונקצייה זו מונעת מהטופס להישלח - ומציגה הודעת שגיאה בפסקה מתחת לטופס שלנו, על מנת להציג למשתמש מה השתבש:</p> + +<pre class="brush: js">var form = document.querySelector('form'); +var fname = document.getElementById('fname'); +var lname = document.getElementById('lname'); +var submit = document.getElementById('submit'); +var para = document.querySelector('p'); + +form.onsubmit = function(e) { + if (fname.value === '' || lname.value === '') { + e.preventDefault(); + para.textContent = 'You need to fill in both names!'; + } +}</pre> + +<p>ברור שזו ולידציה פשוטה וחלשה מאוד - זה לא ימנע מהמשתמש להזין רווחים או מספרים לתוך שדות הטקסט, אך זה מספיק לשם הדוגמא. הפלט ייראה כך:</p> + +<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>לתשומת לב</strong>: ראו את קוד המקור פה <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> או <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">דף אינטרנט</a>.</p> +</div> + +<h3 id="event_bubbling_ו-_capture">event bubbling ו- capture</h3> + +<p>נושא נוסף שאנחנו נרצה לדון הוא משהו שאמנם לא ניתקל בו הרבה, אך אם לא נכיר אותו ונבין אותו, יכול לעשות לנו כאב ראש לא קטן.</p> + +<p>event bubbling ו- capture אלו שני מנגנונים אשר מסבירים מה קורה כאשר שנים או יותר <strong>מטפלי אירוע</strong> של <strong>אותו אירוע</strong> מופעלים על <strong>אלמנט אחד</strong>. לצורך ההסבר, פתחו את <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> בלשונית חדשה בדפדפן ואת <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">קוד המקור</a> בלשונית אחרת. ניתן גם לראות את הדוגמא כאן למטה:</p> + +<div class="hidden"> +<h6 id="Hidden_video_example">Hidden video example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Show video box example</title> + <style> + div { + position: absolute; + top: 50%; + transform: translate(-50%,-50%); + width: 480px; + height: 380px; + border-radius: 10px; + background-color: #eee; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); + } + + .hidden { + left: -50%; + } + + .showing { + left: 50%; + } + + div video { + display: block; + width: 400px; + margin: 40px auto; + } + + </style> + </head> + <body> + <button>Display video</button> + + <div class="hidden"> + <video> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> + </div> + + <script> + + var btn = document.querySelector('button'); + var videoBox = document.querySelector('div'); + var video = document.querySelector('video'); + + btn.onclick = function() { + displayVideo(); + } + + function displayVideo() { + if(videoBox.getAttribute('class') === 'hidden') { + videoBox.setAttribute('class','showing'); + } + } + + videoBox.addEventListener('click',function() { + videoBox.setAttribute('class','hidden'); + }); + + video.addEventListener('click',function() { + video.play(); + }); + + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>זו דוגמא פשוטה שמראה ומסתירה אלמנט {{htmlelement("div")}} שמכיל אלמנט {{htmlelement("video")}} בתוכו:</p> + +<pre class="brush: html"><button>Display video</button> + +<div class="hidden"> + <video> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> + </video> +</div></pre> + +<p>כאשר אנחנו לוחצים על {{htmlelement("button")}} הוידאו מוצג, באמצעות שינוי ה-class של <code><div></code> מ- <code>hidden</code> ל- <code>showing</code> (ה-css בקובץ מכיל בין היתר שני classes אשר מציגים את הקופסא במסך או מסתירים אותה, בהתאמה) :</p> + +<pre class="brush: js">btn.onclick = function() { + videoBox.setAttribute('class', 'showing'); +}</pre> + +<p>לאחר מכן אנחנו מוסיפים עוד שני מטפלי אירוע של <code>onclick</code> - הראשון ל- <code><div></code> והשני ל - <code><video></code>. הרעיון הוא שכאשר האזור של ה- <code><div></code> מחוץ לוידאו מקבל לחיצה, הקופסא אמורה להיעלם שוב; כאשר הוידאו עצמו נלחץ, הוידאו אמור לפעול שוב:</p> + +<pre>videoBox.onclick = function() { + videoBox.setAttribute('class', 'hidden'); +}; + +video.onclick = function() { + video.play(); +};</pre> + +<p>אבל ישנה בעי כרגע, כאשר אנחנו לוחצים על הוידאו הוא מתחיל להתנגן, אבל גורם גם ל- <code><div></code> להיות מוסתר באותו הזמן. זה מכיוון שהוידאו שבתוך ה-<code><div></code> - הוא חלק ממנו - אז כאשר אנחנו לוחצים על הוידאו - אנחנו בעצם גם מפעילים את האירוע על ה-<code><div></code> עצמו, ושני מטפלי האירוע נכנסים לפעולה.</p> + +<h4 id="bubbling_ו-_capturing">bubbling ו- capturing</h4> + +<p>כאשר אירוע מתרחש על אלמנט שיש לו אלמנט אב - לדוגמא האלמנט {{htmlelement("video")}} שלנו, לדפדפנים המודרניים יש שני תהליכים שונים שהם מבצעים: שלב ה- <strong>capturing</strong> ושלב ה- <strong>bubbling</strong>.</p> + +<p>בשלב - <strong>capturing</strong>:</p> + +<ul> + <li>הדפדפן בודק האם אלמנט האב הראשי ({{htmlelement("html")}}) מכיל event handler של <code>onclick</code> הרשום בשלב capturing ואם כן הוא מריץ אותו.</li> + <li>לאחר מכן, ובכל מקרה, הוא עובר לאלמנט הבן שנמצא בתוך - ({{htmlelement("html")}}) - ובודק שוב את הדבר, וכך הלאה, עד אשר הוא מגיע לאלמנט שבפועל לחצנו עליו.</li> +</ul> + +<p>בשלב - <strong>bubbling</strong> קורה בדיוק ההפך:</p> + +<ul> + <li>הדפדפן בודק האם האלמנט שלחצו עליו בפועל מכיל event handler של <code>onclick</code> הרשום עליו בשלב bubbling ואז מריץ אותו אם כן.</li> + <li>לאחר מכן הוא ממשיך בכל מקרה לאלמנט האב הישיר שלו ומבצע את אותו דבר וכך הלאה, עד שהוא מגיע לאלמנט <code><html></code>.</li> +</ul> + +<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p> + +<p>לחצו על התמונה על מנת להגדיל אותה.</p> + +<p>בדפדפנים מודרניים, <strong>ברירת המחדל היא שכל ה-event handlers נרשמים בשלב ה-bubbling</strong>. בדוגמא שלנו למשל, כאשר לחצנו על הוידאו, <u><strong>האירוע</strong></u> מסוג לחיצה ״בועבע״ מאלמנט <code><video></code> הלאה לאלמנט <code><html></code>, כאשר במהלך הדרך :</p> + +<ul> + <li>הוא מצא מטפל אירוע - <code>video.onclick...</code> והריץ אותו ולכן הוידאו החל להתנגן.</li> + <li>לאחר מכן הוא מצא מטפל אירוע <code>videoBox.onclick...</code> והריץ אותו גם, ולכן הסתיר את הוידאו (או יותר נכון הסתיר את ה-div שהכיל את הוידאו).</li> +</ul> + +<p><strong>שימו לב שמה שבועבע הוא התרחשות האירוע עצמו, ולא מטפל האירוע (אותו דבר קורה גם בשלב ה-capturing). </strong></p> + +<h4 id="תיקון_הבעיה_עם_()stopPropagation">תיקון הבעיה עם ()stopPropagation</h4> + +<p>על מנת לתקן את ההתנהגות הזו, לאובייקט האירוע עצמו - event object - יש מתודה זמינה עבורו שנקראת <code><a href="/en-US/docs/Web/API/Event/stopPropagation">()stopPropagation</a></code>, כאשר היא מופעלת על מטפל האירוע של אובייקט האירוע, היא תריץ את מטפל האירוע, אבל <strong>תמנע מהאירוע עצמו להמשיך לבעבע במעלה השרשרת לאלמנטי האב שלו</strong> (וכנ״ל גם בשלב ה- capturing)<strong> </strong>וכך מטפלי אותו אירוע של אלמנטי האב לא ירוצו.</p> + +<p>כך, על מנת לתקן את הבעיה בדוגמא שלנו, אנחנו נשנה את הפונקציה המטפלת באירוע כך:</p> + +<pre class="brush: js">video.onclick = function(e) { + e.stopPropagation(); + video.play(); +};</pre> + +<p>אתם יכולים ליצור עותק מקומי של קוד המקור של <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html </a> ולתקן זאת בעצמכם או לראות הקובץ המתוקן <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">כאן</a> ואת <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">קוד המקור</a> כאן.</p> + +<div class="note"> +<p><strong>הערה חשובה</strong>: אתם בטח שואלים את עצמכם מדוע לטרוח וליצור שני שלבים - גם capturing וגם bubbling? התשובה נעוצה בהיסטוריה ובימי העבר כאשר התאימות בין דפדפנים הייתה שונה מאוד ולא כפי שהיא היום.</p> + +<p>בימים ההם Netscape השתמש ב-event capturing בלבד ואילו Internet Explorer השתמש ב - event bubbling בלבד. כאשר ארגון W3C החליט לנסות וליצור סטדרט אחיד, הם החליטו על מנגנון שיכלול את שני השלבים - וכל הדפדפנים אימצו את שני השלבים.</p> +</div> + +<div class="note"> +<p><strong>לתשומת לב</strong>: יחד עם זאת, כברירת מחדל, כל מטפלי האירועים נרשמים בשלב bubbling ולא בשלב capturing וברוב המוחלט של הפעמים זה עושה שכל. אם אנחנו ממש רוצים לרשום אירוע בשלב ה-capturing, אנחנו יכולים לעשות זאת באמצעות הוספת <code>true</code> כפרמטר שלישי בתוך <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">()addEventListener</a></code>. היכנסו לקישור זה אם תרצו להרחיב בנושא. </p> +</div> + +<h4 id="Event_delegation">Event delegation</h4> + +<p>bubbling מאפשר לנו להשתמש ביתרונות של <strong>event delegation</strong> — רעיון זה מתבסס על העובדה שאם אנחנו רוצים להריץ קוד מסויים כאשר אנחנו לוחצים על אלמנט ילד אחד שהוא חלק ממספר אלמנטים ילדים של אלמנט אב, אנחנו יכולים לקבוע את מאזין האירוע על אלמנט האב, ואז כאשר האירוע מתרחש על אחד מאלמנטים הילדים, האירוע ״יבועבע״ לאלמנט ההורה שלהם.</p> + +<p>כתיבה שכזו עדיפה על רישום מאזין אירוע לכל אחד מהילדים בנפרד. להזכירכם - בשלב ה-bubbling נבדק האם האלמנט שהאירוע התרחש עליו מכיל מטפל אירוע לאירוע שהתרחש ומתקדם הלאה לאלמנט ההורה ומבעבע אליו את האירוע ובודק האם הוא מכיל מטפל אירוע לאירוע שהתרחש וכך הלאה.</p> + +<p>דוגמא טובה לכך היא רשימה של פריטים - אם אנחנו רוצים שכל פריט מהרשימה יקפיץ הודעה כאשר לוחצים עליו, אנחנו יכולים לקבוע מאזין אירוע על האלמנט ההורה - במקרה שלנו <code><ul></code>, וכל לחיצה על פריט מהרשימה (<code><li></code>) - כלומר כל התרחשות אירוע שכזה על פריט מהרשימה - אירוע הלחיצה יבעבע מאלמנט <code><li></code> לאלמנט האב - <code><ul></code>.</p> + +<p>רעיון זה מוסבר בפירוט רב בבלוג של David Walsh עם דוגמאות נוספות. ראו את המאמר שלו בנושא <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p> + +<h2 id="לסיכום">לסיכום</h2> + +<p>במאמר זה ניסינו להסביר כל מה שאתם צריכים לדעת על אירועי Web בשלב זה. כפי שנאמר למעלה, אירועים הם לא חלק מה-core של JavaScript - הם מוגדרים ב-Web APIs של הדפדפן.</p> + +<p>חשוב להבין בנוסף שיש הבדלים בין מודלי האירועים של JavaScript בסביסות השונות שהיא מורצת - החל מ- Web APIs ועד לסביבות אחרות כמו Browser WebExtensions ו- Node.js. לא מצפים מכם שכרגע תבינו את כל הסביבות הללו, אבל זה עוזר לכם להבין את הבסיס ככל ותתקדמו בלמידה.</p> + +<p>אם משהו לא ברור, הרגישו חופשי לקרוא שוב את המאמר או <a href="/en-US/Learn#Contact_us">ליצור עמנו קשר</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> - מאמר מפורט בנושא capturing and bubbling שנכתב על ידי Peter-Paul Koch.</li> + <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> - מאמר מפורט בנושא event object שנכתב גם הוא על ידי Peter-Paul Koch.</li> + <li><a href="/en-US/docs/Web/Events">Event reference</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="במודול_זה">במודול זה</h2> + +<ul> + <li><a href="/he/docs/Learn/JavaScript/Building_blocks/conditionals">קבלת החלטות בקוד - משפטי תנאי - Conditionals</a></li> + <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Looping_code">לולאות - Loops</a></li> + <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Functions">פונקציות - בלוקי קוד לשימוש חוזר - Functions</a></li> + <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">בניית פונקציות משלנו</a></li> + <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Return_values">ערכים מוחזרים מהפונקציה - Function return values </a></li> + <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Events">היכרות ראשונית עם אירועים -Introduction to events</a></li> + <li><a href="/he/docs/Learn/JavaScript/Building_blocks/Image_gallery">תרגול: בניית גלריית תמונות</a></li> +</ul> |