jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-02-07 15:12:07 +03:00
parent 19d9078ca3
commit 0d67d5be7f
42 changed files with 1047 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

14
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
View file

@ -12,7 +12,7 @@
В примере ниже вы можете наглядно посмотреть события `mouseover/out`, возникающие на всех элементах.
[example src="mouseoverout" height=220]
[codetabs src="mouseoverout" height=220]
Можно заметить, что в некоторых случаях значение `relatedTarget` может быть `null`. Это вполне нормально и означает, что мышь пришла из-за пределов окна (или ушла за окно).
@ -38,7 +38,7 @@
А еще попробуйте зайти курсором мыши на красный `div` и потом быстро вывести мышь из него куда-нибудь сквозь зеленый. Если движение мыши достаточно быстрое, то родительский элемент будет проигнорирован.
[example height=360 src="mouseoverout-fast"]
[codetabs height=360 src="mouseoverout-fast"]
Важно иметь в виду эту особенность событий, чтобы не написать код, который рассчитан на последовательный проход над элементами.
@ -58,7 +58,7 @@
Зайдите на синий элемент, а потом переведите мышь на красный -- и наблюдайте за событиями:
[example height=360 src="mouseoverout-child"]
[codetabs height=360 src="mouseoverout-child"]
<ol>
<li>При заходе на синий -- на нём сработает `mouseover [target: blue]`.</li>
@ -91,7 +91,7 @@
Вы можете увидеть, как они работают проведя курсором над голубым `DIV'ом` ниже. Обработчик стоит только на внешнем, синем элементе. Обратите внимание -- лишних событий при переходе на красного потомка нет!
[example height=340 src="mouseleave"]
[codetabs height=340 src="mouseleave"]
## Делегирование -- проблема mouseenter/leave
@ -103,7 +103,7 @@
Это легко видеть в примере ниже: обработчики `mouseenter/leave` стоят на `<table>` и сработают при входе-выходе из таблицы, получить из них какую-то информацию о переходах по её ячейкам не представляется возможным:
[example height=480 src="mouseleave-table"]
[codetabs height=480 src="mouseleave-table"]
Не беда -- воспользуемся `mouseover/mouseout`.
@ -113,7 +113,7 @@
Получится так:
[example height=450 src="mouseenter-mouseleave-delegation"]
[codetabs height=450 src="mouseenter-mouseleave-delegation"]
В этом примере код обработчиков выглядит так:
@ -139,7 +139,7 @@ table.onmouseout = function(event) {
Детали кода вы можете посмотреть в примере ниже, который демонстрирует этот подход:
[example height=450 src="mouseenter-mouseleave-delegation-2"]
[codetabs height=450 src="mouseenter-mouseleave-delegation-2"]
Попробуйте по-разному, быстро или медленно заходить и выходить в ячейки таблицы. Обработчики `mouseover/mouseout` стоят на `table`, но при помощи делегирования корректно обрабатывают вход-выход.