Web-технологи Лекция6

function removeChildren(node) {
var children = node.childNodes
for(var i=0;i<children.length; i++) {
var child = children[i]
node.removeChild(child)
}
}
function removeChildren(node) {
var children = node.childNodes
while(children.length) {
node.removeChild(children[0])
}
}
• Событие - это сигнал от браузера о том, что что-то
произошло.
• DOM-события (onclick, onmouseover…)
• События окна. (onresize, onscroll,…)
• Прочие события (onload, readystatechange…)
• Один поток
• Через атрибут HTML-тега
<input id=“but” value=“Отправить"
onclick="alert(this.value);" type="button“ >
• Просто для простых задач
• Смесь javascript-кода и HTML-разметки
• Сложные обработчики писать сложно или
невозможно
• Через свойство объекта
document.getElementById(‘Elem').onclick =
function() {
alert(‘текст обработчика’)
}
• Присваиваем только функцию, а не результат
• Удобный и надежный способ, работает из
javascript
• Только один обработчик на событие
onload = function() { ... }
• Специальные методы и решение Microsoft
• element.attachEvent( "on"+имя события,
обработчик)
• element.detachEvent( "on"+имя события,
обработчик)
• Функция при удалении должна совпадать
• Несколько обработчиков
• Установка по стандарту W3C
• element.addEventListener( имя_события,
обработчик, фаза)
• element.removeEventListener( имя_события,
обработчик, фаза)
• Фаза: true – перехват, false - всплывание
function doSomething(event) {
event = event || window.event
}
element.onclick = doSomething
• event.type – тип события
• event.target(в IE event.srcElement) – элемент
• Координаты мыши, нажатая клавиша…
• Всплывающие события (3-2-1)
<div class="d1" onclick="alert(1)">
<div class="d2" onclick="alert(2)">
<div class="d3" onclick="alert(3)"></div>
</div>
</div>
• Остановка всплытия
element.onclick = function(event) {
event = event || window.event;
event.stopPropagation ? event.stopPropagation() :
(event.cancelBubble=true);
}
event.stopPropagation ? event.stopPropagation() :
(event.cancelBubble=true)
• Перехват (1-2-3)
<div class="d1" onclick="alert(1)">
<div class="d2" onclick="alert(2)">
<div class="d3" onclick="alert(3)"></div>
</div>
</div>
!IE
• Порядок обработки в стандарте W3C
• Действие браузера по умолчанию
element.onclick = function(event) {
event = event || window.event
event.preventDefault ? event.preventDefault() :
(event.returnValue=false)
}
Некоторые поведения по умолчанию происходят
до вызова обработчика события (focus / пунктир)
• Даже если всплытие и действия по умолчанию
остановлены, но другие обработчики на текущем
элементе все равно сработают.
return false;
• Тип события
function getEventType(e) {
if (!e) e = window.event;
alert(e.type);
}
• Определение элемента
<div class="d1"
onclick="t=event.target||event.srcElement;
alert(t.className)« >
• mouseover и mouseout
function mouseoverHandler(event) {
if (!e) e = window.event
var relatedTarget = e.relatedTarget || e.fromElement
// элемент, с которого пришел курсор мыши
}
function mouseoutHandler(event) {
event = event || window.event
var relTarg = event.relatedTarget || event.toElement
// элемент, на который перешел курсор мыши
}
if (!e.relatedTarget && e.fromElement) {
e.relatedTarget = (e.fromElement==e.target) ? e.toElement
: e.fromElement
}
• Текущий элемент (this)
<div class="d1" onclick="highlightMe(this)">1
<div class="d2" onclick="highlightMe(this)">2
</div>
</div>
• event.which и event.button
•
•
•
•
Стандарт W3C / Firefox
0 - левая кнопка
1 - средняя кнопка
2 - правая кнопка
• IE / битовое соответствие
if (!e.which && e.button) {
if (e.button & 1) e.which = 1
else if (e.button & 4) e.which = 2
else if (e.button & 2) e.which = 3
}
• Мышь: clientX(Y)/pageX(Y) [Окно / документ]
• IE + scrollLeft / scrollTop
• Html / body
var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html && html.scrollLeft || body &&
body.scrollLeft || 0)
• document.documentElement.clientLeft/clientTop
• (сдвиг)
if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html && html.scrollLeft ||
body && body.scrollLeft || 0) - (html.clientLeft || 0)
e.pageY = e.clientY + (html && html.scrollTop || body
&& body.scrollTop || 0) - (html.clientTop || 0)
}
• DOMContentLoaded и onload - JQuery
• IE : tryScroll, onreadystatechange
• Несколько обработчиков посредством
динамической загрузки.
• В IE при наличии <script defer> код будет работать
некорректно, а именно - выполняться до загрузки
таких скриптов
• Альтернатива:
<body>
...
<script>handler()</script>
</body>
• IE – AttachEvent
Значение this указывает на window, а свойство
event.currentTarget отсутствует.
• addEventListener сохраняет порядок назначения
обработчиков, а attachEvent в IE - нет.
• HTML 5 – online, offline