pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!

`. І обробники `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 ` `: 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` відрізняються в цьому аспекті: вони запускаються лише тоді, коли вказівник миші входить і виходить з елемента в цілому. І ще вони не спливають. From f02c212af428a310ae447afeda61abf620151ac8 Mon Sep 17 00:00:00 2001 From: Stanislav Dolgachov Date: Sun, 10 Mar 2024 14:38:22 +0200 Subject: [PATCH 3/8] 2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave: Translation P.3 --- .../solution.view/index.html | 34 +++++++++---------- .../source.view/index.html | 16 ++++----- .../1-behavior-nested-tooltip/task.md | 18 +++++----- 3 files changed, 34 insertions(+), 34 deletions(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html index 84d52b18c..9c2b73dd9 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html @@ -6,7 +6,7 @@