Введение в события

1. Введение в события

{
Выполнил: Карташёв Роман ПМ-41

2.

СОБЫТИЯ
DOM-события
События окна
Другие

3.

Обычно
Обычно обработчики
обработчики называют
называют
"on+имя
"on+имя события"
события"
например: onclick
JavaScript
JavaScript -- однопоточный
однопоточный язык
язык
• при установке обработчиков двух событий, которые возникают
на элементе одновременно, их обработчики будут выполнены
последовательно

4.

Через
Через атрибут
атрибут HTML-тега
HTML-тега
• <input id=“b1” value=“Нажми Меня”
onclick=“alert(‘Спасибо’);” type=“button”/>
Нагляден
Прост
Используется
Используется
в решении
в решении
простых
задач
простых задач
Обработчик больше
одной строки
Низкая
Низкая
читабельность
читабельность

5.

Через свойство объекта
document.getElementById(‘myElement’).onclick = function() {
alert(‘Спасибо’)
}
<input id=“myElement” type = “button” value = “Нажми меня”/>
Достоинство
Достоинство
• Популярный и простой способ
• Популярный и простой способ
Недостаток
Недостаток
• На элемент можно повесить только один обработчик нужного события
• На элемент можно повесить только один обработчик нужного события

6.

Решение Microsoft
Установка обработчика:
element.attachEvent( "on"+имя события, обработчик)
Удаление обработчика:
element.detachEvent( "on"+имя события, обработчик)

7.

Установка по стандарту W3C
Установка обработчика:
element.addEventListener( имя_события, обработчик, фаза)
Удаление обработчика:
element.removeEventListener( имя_события, обработчик, фаза)

8.

function doSomethin
g(event) {
// event - будет
содержать объект
события
}
element.onclick =
doSomething;
Internet Explorer
W3C
Объект "Событие"
// обработчик без
аргументов
function doSomething()
{ // window.event объект события }
element.onclick =
doSomething;

9.

Три элемента "вложенных" друг в друга
<div class="d1" >1<!-- самый верхний, в
представлении DOM, элемент -->
2
<div class="d2">2
3
<div class="d3">3</div><!-- самый
глубокий элемент -->
4
</div>
5
</div>

10.

Всплывающие
Всплывающие события
события (Bubbling)
(Bubbling)
<div class="d1" onclick="alert(1)">
<div class="d2" onclick="alert(2)">
<div class="d3" onclick="alert(3)"></div>
</div>
</div>

11.

Остановка
Остановка всплытия
всплытия
element.onclick = function(event) {
event = event || window.event // кросс-браузерно
if (event.stopPropagation) {
// Вариант стандарта W3C:
event.stopPropagation()
} else {
// Вариант Internet Explorer:
event.cancelBubble = true
}
}

12.

Перехват
Перехват событий
событий (Capturing)
(Capturing)
<div id="capt1" class="d1">
<div id="capt2" class="d2">
<div id="capt3" class="d3"></div>
</div>
</div>
<script>
document.getElementById("capt1").addEvent
Listener("click", function() { alert(1) }, true);
document.getElementById("capt2").addEvent
Listener("click", function() { alert(2) }, true);
document.getElementById("capt3").addEvent
Listener("click", function() { alert(3) }, true);
</script>

13.

Порядок обработки в стандарте W3C
Порядок обработки в стандарте W3C

14.

Действие
Действие браузера
браузера по
по умолчанию
умолчанию
element.onclick = function(event) {
event = event || window.event
if (event.preventDefault) {
// Вариант стандарта W3C:
event.preventDefault()
} else {
// Вариант Internet Explorer:
event.returnValue = false
}
}

15.

Смысл return и false из обработчика
Смысл return и false из обработчика
1 function handler(event) {
...
return false
}
2 function handler(event) {
...
if (event.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
}