minor
This commit is contained in:
parent
051b6b43c3
commit
470c0c9b13
4 changed files with 24 additions and 14 deletions
|
@ -28,10 +28,10 @@
|
|||
<dd>И еще некоторые реже используемые вкладки, которые станут понятны по мере изучения DOM.</dd>
|
||||
</dl>
|
||||
|
||||
[warn header="DOM не полностью отображается в инструментах!"]
|
||||
[warn header="DOM в Elements не совсем соответствует реальному"]
|
||||
Отображение DOM во вкладке Elements не совсем соответствует реальному. В частности, там не отображаются пробельные узлы. Это сделано для удобства просмотра. На мы-то знаем, что они есть.
|
||||
|
||||
В Elements можно увидеть CSS-псевдоэлементы, такие как `::before`, `::after`. Это также сделано для удобства, в DOM их не существует.
|
||||
С другой стороны, в Elements можно увидеть CSS-псевдоэлементы, такие как `::before`, `::after`. Это также сделано для удобства, в DOM их не существует.
|
||||
[/warn]
|
||||
|
||||
|
||||
|
|
|
@ -230,10 +230,16 @@ for (var key in elems) {
|
|||
<li>`parentElement` -- родитель-элемент.</li>
|
||||
</ul>
|
||||
|
||||
[smart header="Родитель-элемент? А что, бывают родители не-элементы?"]
|
||||
Почти всегда родитель и так элемент, ведь текстовые узлы не могут иметь потомков. Поэтому это свойство равно `parentNode`, кроме одного исключения.
|
||||
[smart header="Зачем `parentElement`? Неужели бывают родители не-элементы?"]
|
||||
Свойство `elem.parentNode` возвращает родитель элемента.
|
||||
|
||||
В корне DOM находится `document`, и он-то как раз не элемент. То есть, если идти по цепочке `parentElement` вверх, то мы, остановимся мы не на `document` как в случае с `parentNode`, а на `document.documentElement`.
|
||||
Оно всегда равно `parentElement`, кроме одного исключения:
|
||||
|
||||
```js
|
||||
//+ run
|
||||
alert( document.documentElement.parentNode ); // document
|
||||
alert( document.documentElement.parentElement ); // null
|
||||
```
|
||||
|
||||
Иногда это имеет значение, если хочется перебрать всех предков и вызвать какой-то метод, а на документе его нет.
|
||||
[/smart]
|
||||
|
|
|
@ -7,5 +7,5 @@
|
|||
**Используйте делегирование событий. Один обработчик для всего.**
|
||||
|
||||
В результате, должно работать вот так(кликните на крестик):
|
||||
[iframe src="solution" height=400]
|
||||
[iframe src="solution" height=420]
|
||||
|
||||
|
|
|
@ -50,13 +50,15 @@ var event = new Event(тип события[, флаги]);
|
|||
|
||||
На сгенерированном событии, как и на встроенном браузерном, обработчик может вызвать метод `event.preventDefault()`. Тогда `dispatchEvent` возвратит `false`.
|
||||
|
||||
Остановимся здесь подробнее. Обычно такой вызов предотвращает действие браузера. В случае, если событие придумано нами -- никакого действия браузера, конечно, нет, но код, который генерирует событие, может быть заинтересован узнать, что его "отменили" и не продолжать свои действия.
|
||||
Остановимся здесь подробнее. Обычно `preventDefault()` вызов предотвращает действие браузера. В случае, если событие придумано нами, имеет нестандартное имя -- никакого действия браузера, конечно, нет.
|
||||
|
||||
Иначе говоря, `event.preventDefault()` является возможностью для обработчика сообщить в сгенерировавший событие код, что некие действия продолжать не надо.
|
||||
Но код, который генерирует событие, может предусматривать какие-то ещё действия после `dispatchEvent`.
|
||||
|
||||
В примере ниже функция `hide()` генерирует событие `hide` на элементе `#rabbit`, уведомляя всех интересующихся, что кролик собирается спрятаться.
|
||||
Вызов `event.preventDefault()` является возможностью для обработчика событие сообщить в сгенерировавший событие код, что эти действия продолжать не надо.
|
||||
|
||||
И, если никакой обработчик не отменит действие по умолчанию, то кролик действительно исчезнет:
|
||||
В примере ниже есть функция `hide()`, которая при вызове генерирует событие `hide` на элементе `#rabbit`, уведомляя всех интересующихся, что кролик собирается спрятаться.
|
||||
|
||||
Любой обработчик может узнать об этом, подписавшись на событие через `rabbit.addEventListener('hide',...)` и, при желании, отменить действие по умолчанию через `event.preventDefault()`. Тогда кролик не исчезнет:
|
||||
|
||||
```html
|
||||
<!--+ run -->
|
||||
|
@ -70,15 +72,13 @@ var event = new Event(тип события[, флаги]);
|
|||
|
||||
|
||||
<script>
|
||||
// прячемся через 2 секунды
|
||||
setTimeout(hide, 2000);
|
||||
|
||||
function hide() {
|
||||
var event = new Event("hide", {
|
||||
cancelable: true
|
||||
});
|
||||
if (!rabbit.dispatchEvent(event)) {
|
||||
alert( 'действие отменено' );
|
||||
alert( 'действие отменено обработчиком' );
|
||||
} else {
|
||||
rabbit.hidden = true;
|
||||
}
|
||||
|
@ -89,6 +89,10 @@ var event = new Event(тип события[, флаги]);
|
|||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
// прячемся через 2 секунды
|
||||
setTimeout(hide, 2000);
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue