JavaScript События
реклама
JavaScript
События
•
•
•
•
Введение
Назначение обработчиков
Специальные методы установки обработчиков
Действие браузера по умолчанию
Введение
Событие — это сигнал от браузера о том, что что-то произошло. Например, когда мы
щёлкаем (кликаем) на ссылке — осуществляется событие, его перехватывает
специальный обработчик и перенаправляет нас на нужную страницу.
Есть множество самых различных событий:
• DOM-события, которые инициируются элементами DOM. Например, событие click
происходит при клике на элементе, а событие mouseover - когда указатель мыши
появляется над элементом;
• События окна. Например событие resize — при изменении размера окна браузера;
• Другие события, например load, readystatechange. Они используются, скажем, в
технологии AJAX.
Именно DOM-события связывают действия, происходящие в документе, с кодом
JavaScript, тем самым обеспечивая динамический веб-интерфейс.
Для того, чтобы скрипт реагировал на событие — нужно назначить хотя бы одну
функцию-обработчик. Обычно обработчики называют «on+имя события», например:
onclick, onmouseover, onload и т. д.
Назначение обработчиков
Через атрибут HTML-тега
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Назначение обработчиков</title>
<script type="text/javascript">
function alertEvent() {
alert('Произошло событие\u0022onclick\u0022');
}
</script>
</head>
<body>
<input type="button" value="Вызов события" onclick="alertEvent()" />
</body>
</html>
Назначение обработчиков
Через свойство объекта
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Назначение обработчиков</title>
<script type="text/javascript">
window.onload = function() {
var btn = window.document.getElementById('btn');
btn.onclick = function() { //Установка обработчика
alert('Произошло событие\u0022onclick\u0022');
}
btn.onclick = null; //Удаление обработчика
}
</script>
</head>
<body>
<input type="button" value="Вызов события" id= "btn" />
</body>
</html>
Специальные методы установки обработчиков
Решение Microsoft: методы «attachEvent » и «detachEvent»
<head>
<title>Назначение обработчиков</title>
<script type="text/javascript">
window.onload = function() {
var btn = window.document.getElementById('btn');
var showMessage = function() {
alert('Message: Произошло событие\u0022onclick\u0022');
}
btn.attachEvent("onclick", showMessage); //Установка обработчика
btn.detachEvent("onclick", showMessage); //Удаление обработчика
}
</script>
</head>
<body>
<input type="button" value="Вызов события" id= "btn" />
</body>
Методы работают только в Internet Explorer и Opera
Специальные методы установки обработчиков
Установка по стандарту W3C: методы «addEventListener» и
«removeEventListener»
<head>
<title>Назначение обработчиков</title>
<script type="text/javascript">
window.onload = function() {
var btn = window.document.getElementById('btn');
var showMessage = function() {
alert('Message: Произошло событие\u0022onclick\u0022');
}
btn.addEventListener("click", showMessage, false); //Установка обработчика
btn.removeEventListener("click", showMessage , false); //Удаление обработчика
//Имя события в этих методах указывается без префикса «on»
}
</script>
</head>
<body>
<input type="button" value="Вызов события" id= "btn" />
</body>
Методы не работают в Internet Explorer
Специальные методы установки обработчиков
Установка по стандарту W3C: методы «addEventListener» и
«removeEventListener»
В отличии от методов решения Microsoft («attachEvent » и «detachEvent»), методы
«addEventListener» и «removeEventListener» имеют ещё один параметр, принимающий
значения «true» или «false». Если параметр установлен в «true», то при срабатывании
события во вложенном элементе, обработчик будет вызван на фазе «перехвата», а если
значение будет «false», то — на фазе «всплывания».
Действие браузера по умолчанию
Браузер имеет своё собственное поведение по умолчанию для различных событий. В
ряде случаев реакцию браузера на событие можно убрать в обработчике
Установка по стандарту W3C: «preventDefault()»
Решение Microsoft: свойство «returnValue = false»
<script type="text/javascript">
ELEMENT.onclick = function(event) {
//Кроссбраузерное получение объекта «Событие»
event = event || window.event;
//Кроссбраузерная отмена действия по умолчанию
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
}
</script>
Некоторые поведения по умолчанию происходят до вызова обработчика события. В
этом случае их, конечно же, отменить нельзя
