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

22
2-ui/2-events-and-interfaces/4-event-bubbling/article.md
View file

@ -70,14 +70,14 @@
</ul>
[online]
[example height=220 src="bubble-target"]
[codetabs height=220 src="bubble-target"]
[/online]
Возможна и ситуация, когда `event.target` и `this` -- один и тот же элемент, например если в форме нет других тегов и клик был на самом элементе `<form>`.
## Прекращение всплытия
Всплытие идет прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента `<html>`, а затем до `document` и даже до `window`, вызывая все обработчики на своем пути.
Всплытие идёт прямо наверх. Обычно событие будет всплывать наверх и наверх, до элемента `<html>`, а затем до `document`, а иногда даже до `window`, вызывая все обработчики на своем пути.
**Но любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие.**
@ -86,7 +86,7 @@
Например, здесь при клике на кнопку обработчик `body.onclick` не сработает:
```html
<!--+ run autorun -->
<!--+ run autorun height=60 -->
<body onclick="alert('сюда обработка не дойдёт')">
<button onclick="event.stopPropagation()">Кликни меня</button>
</body>
@ -121,13 +121,7 @@
Оно гораздо менее востребовано, но иногда, очень редко, знание о нём может быть полезным.
[cut]
## Три стадии прохода события
Кроме всплытия, есть ещё стадии прохода события.
В соответствии со стандартом, их три:
Строго говоря, стандарт выделяет целых три стадии прохода события:
<ol>
<li>Событие сначала идет сверху вниз. Эта стадия называется *"стадия перехвата"* (capturing stage).</li>
@ -143,9 +137,9 @@
**Ранее мы говорили только о всплытии, потому что другие стадии, как правило, не используются и проходят незаметно для нас.**
Обработчики, добавленные через `on...`, ничего не знают о стадии перехвата, а начинают работать со всплытия.
Обработчики, добавленные через `on...`-свойство, ничего не знают о стадии перехвата, а начинают работать со всплытия.
**Чтобы поймать событие на стадии перехвата, нужно использовать третий аргумент `addEventListener`:**
Чтобы поймать событие на стадии перехвата, нужно использовать третий аргумент `addEventListener`:
<ul>
<li>Если аргумент `true`, то событие будет перехвачено по дороге вниз.</li>
@ -160,7 +154,7 @@
Чтобы увидеть перехват в действии, кликните на элементе `P`:
[example height=220 src="capture"]
[codetabs height=220 src="capture"]
Обработчики сработают в порядке "сверху-вниз": `FORM` -> `DIV` -> `P`.
@ -188,7 +182,7 @@ for(var i=0; i<elems.length; i++) {
Кликните по внутреннему элементу `P`, чтобы увидеть порядок прохода события:
[example height=220 src="both"]
[codetabs height=220 src="both"]
Должно быть `FORM` -> `DIV` -> `P` -> `P` -> `DIV` -> `FORM`. Заметим, что элемент `P` участвует в обоих стадиях.

5
2-ui/2-events-and-interfaces/4-event-bubbling/both.view/example.css
View file

@ -26,3 +26,8 @@ p {
line-height: 50px;
margin: 0;
}
body {
line-height: 25px;
font-size: 16px;
}

5
2-ui/2-events-and-interfaces/4-event-bubbling/both.view/index.html
View file

@ -1,7 +1,10 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
</head>
<body>
<link type="text/css" rel="stylesheet" href="example.css">
<form>FORM
<div>DIV

1
2-ui/2-events-and-interfaces/4-event-bubbling/both.view/script.js
View file

@ -1,4 +1,5 @@
var elems = document.querySelectorAll('form,div,p');
for(var i=0; i<elems.length; i++) {

5
2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/example.css
View file

@ -26,3 +26,8 @@ p {
line-height: 50px;
margin: 0;
}
body {
line-height: 25px;
font-size: 16px;
}

8
2-ui/2-events-and-interfaces/4-event-bubbling/bubble-target.view/index.html
View file

@ -1,9 +1,11 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
</head>
<body>
<link type="text/css" rel="stylesheet" href="example.css">
Клик выведет <code>target</code> и <code>this</code>:
Клик выведет <code>event.target</code> и <code>this</code>:
<form id="form">FORM
<div>DIV