`. І обробники `mouseover/out` для елементу `#parent` виведуть деталі події. -If you move the mouse from `#parent` to `#child`, you see two events on `#parent`: -1. `mouseout [target: parent]` (left the parent), then -2. `mouseover [target: child]` (came to the child, bubbled). +Якщо ви перемістите вказівник миші від `#parent` до `#child`, це викличе дві події на `#parent`: +1. `mouseout [target: parent]` (вказівник залишив parent), далі +2. `mouseover [target: child]` (дійшов до child, спливання події). [codetabs height=360 src="mouseoverout-child"] ``` -As shown, when the pointer moves from `#parent` element to `#child`, two handlers trigger on the parent element: `mouseout` and `mouseover`: +Як показано, коли вказівник переміщується від елемента `#parent` до `#child`, на батьківському елементі запускаються два обробники: `mouseout` і `mouseover`: ```js parent.onmouseout = function(event) { - /* event.target: parent element */ + /* event.target: parent елемент */ }; parent.onmouseover = function(event) { - /* event.target: child element (bubbled) */ + /* event.target: child елемент (спливання) */ }; ``` -**If we don't examine `event.target` inside the handlers, then it may seem that the mouse pointer left `#parent` element, and then immediately came back over it.** +**Якщо ми не перевіримо `event.target` всередині обробників, то може здатися, що вказівник миші залишив елемент `#parent`, а потім одразу повернувся на нього.** -But that's not the case! The pointer is still over the parent, it just moved deeper into the child element. +Але це не так! Вказівник все ще знаходиться над батьківським елементом, він просто перемістився глибше на дочірній елемент. -If there are some actions upon leaving the parent element, e.g. an animation runs in `parent.onmouseout`, we usually don't want it when the pointer just goes deeper into `#parent`. +Якщо є якісь дії після виходу з батьківського елемента, напр. анімація запускається в `parent.onmouseout`, ми зазвичай не хочемо цього, коли вказівник просто йде глибше в `#parent`. -To avoid it, we can check `relatedTarget` in the handler and, if the mouse is still inside the element, then ignore such event. +Щоб уникнути цього, ми можемо перевірити `relatedTarget` в обробнику і, якщо вказівник все ще всередині елемента, ігнорувати цю подію. -Alternatively we can use other events: `mouseenter` and `mouseleave`, that we'll be covering now, as they don't have such problems. +Як альтернативу ми можемо використовувати інші події: `mouseenter` і `mouseleave`, які ми зараз розглянемо, оскільки вони не мають таких проблем. -## Events mouseenter and mouseleave +## Події mouseenter і mouseleave -Events `mouseenter/mouseleave` are like `mouseover/mouseout`. They trigger when the mouse pointer enters/leaves the element. +Події `mouseenter/mouseleave` схожі на `mouseover/mouseout`. Вони спрацьовують, коли вказівник миші входить або залишає елемент. -But there are two important differences: +Але є дві важливі відмінності: -1. Transitions inside the element, to/from descendants, are not counted. -2. Events `mouseenter/mouseleave` do not bubble. +1. Переходи всередині елемента до/від нащадків не враховуються. +2. Події `mouseenter/mouseleave` не спливають. -These events are extremely simple. +Ці події надзвичайно прості. -When the pointer enters an element -- `mouseenter` triggers. The exact location of the pointer inside the element or its descendants doesn't matter. +Коли вказівник входить на елемент, спрацьовує `mouseenter`. Точне розташування вказівника всередині елемента або його нащадків не має значення. -When the pointer leaves an element -- `mouseleave` triggers. +Коли вказівник залишає елемент, спрацьовує `mouseleave`. ```online -This example is similar to the one above, but now the top element has `mouseenter/mouseleave` instead of `mouseover/mouseout`. +Цей приклад подібний до наведеного вище, але тепер у верхньому елементі є `mouseenter/mouseleave` замість `mouseover/mouseout`. -As you can see, the only generated events are the ones related to moving the pointer in and out of the top element. Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignored +Як бачите, єдині генеровані події пов’язані з переміщенням вказівника в верхній елемент і з нього. Нічого не відбувається, коли вказівник йде до дочірнього елемента і назад. Переходи між нащадками ігноруються [codetabs height=340 src="mouseleave"] ``` -## Event delegation +## Делегування подій (Event delegation) -Events `mouseenter/leave` are very simple and easy to use. But they do not bubble. So we can't use event delegation with them. +Події `mouseenter/leave` дуже прості та легкі у використанні. Але вони не спливають. Тому ми не можемо використовувати з ними делегування подій (event delegation). -Imagine we want to handle mouse enter/leave for table cells. And there are hundreds of cells. +Уявіть, що ми хочемо керувати входом/виходом вказівника миші для клітинок таблиці, в якій сотні клітин. -The natural solution would be -- to set the handler on `` and process events there. But `mouseenter/leave` don't bubble. So if such event happens on `

`, then only a handler on that `

` is able to catch it. +Ефективним рішенням було б встановити обробник на `` і обробляти події там. Але `mouseenter/leave` не спливають. Отже, якщо така подія відбувається на ` `, то лише обробник на цьому ` ` може її перехопити. -Handlers for `mouseenter/leave` on `` only trigger when the pointer enters/leaves the table as a whole. It's impossible to get any information about transitions inside it. +Обробники для `mouseenter/leave` на `` запускаються лише тоді, коли вказівник входить/виходить із таблиці в цілому. Інформацію про переходи всередині нього отримати неможливо. -So, let's use `mouseover/mouseout`. +Отже, давайте використаємо `mouseover/mouseout`. -Let's start with simple handlers that highlight the element under mouse: +Почнемо з простих обробників, які підсвічують елемент під вказівником миші: ```js -// let's highlight an element under the pointer +// виділимо елемент під вказівником table.onmouseover = function(event) { let target = event.target; target.style.background = 'pink'; @@ -178,44 +178,44 @@ table.onmouseout = function(event) { ``` ```online -Here they are in action. As the mouse travels across the elements of this table, the current one is highlighted: +Ось вони в дії. Коли миша переміщається по елементах цієї таблиці, поточний виділяється: [codetabs height=480 src="mouseenter-mouseleave-delegation"] ``` -In our case we'd like to handle transitions between table cells ` to another + // якщо ми зараз поза будь-яким до іншого if (!currentElem) return; - // we're leaving the element – where to? Maybe to a descendant? + // покидаємо елемент – але куди? Може ідемо до дочірнього елемента? let relatedTarget = event.relatedTarget; while (relatedTarget) { - // go up the parent chain and check – if we're still inside currentElem - // then that's an internal transition – ignore it + // піднімаємось батьківським ланцюжком і перевіряємо – чи ми все ще всередині currentElem + // тоді це внутрішній перехід – ігноруємо його if (relatedTarget == currentElem) return; relatedTarget = relatedTarget.parentNode; } - // we left the `: entering a cell and leaving it. Other transitions, such as inside the cell or outside of any cells, don't interest us. Let's filter them out. +У нашому випадку ми хочемо обробляти переходи між клітинами таблиці ` `: вхід у клітину та вихід з неї. Інші переходи, як всередині клітини або за її межами, нас не цікавлять. Відфільтруємо їх. -Here's what we can do: +Ось що ми можемо зробити: -- Remember the currently highlighted ` ` in a variable, let's call it `currentElem`. -- On `mouseover` -- ignore the event if we're still inside the current ` `. -- On `mouseout` -- ignore if we didn't leave the current ` `. +- Запам’ятайте поточний виділений ` ` у змінній, назвемо її `currentElem`. +- При `mouseover` -- ігноруємо, якщо ми все ще перебуваємо всередині поточного ` `. +- При `mouseout` -- ігноруємо, якщо ми не залишили поточний ` `. -Here's an example of code that accounts for all possible situations: +Ось приклад коду, який враховує всі можливі ситуації: [js src="mouseenter-mouseleave-delegation-2/script.js"] -Once again, the important features are: -1. It uses event delegation to handle entering/leaving of any ` ` inside the table. So it relies on `mouseover/out` instead of `mouseenter/leave` that don't bubble and hence allow no delegation. -2. Extra events, such as moving between descendants of ` ` are filtered out, so that `onEnter/Leave` runs only if the pointer leaves or enters ` ` as a whole. +І ще раз про важливі особливості такого підходу: +1. Ми використовуємо делегування подій для обробки входу/виходу вказівника на будь-який ` ` всередині таблиці. Таким чином, ми покладаємося на `mouseover/out` замість `mouseenter/leave`, які не спливають і, отже, не дозволяють делегування. +2. Додаткові події, такі як переміщення між нащадками ` `, відфільтровуються, тому `onEnter/Leave` запускається, лише якщо вказівник залишає або входить на ` `. ```online -Here's the full example with all details: +Ось повний приклад з усіма деталями: [codetabs height=460 src="mouseenter-mouseleave-delegation-2"] -Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't matter. Only ` ` as a whole is highlighted, unlike the example before. +Спробуйте перемістити курсор у клітини таблиці та всередину них. Швидко чи повільно -- не має значення. На відміну від попереднього прикладу, виділено лише ` `. ``` -## Summary +## Підсумки -We covered events `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`. +Ми розглянули події `mouseover`, `mouseout`, `mousemove`, `mouseenter` і `mouseleave`. -These things are good to note: +Варто звернути увагу на такі речі: -- A fast mouse move may skip intermediate elements. -- Events `mouseover/out` and `mouseenter/leave` have an additional property: `relatedTarget`. That's the element that we are coming from/to, complementary to `target`. +- Швидкий рух миші може призвести до пропуску проміжних елементів. +- Події `mouseover/out` і `mouseenter/leave` мають додаткову властивість: `relatedTarget`. Це елемент, до/від якого ми йдемо, ця властивість доповнює `target`. -Events `mouseover/out` trigger even when we go from the parent element to a child element. The browser assumes that the mouse can be only over one element at one time -- the deepest one. +Події `mouseover/out` запускаються, навіть коли ми переходимо від батьківського елемента до дочірнього. Браузер припускає, що вказівник миші може одночасно перебувати лише над одним елементом -- найвкладенішим. -Events `mouseenter/leave` are different in that aspect: they only trigger when the mouse comes in and out the element as a whole. Also they do not bubble. +Події `mouseenter/leave` відрізняються в цьому аспекті: вони запускаються лише тоді, коли вказівник миші входить і виходить з елемента в цілому. І ще вони не спливають. diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js index 6a3202467..0d810d3c3 100755 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js @@ -1,54 +1,54 @@ -// under the mouse right now (if any) +// під вказівником прямо зараз (якщо є) let currentElem = null; table.onmouseover = function(event) { - // before entering a new element, the mouse always leaves the previous one - // if currentElem is set, we didn't leave the previous , - // that's a mouseover inside it, ignore the event + // перед переходом до нового елемента миша завжди залишає попередній + // якщо вже встановлено currentElem, то ми ще не залишили попередній , + // і цей mouseover відбувається всередині, тому ігноруємо подію if (currentElem) return; let target = event.target.closest('td'); - // we moved not into a - ignore + // ми перейшли не в - ігнорувати if (!target) return; - // moved into , but outside of our table (possible in case of nested tables) - // ignore + // переміщено в , але за межами нашої таблиці (можливо у випадку вкладених таблиць) + // ігнорувати if (!table.contains(target)) return; - // hooray! we entered a new + // ура! ми перейшли до нового currentElem = target; onEnter(currentElem); }; table.onmouseout = function(event) { - // if we're outside of any now, then ignore the event - // that's probably a move inside the table, but out of , - // e.g. from , тоді ігноруємо подію + // це, мабуть, переміщення всередину таблиці, але поза , + // напр. від . really. + // ми залишили . насправді. onLeave(currentElem); currentElem = null; }; -// any functions to handle entering/leaving an element +// будь-які функції для обробки входу/виходу з елемента function onEnter(elem) { elem.style.background = 'pink'; - // show that in textarea + // показати це в textarea text.value += `over -> ${currentElem.tagName}.${currentElem.className}\n`; text.scrollTop = 1e6; } @@ -56,7 +56,7 @@ function onEnter(elem) { function onLeave(elem) { elem.style.background = ''; - // show that in textarea + // показати це в textarea text.value += `out <- ${elem.tagName}.${elem.className}\n`; text.scrollTop = 1e6; } Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved. Enter URL: Strip out scripts: Check this box to remove all script contents from the fetched content. Strip out images: Check this box to remove all images from the fetched content. Strip out CSS: Check this box to remove all CSS styles from the fetched content. Do not streamline image compression efficiency: Check this box to keep images inefficiently compressed and original size. Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages. Alternative Proxies: Alternative Proxy pFad Proxy pFad v3 Proxy pFad v4 Proxy