Веб-разработка. DOM

Содержание

Слайд 2

DOM

DOM

Слайд 3

DOM DOM – Document Object Model API для работы со страницей

DOM

DOM – Document Object Model
API для работы со страницей из JavaScript.


Читать информацию
Создавать новые элементы
Манипулировать существующими
Изменять свойства
Перемещать
Слайд 4

DOM DOM – Document Object Model Все элементы страницы (тэги, текст,

DOM

DOM – Document Object Model
Все элементы страницы (тэги, текст, комментарии) являются

элементами DOM.
Часто его называют DOM-дерево.
Слайд 5

Навигация

Навигация

Слайд 6

Навигация Каждый DOM-элемент имеет следующие навигационные свойства: parentNode – родитель previousSubling

Навигация

Каждый DOM-элемент имеет следующие навигационные свойства:
parentNode – родитель
previousSubling – предыдущий сосед
nextSibling

– следующий сосед
firstChild, lastChild – первый и последний дочерний элементы
childNodes – коллекция дочерних элементов
Слайд 7

Навигация Важные особенности: Коллекция здесь – не настоящий массив. Если какой-то

Навигация

Важные особенности:
Коллекция здесь – не настоящий массив.
Если какой-то элемент не определен,

значение навигационного свойства будет null.
Слайд 8

Навигация Привет Текст... Еще абзац

Навигация



Привет


Текст...


Еще абзац




Слайд 9

Навигация Привет Текст... Еще абзац var body = document.body;

Навигация



Привет


Текст...


Еще абзац




var body = document.body;

Слайд 10

Навигация Привет Текст... Еще абзац var body = document.body; body.firstChild

Навигация



Привет


Текст...


Еще абзац




var body = document.body;
body.firstChild

Слайд 11

Навигация [ ] Привет Текст... Еще абзац var body = document.body; body.firstChild

Навигация


[
]

Привет


Текст...


Еще абзац




var body = document.body;
body.firstChild

Слайд 12

Навигация [ ] Привет Текст... Еще абзац [ ] var body = document.body; body.firstChild body.lastChild

Навигация


[
]

Привет


Текст...


Еще абзац

[
]

var body = document.body;
body.firstChild
body.lastChild

Слайд 13

Навигация [ ] Привет Текст... Еще абзац var body = document.body; var first = body.firstChild; first.nextSibling;

Навигация


[
]

Привет


Текст...


Еще абзац




var body = document.body;
var first = body.firstChild;
first.nextSibling;

Слайд 14

Навигация [ ] Привет Текст... Еще абзац var body = document.body; var first = body.firstChild; first.nextSibling.nextSibling;

Навигация


[
]

Привет


Текст...


Еще абзац




var body = document.body;
var first = body.firstChild;
first.nextSibling.nextSibling;

Слайд 15

Навигация [ ] Привет Текст... Еще абзац var body = document.body; var first = body.firstChild; first.nextSibling.firstChild

Навигация


[
]

Привет


Текст...


Еще абзац




var body = document.body;
var first = body.firstChild;
first.nextSibling.firstChild

Слайд 16

Навигация [ ] Привет Текст... Еще абзац var body = document.body;

Навигация


[
]

Привет


Текст...


Еще абзац




var body = document.body;
var first = body.firstChild;
first.nextSibling.firstChild;
first.nextSibling.firstChild.parentNode

Слайд 17

Навигация Существуют дополнительные навигационные свойства, не учитывающие текстовые ноды. parentElementNode firstElementChild, lastElementChild previousElementSibling, lastElementSibling children

Навигация

Существуют дополнительные навигационные свойства,
не учитывающие текстовые ноды.
parentElementNode
firstElementChild, lastElementChild
previousElementSibling, lastElementSibling
children

Слайд 18

Навигация Как работать с коллекциями (childNodes, children)? Два способа обращения к

Навигация

Как работать с коллекциями (childNodes, children)?
Два способа обращения к элементу:
elt.childNodes[i];
elt.childNodes.item(i);
Перебор –

по индексу от 0 до elt.childNodes.length
Слайд 19

Поиск элементов

Поиск элементов

Слайд 20

Поиск элементов Несколько основных способов найти элемент(ы) getElementById() getElementsBy*() querySelector()/querySelectorAll()

Поиск элементов

Несколько основных способов найти элемент(ы)
getElementById()
getElementsBy*()
querySelector()/querySelectorAll()

Слайд 21

Поиск элементов document.getElementById(‘elt-id’); Вызов – с объекта document Возвращает один элемент с указанным id или null

Поиск элементов

document.getElementById(‘elt-id’);
Вызов – с объекта document
Возвращает один элемент с указанным id

или null
Слайд 22

Поиск элементов anyElement.getElementsBy*(‘query’); Вызов – с любого элемента. Это ограничивает область

Поиск элементов

anyElement.getElementsBy*(‘query’);
Вызов – с любого элемента. Это ограничивает область поиска
Варианты:
ByName
ByClassName
ByTagName
Возвращает

«живую коллекцию» (возможно, пустую)
Слайд 23

Поиск элементов anyElement.querySelector(‘#css .selector’); Вызов – с любого элемента. Это ограничивает

Поиск элементов

anyElement.querySelector(‘#css .selector’);
Вызов – с любого элемента. Это ограничивает область поиска


Возвращает один первый элемент, подходящий под указанный селектор или null, если не найден
Бросает исключение, если селектор некорректный
Слайд 24

Поиск элементов anyElement.querySelectorAll(‘#css .selector’); Вызов – с любого элемента. Это ограничивает

Поиск элементов

anyElement.querySelectorAll(‘#css .selector’);
Вызов – с любого элемента. Это ограничивает область поиска


Возвращает коллекцию элементов (возможно, пустую), подходящих под указанный селектор
Бросает исключение, если селектор некорректный
Слайд 25

Поиск элементов Разница между getElementsBy* и querySelectorAll Оба метода возвращают коллекцию,

Поиск элементов

Разница между getElementsBy* и querySelectorAll
Оба метода возвращают коллекцию, но их

действие не равнозначно.
getElementsBy* возвращают «живую» коллекцию
Слайд 26

Поиск элементов Первый Второй liveCol = document.getElementsByTagName(‘p’); col = document.querySelectorAll(‘p’);

Поиск элементов


Первый


Второй



liveCol = document.getElementsByTagName(‘p’);
col = document.querySelectorAll(‘p’);

Слайд 27

Поиск элементов liveCol = document.getElementsByTagName(‘p’); col = document.querySelectorAll(‘p’); liveCol.length; // 2 col.length; // 2

Поиск элементов

liveCol = document.getElementsByTagName(‘p’);
col = document.querySelectorAll(‘p’);
liveCol.length; // 2
col.length; // 2

Слайд 28

Поиск элементов liveCol = document.getElementsByTagName(‘p’); col = document.querySelectorAll(‘p’); document.body.innerHTML = ‘’;

Поиск элементов

liveCol = document.getElementsByTagName(‘p’);
col = document.querySelectorAll(‘p’);
document.body.innerHTML = ‘’; // удалит все

из body
liveCol.length; // ??
col.length; // ??
Слайд 29

Поиск элементов liveCol = document.getElementsByTagName(‘p’); col = document.querySelectorAll(‘p’); document.body.innerHTML = ‘’;

Поиск элементов

liveCol = document.getElementsByTagName(‘p’);
col = document.querySelectorAll(‘p’);
document.body.innerHTML = ‘’; // удалит все

из body
liveCol.length; // 0
col.length; // 2
Слайд 30

Атрибуты

Атрибуты

Слайд 31

Атрибуты Для работы с атрибутами у каждого элемента есть следующие методы: getAttribute(‘name’); setAttribute(‘name’, ‘value’); hasAttribute(‘name’); removeAttribute(‘name’);

Атрибуты

Для работы с атрибутами у каждого элемента есть следующие методы:
getAttribute(‘name’);
setAttribute(‘name’, ‘value’);
hasAttribute(‘name’);
removeAttribute(‘name’);

Слайд 32

Атрибуты Особенности: Значения атрибутов – строки. Все что не строки –

Атрибуты

Особенности:
Значения атрибутов – строки. Все что не строки – конвертируется в

строку
Имена атрибутов - регистронезависимы
Изменение атрибутов приводит к изменению DOM и HTML
Слайд 33

Атрибуты Атрибуты и свойства Элементы это объекты. Как и у любого

Атрибуты

Атрибуты и свойства
Элементы это объекты.
Как и у любого объекта, у

элементов есть свойства
Некоторые свойства синхронизируются с атрибутами
Некоторые – в обе стороны, некоторые – только в одну
Слайд 34

Атрибуты var elt = document.getElementById(‘some’); elt.id; // ‘some’ elt.getAttribute(‘id’); // ‘some’

Атрибуты


var elt = document.getElementById(‘some’);
elt.id; // ‘some’
elt.getAttribute(‘id’); // ‘some’

Слайд 35

Атрибуты var elt = document.getElementById(‘some’); elt.id = “foo”; elt.getAttribute(‘id’); // ‘foo’ elt.outerHTML; // ‘ ’

Атрибуты


var elt = document.getElementById(‘some’);
elt.id = “foo”;
elt.getAttribute(‘id’); // ‘foo’
elt.outerHTML; // ‘

id=“foo”>
’
Слайд 36

Атрибуты Не все атрибуты и свойства синхронизируются var elt = document.getElementsByTagName(‘input’)[0];

Атрибуты

Не все атрибуты и свойства синхронизируются

var elt =

document.getElementsByTagName(‘input’)[0];
elt.value; // ‘foo’
elt.getAttribute(‘value’); // ‘foo’
Слайд 37

Атрибуты Не все атрибуты и свойства синхронизируются var elt = document.getElementsByTagName(‘input’)[0];

Атрибуты

Не все атрибуты и свойства синхронизируются

var elt =

document.getElementsByTagName(‘input’)[0];
elt.value = ‘bar’;
elt.getAttribute(‘value’); // ‘foo’
elt.innerHTML; // ‘’
Но на экране в поле ввода будет “bar”...
Слайд 38

Модификация дерева

Модификация дерева

Слайд 39

Модификация дерева Можно создавать ноды дерева var div = document.createElement(‘div’); var text = document.createTextNode(‘Это текстовая нода’);

Модификация дерева

Можно создавать ноды дерева
var div = document.createElement(‘div’);
var text = document.createTextNode(‘Это

текстовая нода’);
Слайд 40

Модификация дерева Можно добавлять ноды в другие ноды div.appendChild(text); document.body.appendChild(div);

Модификация дерева

Можно добавлять ноды в другие ноды
div.appendChild(text);
document.body.appendChild(div);

Слайд 41

Модификация дерева Можно читать что получилось в виде строки: document.body.innerHTML; Это текстовая нода

Модификация дерева

Можно читать что получилось в виде строки:
document.body.innerHTML;

Это текстовая нода

Слайд 42

Модификация дерева Можно читать что получилось в виде строки: document.body.outerHTML; Это текстовая нода

Модификация дерева

Можно читать что получилось в виде строки:
document.body.outerHTML;

Это текстовая нода

Слайд 43

Модификация дерева Создавать содержимое документа можно с помощью innerHTML. document.body.innerHTML =

Модификация дерева

Создавать содержимое документа можно с помощью innerHTML.
document.body.innerHTML = “

Параграф текста

”;
«Перезапись»

innerHTML приводит к удалению всего содержимого, которое ранее было внутри.
Слайд 44

Модификация дерева Можно управлять местом вставки parent.insertBefore(elem, nextSibling); parent.replaceChild(newElem, elem);

Модификация дерева

Можно управлять местом вставки
parent.insertBefore(elem, nextSibling);
parent.replaceChild(newElem, elem);

Слайд 45

Модификация дерева insertBefore

Модификация дерева

insertBefore



Слайд 46

Модификация дерева insertBefore var ref = document.getElementById(‘ref’); var newDiv = document.createElement(‘div’); document.body.insertBefore(newDiv, ref);

Модификация дерева

insertBefore



var ref = document.getElementById(‘ref’);
var newDiv = document.createElement(‘div’);
document.body.insertBefore(newDiv, ref);

Слайд 47

Модификация дерева insertBefore var ref = document.getElementById(‘ref’); var newDiv = document.createElement(‘div’); document.body.insertBefore(newDiv, ref);

Модификация дерева

insertBefore
var ref = document.getElementById(‘ref’);
var newDiv = document.createElement(‘div’);
document.body.insertBefore(newDiv, ref);




Слайд 48

Модификация дерева Если указать последний параметр null – вставка будет эквивалентна appendChild. insertBefore(newChild, null) == appendChild(newChild)

Модификация дерева

Если указать последний параметр null – вставка будет эквивалентна appendChild.


insertBefore(newChild, null) == appendChild(newChild)
Слайд 49

Модификация дерева replaceChild var ref = document.getElementById(‘ref’); var newDiv = document.createElement(‘div’); document.body.replaceChild(newDiv, ref);

Модификация дерева

replaceChild



var ref = document.getElementById(‘ref’);
var newDiv = document.createElement(‘div’);
document.body.replaceChild(newDiv, ref);

Слайд 50

Модификация дерева replaceChild var ref = document.getElementById(‘ref’); var newP = document.createElement(‘p’); document.body.replaceChild(newDiv, ref);

Модификация дерева

replaceChild
var ref = document.getElementById(‘ref’);
var newP = document.createElement(‘p’);
document.body.replaceChild(newDiv, ref);



Слайд 51

Модификация дерева Элементы можно удалять методом removeChild var ref = document.getElementById(‘ref’); document.body.removeChild(ref);

Модификация дерева

Элементы можно удалять методом removeChild



var ref = document.getElementById(‘ref’);
document.body.removeChild(ref);

Слайд 52

Модификация дерева Элементы можно удалять методом removeChild var ref = document.getElementById(‘ref’); document.body.removeChild(ref);

Модификация дерева

Элементы можно удалять методом removeChild
var ref = document.getElementById(‘ref’);
document.body.removeChild(ref);


Слайд 53

Модификация дерева Элементы можно клонировать методом cloneNode Абзац var p =

Модификация дерева

Элементы можно клонировать методом cloneNode

Абзац



var p = document.body.firstElementChild;
var pClone =

p.cloneNode();
document.body.appendChild(pClone);
Слайд 54

Модификация дерева Элементы можно клонировать методом cloneNode var p = document.body.firstElementChild;

Модификация дерева

Элементы можно клонировать методом cloneNode
var p = document.body.firstElementChild;
var pClone =

p.cloneNode();
document.body.appendChild(pClone);

Абзац


???

Слайд 55

Модификация дерева Элементы можно клонировать методом cloneNode var p = document.body.firstElementChild;

Модификация дерева

Элементы можно клонировать методом cloneNode
var p = document.body.firstElementChild;
var pClone =

p.cloneNode();
document.body.appendChild(pClone);

Абзац




Слайд 56

Модификация дерева Элементы можно клонировать методом cloneNode var p = document.body.firstElementChild;

Модификация дерева

Элементы можно клонировать методом cloneNode
var p = document.body.firstElementChild;
var pClone =

p.cloneNode(true);
document.body.appendChild(pClone);

Абзац


Абзац



Слайд 57

События

События

Слайд 58

События DOM Events. События. Какие они бывают?

События

DOM Events. События. Какие они бывают?

Слайд 59

События DOM Events. События. Какие они бывают? Click Mousedown, Mousemove Focus Keydown, Keyup Sumbit

События

DOM Events. События. Какие они бывают?
Click
Mousedown, Mousemove
Focus
Keydown, Keyup
Sumbit

Слайд 60

События Как добавить обработчик события. ... p.onclick=function() { alert(‘Нажали на текст’); };

События

Как добавить обработчик события.

...


p.onclick=function() {
alert(‘Нажали на текст’);
};

Слайд 61

События Как добавить обработчик события. function handleClick() { ... }; ... p.onclick=handleClick;

События

Как добавить обработчик события.
function handleClick() { ... };

...


p.onclick=handleClick;

Слайд 62

События ... p.onclick=handleClick; p.setAttribute(‘onclick’, handleClick);

События

...


p.onclick=handleClick;
p.setAttribute(‘onclick’, handleClick);

Слайд 63

События ... p.onclick=handleClick; p.setAttribute(‘onclick’, handleClick);

События

...


p.onclick=handleClick;
p.setAttribute(‘onclick’, handleClick);

Слайд 64

События p.onclick = f1; p.onclick = f2;

События

p.onclick = f1;
p.onclick = f2;

Слайд 65

События p.onclick = f1; p.onclick = f2; Проблема. Второй обработчик «затрет» первый!

События

p.onclick = f1;
p.onclick = f2;
Проблема. Второй обработчик «затрет» первый!

Слайд 66

События addEventListener! p.addEventListener(‘click’, f1); p.addEventListener(‘click’, f2);

События

addEventListener!
p.addEventListener(‘click’, f1);
p.addEventListener(‘click’, f2);

Слайд 67

События Обратите внимание! p.onclick = ... p.addEventListener(‘click’, ...); При навешивании через атрибут нужно добавить on!

События

Обратите внимание!
p.onclick = ...
p.addEventListener(‘click’, ...);
При навешивании через атрибут нужно добавить on!

Слайд 68

События elt.addEventListener vs elt.on* Позволяет добавить несколько обработчиков Есть события, которые

События

elt.addEventListener vs elt.on*
Позволяет добавить несколько обработчиков
Есть события, которые нельзя добавить через

свойство/разметку. Можно только через addEventListener
Слайд 69

События Как удалить обработчик? elt.onclick = null; elt.removeEventListener(‘click’, f);

События

Как удалить обработчик?
elt.onclick = null;
elt.removeEventListener(‘click’, f);

Слайд 70

События elt.addEventListener(‘click’, function() { doSmth(); }); elt.removeEventListener(‘click’, function() { doSmth();});

События
elt.addEventListener(‘click’, function() { doSmth(); });
elt.removeEventListener(‘click’, function() { doSmth();});

Слайд 71

События elt.addEventListener(‘click’, function() { doSmth(); }); elt.removeEventListener(‘click’, function() { doSmth();});

События
elt.addEventListener(‘click’, function() { doSmth(); });
elt.removeEventListener(‘click’, function() { doSmth();});

Слайд 72

События Важно! Требуется указывать всегда одну и ту же функцию! function

События

Важно! Требуется указывать всегда одну и ту же функцию!
function handler() {

doSmth();
}
elt.addEventListener(‘click’, handler);
elt.removeEventListener(‘click’, handler);
Слайд 73

Объект события

Объект события

Слайд 74

Объект события p.onclick = function(event) { // event??? }

Объект события

p.onclick = function(event) {
// event???
}

Слайд 75

Объект события Объект-дескриптор события. Содержит свойства и методы, позволяющие получить дополнительную

Объект события

Объект-дескриптор события. Содержит свойства и методы, позволяющие получить дополнительную информацию

о событии, управлять им и т.п.
Слайд 76

Объект события event.type – тип события (click, mousedown, keyup, etc.) event.target

Объект события

event.type – тип события (click, mousedown, keyup, etc.)
event.target – объект,

на котором случилось событие
Есть разные специфические свойства
event.clientX, event.clientY – координаты курсора в момент клика
Слайд 77

Объект события Как получить доступ к событию, если обработчик навешивается через атрибут?

Объект события

Как получить доступ к событию, если обработчик навешивается через атрибут?


Слайд 78

Объект события Как получить доступ к событию, если обработчик навешивается через атрибут? ...

Объект события

Как получить доступ к событию, если обработчик навешивается через атрибут?

onclick=“alert(event.clientX)”>...

Слайд 79

Объект события Как получить доступ к событию, если обработчик навешивается через

Объект события

Как получить доступ к событию, если обработчик навешивается через атрибут?

onclick=“alert(event.clientX)”>...

Это эквивалентно ...
div.onclick = function(event) {
alert(event.clientX);
}
Слайд 80

Всплытие события

Всплытие события

Слайд 81

Всплытие Первый параграф

Всплытие


Первый
параграф



Слайд 82

Всплытие Первый параграф

Всплытие


Первый
параграф



Слайд 83

Всплытие Первый параграф

Всплытие


Первый
параграф



Слайд 84

Всплытие Первый параграф

Всплытие


Первый
параграф



Слайд 85

Всплытие event.target – элемент, на котором изначально случилось событие event.currentTarget –

Всплытие

event.target – элемент, на котором изначально случилось событие
event.currentTarget – элемент, на

котором событие было поймано
Слайд 86

Всплытие Всплытие можно заблокировать ....

Всплытие

Всплытие можно заблокировать



....



Слайд 87

Всплытие Всплытие можно заблокировать .... В этом примере мы не увидим alert();

Всплытие

Всплытие можно заблокировать



....



В этом примере мы не увидим alert();

Слайд 88

Всплытие Что если обработчиков несколько? .... var p = document.getElementsByTagName(‘p’)[0]; p.addEventListener(‘click’, stopsPropagation); p.addEventListener(‘click’, showsAlert);

Всплытие

Что если обработчиков несколько?


....



var p = document.getElementsByTagName(‘p’)[0];
p.addEventListener(‘click’, stopsPropagation);
p.addEventListener(‘click’, showsAlert);

Слайд 89

Всплытие function stopsPropagation(event) { event.stopPropagation(); } function showAlert(event) { alert(event.target.tagName); // SPAN }

Всплытие

function stopsPropagation(event) {
event.stopPropagation();
}
function showAlert(event) {
alert(event.target.tagName); // SPAN
}

Слайд 90

Всплытие ....

Всплытие


....



Слайд 91

Всплытие ....

Всплытие


....



Слайд 92

Всплытие ....

Всплытие


....



Слайд 93

Всплытие function stopsPropagation(event) { event.stopImmediatePropagation(); } function showAlert(event) { alert(event.target.tagName); // SPAN }

Всплытие

function stopsPropagation(event) {
event.stopImmediatePropagation();
}
function showAlert(event) {
alert(event.target.tagName); // SPAN
}

Слайд 94

Всплытие ....

Всплытие


....



Слайд 95

Всплытие ....

Всплытие


....



Слайд 96

Всплытие Не все события всплывают! Пример такого события – focus.

Всплытие

Не все события всплывают!
Пример такого события – focus.

Слайд 97

Всплытие На самом деле есть не только всплытие, но и погружение событий!

Всплытие

На самом деле есть не только всплытие, но и погружение событий!

Слайд 98

Всплытие Фазой, на которой будет обрабатываться событие, управляет третий, необязательный аргумент

Всплытие

Фазой, на которой будет обрабатываться событие, управляет третий, необязательный аргумент addEventListener
elt.addEventListener(‘click’,

handler, true);
Для того, чтобы поймать событие на стадии «погружения», нужно передать его == true
Слайд 99

Всплытие Кстати, событие focus... Оно не всплывает, но погружается.

Всплытие

Кстати, событие focus...
Оно не всплывает, но погружается.

Слайд 100

Всплытие Кстати, событие focus... Оно не всплывает, но погружается.

Всплытие

Кстати, событие focus...
Оно не всплывает, но погружается.

Слайд 101

Делегирование

Делегирование

Слайд 102

Делегирование Задача: хотим при нажатии на каждый абзац в документе считать сколько в нем слов.

Делегирование

Задача: хотим при нажатии на каждый абзац в документе считать сколько

в нем слов.
Слайд 103

Делегирование Решение 1 (плохое) var pCol = document.getElementsByTagName(‘p’); for(var i =

Делегирование

Решение 1 (плохое)
var pCol = document.getElementsByTagName(‘p’);
for(var i = 0, l =

pCol.length; i < l; i++) {
pCol.addEventListener(‘click’, countWords);
}
Слайд 104

Делегирование Чем плохо это решение?

Делегирование

Чем плохо это решение?

Слайд 105

Делегирование Чем плохо это решение? Если элементов будет много их перебор

Делегирование

Чем плохо это решение?
Если элементов будет много их перебор может занять

время
Навешивается обработчиков по количеству параграфов
Если в документ добавятся новые параграфы для них код работать не будет, ведь они появились позже!
Слайд 106

Делегирование Решение 2 (почти правильное). Делегирование! document.body.addEventListener(‘click’, function(event) { if (event.target.nodeName

Делегирование

Решение 2 (почти правильное). Делегирование!
document.body.addEventListener(‘click’, function(event) {
if (event.target.nodeName == ‘P’)

{
countWords(event.target);
}
});
Слайд 107

Делегирование Решение 2 (почти правильное). Делегирование! Если элементов будет много их

Делегирование

Решение 2 (почти правильное). Делегирование!
Если элементов будет много их перебор может

занять время
Навешивается обработчиков по количеству параграфов
Если в документ добавятся новые параграфы для них код работать не будет, ведь они появились позже!
Слайд 108

Делегирование Решение 2 (почти правильное). Делегирование! Если элементов будет много их

Делегирование

Решение 2 (почти правильное). Делегирование!
Если элементов будет много их перебор может

занять время
Навешивается обработчиков по количеству параграфов
Если в документ добавятся новые параграфы для них код работать не будет, ведь они появились позже!
Слайд 109

Делегирование Решение 2 (почти правильное). Делегирование! Если элементов будет много их

Делегирование

Решение 2 (почти правильное). Делегирование!
Если элементов будет много их перебор может

занять время
Навешивается обработчиков по количеству параграфов
Если в документ добавятся новые параграфы для них код работать не будет, ведь они появились позже!
Слайд 110

Делегирование Решение 2 (почти правильное). Делегирование!

Делегирование

Решение 2 (почти правильное). Делегирование!

Слайд 111

Делегирование Решение 2 (почти правильное). Делегирование! Текст, часть которого выделена жирным

Делегирование

Решение 2 (почти правильное). Делегирование!
Текст, часть которого
выделена жирным


Слайд 112

Делегирование Решение 3 (правильное) function (event) { var target = event.target;

Делегирование

Решение 3 (правильное)
function (event) {
var target = event.target;
while (target)

{
if (target.nodeName == ‘P’) break;
target = target.parentNode
}
if (target) countWords(target);
}
Слайд 113

Действие по умолчанию

Действие по умолчанию

Слайд 114

Действие по умолчанию У многих событий есть действия по умолчанию: Click

Действие по умолчанию

У многих событий есть действия по умолчанию:
Click по ссылке

– переход
Mousedown на поле ввода – фокусировка
Keydown – при нажатии клавиши в поле ввода там появляется символ
Слайд 115

Действие по умолчанию Действие по умолчанию можно отменить elt.addEventListener(‘click’, function(event) { event.preventDefault(); });

Действие по умолчанию

Действие по умолчанию можно отменить
elt.addEventListener(‘click’, function(event) {
event.preventDefault();
});

Слайд 116

Действие по умолчанию Действие по умолчанию можно отменить Если событие навешено

Действие по умолчанию

Действие по умолчанию можно отменить
Если событие навешено через атрибут,

можно короче
elt.onclick = function() {
return false;
};
ВНИМАНИЕ! Это не работает, если обработчик навешен через addEventListener!
Слайд 117

Действие по умолчанию Для чего это может применяться? Для отмены перехода

Действие по умолчанию

Для чего это может применяться?
Для отмены перехода по ссылке

и выполнения вместо этого какого-либо другого действия.
Для отмены ввода в , например, с целью коррекции ввода
Слайд 118

Полезные ссылки

Полезные ссылки

Слайд 119

Учебник http://javascript.ru/ http://learn.javascript.ru/ http://learn.javascript.ru/document http://learn.javascript.ru/events-and-interfaces

Учебник

http://javascript.ru/
http://learn.javascript.ru/
http://learn.javascript.ru/document
http://learn.javascript.ru/events-and-interfaces

Слайд 120

Вопросы есть?

Вопросы есть?

- Предыдущая
Веб-разработка. Библиотека jQuery
Следующая -
Задания регионального экзамена

Похожие презентации

Вайшнава-таттва
Режимы работы современных процессоров
Язык цветов. Авторы: Лекарев Илья и Рычков Влад.
C# decision and iteration constructs
Модель предпрофильной подготовки образовательного учреждения
СТО с участком диагностики двигателя
Изобразительное искусство Древней Греции Скульптура Урок МХК 10 класс
Гетероперехід. Емісійна модель різкого p-n гетеропереходу
Права человека. Исторический обзор
Материалы для подготовки к ЕГЭ
Презентация Основы методики ценообразования
Классификация, кодирование медицинских и фармацевтических товаров
ГОРНЫЕ ПОРОДЫ
1. К участковому стоматологу обратилась бабушка ребенка 2 мес. с незарощением верхней губы. 1. К участковому стоматологу обратил
Физкультминутка. Зарядка
Учитель МБОУ «Средняя общеобразовательная школа №2» г. Мензелинска Республики Татарстан Петрова С.С. Технологический профиль
Подкрановые балки
История гимнастики
Дидактические игры. по математике
История возникновения языка программирования Паскаль (Pascal)
Проект: Торгівельний центр
Кошки-загадки нашего столетия Кошки-загадки нашего столетия
0000466d-39bd6c1b
Сделка как юридический факт дисциплина «Гражданское право» Подготовил Студент группы юб 03/13 03 Медянкин павел
Тиристоры
Условный оператор в языке Python
Презентация на тему "Методы борьбы с парезом кишечника" - скачать презентации по Медицине
Работа выполнена Учителем химии школы 473 Волковой И.А. - презентация