Обработчики событий следует использовать правильным образом, желательно не писать их напрямую в атрибутах тегов, а устанавливать обработчики событий в подключаемых файлах с JavaScript-кодом. Если используется библиотека jQuery, то название обработчиков необходимо писать без префикса on.
click / onclick
– клик на элементе; происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
Варианты записи всплывающих окон
<input value="Нажми меня" onclick="alert('Клик!')" type="button">
<a href="#" onclick="alert('Пример 1 сработал'); return false;">Пример 1</a>
Последовательность чисел, начиная с 1
<script>
function countRabbits() {
for(let i=1; i<=3; i++) {
alert("Кролик номер " + i);
}
}
</script>
<input type="button" onclick="countRabbits()" value="Считать кроликов!">
<input id="elem" type="button" value="Нажми меня!">
<script>
elem.onclick = function() {
alert('Спасибо');
};
</script>
<input type="button" id="button" value="Кнопка">
<script>
button.onclick = function() {
alert('Клик!');
};
</script>
Выводит в сплывающем окне “Нажми меня” – содержимое кнопки
<button onclick="alert(this.innerHTML)">Нажми меня</button>
Несколько обработчиков событий всплывающего окна
<input id="elem" type="button" value="Нажми меня"/>
<script>
function handler1() {
alert('Спасибо!');
};
function handler2() {
alert('Спасибо ещё раз!');
}
elem.onclick = () => alert("Привет");
elem.addEventListener("click", handler1); // Спасибо!
elem.addEventListener("click", handler2); // Спасибо ещё раз!
</script>
Получение координат мыши из объекта события
<input type="button" value="Нажми меня" id="elem">
<script>
elem.onclick = function(event) {
// вывести тип события, элемент и координаты клика
alert(event.type + " на " + event.currentTarget);
alert("Координаты: " + event.clientX + ":" + event.clientY);
};
</script>
Изменение фона объекта
<button>Change color</button>
<script>
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
btn.onclick = function () {
const rndCol =
"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
document.body.style.backgroundColor = rndCol;
};
</script>
<button onclick="bgChange()">Press me</button>
<script>
function bgChange() {
const rndCol =
"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
document.body.style.backgroundColor = rndCol;
}
</script>
Изменение фона элемента div
<div id='myDiv'>Элемент изменения цвета</div>
<button onclick='changeColor()'>Изменить цвет</button>
<script>
function changeColor() {
document.getElementById('myDiv').style.backgroundColor = 'red';
}
</script>
Изменение цвета ссылки
<script>
function ChangeColor(Element) {
if (Element.style.color == 'green') Element.style.color = 'red';
else Element.style.color = 'green';
return false;
}
</script>
<a href="#" style="color: green;" onclick="return ChangeColor(this);">Изменить цвет</a>
Проверка формы
<form>
<div>
<label for="fname">Имя: </label>
<input id="fname" type="text" />
</div>
<div>
<label for="lname">Фамилия: </label>
<input id="lname" type="text" />
</div>
<div>
<input id="submit" type="submit" />
</div>
</form>
<p></p>
<script>
var form = document.querySelector("form");
var fname = document.getElementById("fname");
var lname = document.getElementById("lname");
var submit = document.getElementById("submit");
var para = document.querySelector("p");
form.onsubmit = function (e) {
if (fname.value === "" || lname.value === "") {
e.preventDefault();
para.textContent = "Оба поля должны быть заполнены!";
}
};
</script>
Перехват событий из CSS в видео с функцией stopPropagation(), которая при вызове в обработчике событий объекта делает так, чтобы обработчик выполнялся, но событие не всплывало дальше по цепочке
<button>Display video</button>
<div class="hidden">
<video>
<source src="rabbit320.mp4" type="video/mp4" />
<source src="rabbit320.webm" type="video/webm" />
<p>
Your browser doesn't support HTML5 video. Here is a
<a href="rabbit320.mp4">link to the video</a> instead.
</p>
</video>
</div>
div { position: absolute;
top: 50%;
transform: translate(-50%,-50%);
... }
.hidden {
left: -50%;
}
.showing {
left: 50%;
}
<script>
var videoBox = document.querySelector("div");
var video = document.querySelector("video");
videoBox.onclick = function () {
videoBox.setAttribute("class", "hidden");
};
video.onclick = function () {
video.play();
};
video.onclick = function (e) {
e.stopPropagation();
video.play();
};
</script>
<p style="text-align: justify;">Показ и скрытие текста</p>
<button onclick='toggleVisibility()'>Показать/Скрыть</button>
<div id='hiddenDiv' style='display:none'>Скрытый текст</div>
<script>
function toggleVisibility() {
let element = document.getElementById('hiddenDiv');
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
</script>
Загрузка данных через AJAX, для загрузки данных с сервера без перезагрузки страницы
function fetchData() {
// Здесь ваш код для AJAX-запроса
}
<onclick="fetchData()">Загрузить данные</button>
Смена названия ссылки с On на Off
<script>
//дожидаемся полной загрузки страницы
window.onload = function () {
//получаем идентификатор элемента
var a = document.getElementById('switch');
//вешаем на него событие
a.onclick = function() {
//производим какие-то действия
if (this.innerHTML=='On') this.innerHTML = 'Off';
else this.innerHTML = 'On';
//предотвращаем переход по ссылке href
return false;
}
}
</script>
<a id="switch" href="#">On</a>
onabort
– прерывание воспроизведения. Событие onabort происходит, когда загрузка аудио или видео прерывается. Событие onabort происходит только тогда, когда загрузка прерывается, а не при возникновении ошибки. Применяется для элементов audio, embed, img, object, video.
Оповещение о том, что загрузка видео прервана
<video id="myVideo" onabort="alert('Video load aborted')">
Оповещение о том, что загрузка изображения прервана
<img id="myImage" src="example.jpg" onabort="imageAborted()">
<script>
function imageAborted() {
alert("Image load was aborted by the user.");
}
</script>
Оповещение о том, что отправка формы прервана
<form id="myForm">
<input type="text" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
<script>
var form = document.getElementById("myForm");
form.addEventListener("abort", formAborted);
function formAborted() {
alert("Form submission was aborted by the user.");
}
</script>
onafterprint – закончена печать
Событие onafterprint происходит, когда начинается печать страницы. Событие onafterprint происходит, когда диалоговое окно печати закрывается. Браузер запускает onafterprint и onbeforeprint так, что примечания, пояснения и комментарии могут быть добавлены к процессу печати. Применяется для body.
<body onafterprint="myFunction()">
onautocomplete – выполнено автозаполнение формы
Атрибут, при помощи которого форма заполняется в один клик — браузер подставит значения в соответствующие поля.
<form> <label for="name">Имя:</label> <input type="text" id="name" name="name" autocomplete="on"> </form>
onautocompleteerror – ошибка при автозаполнении формы
onbeforeprint – подготовка к печати
onbeforeunload – документ выгружен
Когда пользователь уходит со страницы, мы можем спросить его, точно ли он хочет уйти. За это отвечает обработка события beforeunload. Событие происходит перед событием выгрузки страницы unload. Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу. Если пользователь подтверждает, браузер переходит на новую страницу, в противном случае он отменяет навигацию. В соответствии со спецификацией, для отображения диалогового окна подтверждения обработчик события должен вызвать preventDefault() по событию. Применяется для body.
<body onbeforeunload="return myFunction()">
<script>
function myFunction() {
return "Вы уверены, что хотите закрыть страницу?...";
}
</script>
onblur – потеря фокуса
Событие focus вызывается в момент фокусировки, а blur – когда элемент теряет фокус. поддержка focus/blur гарантирована для элементов, с которыми посетитель может взаимодействовать: button, input, select, a и т.д. С другой стороны, элементы форматирования div, span, table – по умолчанию не могут получить фокус. Метод elem.focus() не работает для них, и события focus/blur никогда не срабатывают. Это можно изменить HTML-атрибутом tabindex.
Валидация (проверка) введённых данных с надписью под формой
<style>
.invalid { border-color: red; }
#error { color: red }
</style>
<script>
input.onblur = function() {
if (!input.value.includes('@')) { // не email
input.classList.add('invalid');
error.innerHTML = 'Пожалуйста, введите правильный email.'
}
};
input.onfocus = function() {
if (this.classList.contains('invalid')) {
// удаляем индикатор ошибки, т.к. пользователь хочет ввести данные заново
this.classList.remove('invalid');
error.innerHTML = "";
}
};
</script>
Ваш email: <input type="email" id="input">
<div id="error"></div>
Валидация (проверка) введённых данных с заливанием цветом формы
<style>
.error {
background: red;
}
</style>
<script>
input.onblur = function() {
if (!this.value.includes('@')) { // не email
// показать ошибку
this.classList.add("error");
// ...и вернуть фокус обратно
input.focus();
} else {
this.classList.remove("error");
}
};
</script>
Ваш email: <input type="email" id="input">
<input type="text" style="width:280px" placeholder="введите неверный email и кликните сюда">
Изменение текста формы CLICK HERE
<input type="text" value="CLICK HERE" />
<script>
let input = document.querySelector("input");
input.onblur = inputBlur;
input.onfocus = inputFocus;
function inputBlur() {
input.value = "Focus has been lost";
}
function inputFocus() {
input.value = "Focus is here";
}
</script>
Проверка формы с обводом рамки
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Событие onblur</title>
<style>
.warning {
background-color: #ffe;
outline: 1px solid #dc143c;
}
</style>
<script>
function warning(field) {
if (field.value == '') field.classList.add('warning');
else field.classList.remove('warning');
}
</script>
</head>
<body>
<form>
<p><input placeholder="Имя" onblur="warning(this)"></p>
<p><input placeholder="Фамилия" onblur="warning(this)"></p>
<p><input placeholder="Адрес" onblur="warning(this)"></p>
</form>
</body>
</html>
Подсветка при фокусировке без onblur
<style>
*!*input:focus*/!* {
background: #FA6;
outline: none; /* убрать рамку */
}
</style>
<input type="text">
<p>Селектор focus выделит элемент при фокусировке на нем и уберёт рамку, которой браузер выделяет этот элемент по умолчанию.</p>
Плейсхолдер – значение-подсказка внутри INPUT, которое автоматически исчезает при фокусировке и существует, пока посетитель не начал вводить текст, без onblur
<style>
.my*!*::-webkit-input-placeholder*/!* {
color: red;
font-style: italic;
}
.my*!*::-moz-input-placeholder*/!* {
color: red;
font-style: italic;
}
.my*!*::-ms-input-placeholder*/!* {
color: red;
font-style: italic;
}
</style>
<input class="my" type="text" placeholder="E-mail">
oncancel – отмена действия
Отменить текущую операцию на устройстве. Используется для асинхронного управления устройством. Если выполнить эту функцию до начала операции, эта операция будет отменена.
Device.Cancel ();
oncanplay
– можно начать воспроизведение указанного медиа-файла
Событие oncanplay возникает, когда браузер может начать воспроизведение указанного аудио/видео (когда оно достаточно буферизовано для начала). В процессе загрузки аудио/видео происходят следующие события в таком порядке: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough
Выполнить JavaScript, когда видео будет готово к воспроизведению:
<video oncanplay="myFunction()">
oncanplaythrough
– можно начать воспроизведение указанного медиа-файла без необходимости остановки для буферизации. Событие oncanplaythrough возникает, когда браузер оценивает, что он может воспроизводить указанный носитель без необходимости остановки для буферизации.
Выполнить JavaScript, когда видео можно воспроизвести полностью, без остановки:
<video oncanplaythrough="myFunction()">
onchange – изменение значения
Событие onchange происходит, когда значение элемента было изменено. Для радиокнопок и флажков событие onchange возникает приизменении состояния checked. Это событие похоже на событие oninput. Разница в том, что событие oninput происходит сразу после изменения значения элемента, в то время как происходит onchange, когда элемент теряет фокус, после изменения содержимого. Другое отличие заключается в том, что событие onchange также работает с элементом select. Обработчик события onchange, которое срабатывает, когда значение элемента изменилось и он потерял фокус. Для объектовAudioTrackList, VideoTrackList и TextTrackList это событие возникает, когда одна или несколько дорожек включаются/отключаются. Выполняет код JavaScript, когда возникает событие change; то есть, если поле Select, Text или Textarea теряет фокус, а его значение было изменено.
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано
Запустить JavaScript, когда пользователь изменяет выбранную опцию элемента select:
<select onchange="myFunction()">
Здесь userName этот текстовое поле. Если пользователь изменяет текст и покидает поле, обработчик onChange вызывает функцию checkValue для подтверждения верности значения userName:
<INPUT TYPE="text" VALUE="" NAME="userName" onChange="checkValue(this.value)">
onclose – закрытие чего-либо
Обработчик события для событий закрытия, отправляется в окно. Событие OnClose происходит при закрытии диалогового окна. Вы можете создать обработчик событий для события OnClose, чтобы выполнить определенные действия при закрытии диалогового окна. Обработчик события close, которое вызывается в диалоговых элементах, когда они закрываются, а также в элементах WebSocket, когда соединение завершено.
oncontextmenu – открытие контекстного меню
Событие oncontextmenu возникает, когда пользователь щелкает правой кнопкой мыши на HTML-элементе, чтобы открыть контекстное меню. Свойство обработчика событий для события клика правой кнопкой мыши внутри элемента window. Если стандартное поведение не будет предотвращено, то активируется контекстное меню браузера (В IE8 есть ошибка, связанная с тем что контекстное меню не будет активировано если определён обработчик события contextmenu). Событие будет происходить вместе с другими событиями right-click и не зависит от “contextmenu” атрибута элемента.
Запустить JavaScript, когда пользователь щелкает правой кнопкой мыши на элементе div с контекстным меню:
<div oncontextmenu="myFunction()" contextmenu="mymenu">
Код в этом примере меняет стандартное поведение браузера, отключая клик правой кнопкой мыши.
document.oncontextmenu = function () {
// Используйте объект "document" вместо "window" для совместимости с IE8.
return false;
};
window.addEventListener(
"contextmenu",
function (e) {
// Не совместимо с IE младше 9 версии
e.preventDefault();
},
false,
);
oncopy – выполнено копирование
Событие oncopy возникает, когда пользователь копирует содержимое элемента. Событие oncopy также возникает, когда пользователь копирует элемент, например, изображение, созданное с помощью элемента img. Событие oncopy в основном используется для элементов “input” с type=”text”. Срабатывают при вставке/копировании/удалении текста. Если в их обработчиках отменить действие браузера, то вставки/копирования/удаления не произойдёт. Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё старое значение, а новое недоступно.
Выполнить JavaScript при копировании некоторого текста элемента input:
<input type="text" oncopy="myFunction()" value="Попробуйте скопировать этот текст">
oncuechange – изменение метки в элементе track
Обработчик события cuechange, которое срабатывает, когда элемент TextTrack изменяет отображаемые в данный момент временные метки (cue).
oncut – выполнено вырезание контента
Событие oncut возникает, когда пользователь вырезает содержимое элемента. Хотя событие oncut поддерживается всеми HTML элементами, на самом деле невозможно вырезать содержимое, например, в элементе p, ЕСЛИ только элемент не установил для contenteditable значение “true”. Событие oncut в основном используется для элементов input с type=”text”.
Выполнить JavaScript при вырезании некоторого текста в элементе input:
<input type="text" oncut="myFunction()" value="Попробуйте сократить этот текст">
ondblclick – двойной клик на элементе
Обработчик события dblclick, которое возникает, при двойном щелчке левой кнопкой мыши. Событие ondblclick возникает, когда пользователь дважды щелкает на HTML элемент; то есть, когда пользователь дважды щёлкнет элемент формы или гиперссылку.
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY – Представляет местонахождение курсора в момент возникновения события.
which – Представляет 1 для щелчка левой клавиши мыши и 3 – для щелчка правой клавиши.
modifiers – Содержит список клавиш-модификаторов, нажатых при возникновении события.
Запустить JavaScript при двойном щелчке на элементе p:
<p ondblclick="myFunction()">Дважды щелкните меня</p>
Здесь диалог alert выводится, если пользователь дважды щёлкнет кнопку:
<form>
<INPUT Type="button" Value="Double Click Me!" onDblClick="alert('You just double clicked me!')">
</form>
ondrag – перетаскивание элемента
Событие ondrag возникает при перетаскивании элемента или выделенного текста. Перетаскивание – очень распространенная функция в HTML5. Это когда вы “хватаете” объект и перетаскиваете его в другое место.
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
data – Возвращает массив строк, содержащих URL’ы отпущенных объектов.
modifiers – Содержит список клавиш-модификаторов, нажатых при возникновении события.
screenX, screenY – Представляет местонахождение курсора в момент возникновения события.
Выполнить JavaScript, когда элемент p перетаскивается:
<p draggable="true" ondrag="myFunction(event)">Тащи меня!</p>
ondragend – перетаскивание элемента завершено
Событие ondragend происходит, когда пользователь закончил перетаскивание элемента или выделения текста.
Запустить JavaScript, когда пользователь закончит перетаскивать элемент p:
<p draggable="true" ondragend="myFunction(event)">Тащи меня!</p>
ondragenter
– элемент перетаскивается в допустимую целевую зону. Событие ondragenter возникает, когда перетаскиваемый элемент или выделенный текст попадает в допустимую цель удаления. События ondragenter и ondragleave могут помочь пользователю понять, что перетаскиваемый элемент собирается войти в цель удаления или покинуть ее. Это можно сделать, например, установив цвет фона, когда перетаскиваемый элемент попадает в цель перетаскивания, и убрав цвет, когда элемент перемещается из цели.
Выполнить JavaScript, когда перетаскиваемый элемент попадает в цель перетаскивания:
<div ondragenter="myFunction(event)"></div>
ondragexit
– выход из режима перетаскивания. Обработчик события dragexit, которое возникает, когда элемент больше не является целью элемента, который может принять его.
ondragleave
– элемент оставляет допустимую цель. Событие ondragleave возникает, когда перетаскиваемый элемент или выделение текста оставляет допустимую цель сброса.
Выполняйть JavaScript, когда перетаскиваемый элемент перемещается из цели перетаскивания:
<div ondragleave="myFunction(event)"></div>
ondragover
– элемент перетаскивается по допустимой целевой точке. Событие ondragover возникает, когда перетаскиваемый элемент или выделенный текст перетаскивается поверх допустимой цели удаления. По умолчанию данные/элементы не могут быть удалены из других элементов. Чтобы разрешить удаление, мы должны запретить обработку элемента по умолчанию. Это делается путем вызова метода event.preventDefault() для события ondragover.
Выполнить JavaScript, когда элемент перетаскивается поверх цели перетаскивания:
<div ondragover="myFunction(event)"></div>
ondragstart
– начало операции перетаскивания. Событие ondragstart возникает, когда пользователь начинает перетаскивать элемент или выделенный текст.
Запустить JavaScript, когда пользователь начнет перетаскивать элемент p:
<p draggable="true" ondragstart="myFunction(event)">Тащи меня!</p>
ondrop
– перетаскиваемый элемент отпущен. Событие ondrop возникает, когда перетаскиваемый элемент или выделенный текст отбрасываетсяна допустимую цель отбрасывания.
Выполнить JavaScript, когда перетаскиваемый элемент удаляется в элементе div:
<div ondrop="myFunction(event)"></div>
ondurationchange
– изменение длины носителя. Событие ondurationchange возникает при изменении продолжительности аудио/видео. При загрузке аудио/видео длительность изменится с “NaN” на фактическую продолжительность аудио/видео. В процессе загрузки аудио/видео происходят следующие события в таком порядке: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough
Запустить JavaScript, когда продолжительность видео изменилась:
<video ondurationchange="myFunction()">
onemptied
– файл неожиданно стал недоступен. Обработчик события emptied, которое возникает, когда текущий список воспроизведения для аудио или видео элемента пуст. Чаще всего из-за обрыва связи.
onended
– воспроизведение завершено. Событие onended происходит, когда аудио/видео достигает конца. Это событие полезно для сообщений типа “спасибо, что выслушали”, “спасибо, что посмотрели” и т.д.
Запустить JavaScript, когда аудио закончится:
<audio onended="myFunction()">
onerror
– произошла ошибка. Событие onerror запускается, если при загрузке внешнего файла (например, документа или изображения) возникает ошибка. При использовании на аудио/видео носителях связанными событиями, возникающими при каких-либо нарушениях процесса загрузки носителя, являются: onabort, onemptied, onstalled, onsuspend.
Событие error возникает только тогда, когда возникает ошибка синтаксиса JavaScript или ошибка времени выполнения, а не при появлении ошибки браузера. Например, если Вы попытаетесь установить window.location.href=’notThere.html’, а файл notThere.html не существует, результирующим сообщением об ошибке будет сообщение браузера; следовательно, onError не будет перехватывать это сообщение. Однако событие error будет включаться неверным URL в тэге IMG или неверными данными изображения.
window.onerror применяется только к ошибкам, которые возникают в окне, содержащем window.onerror, но не к ошибкам в других окнах.
onError может иметь следующие значения:
– null для подавления всех диалогов JavaScript об ошибках. Установка window.onerror в null означает, что Ваши пользователи не увидят ошибок JavaScript, вызванных Вашим кодом.
– Имя функции, обрабатывающей ошибки (аргументами являются текст сообщения, URL и номер строки с ошибкой). Для подавления стандартного диалога JavaScript об ошибках эта функция обязана возвращать true. См. Пример 3 ниже.
– Переменная или свойство, содержащее null или верную ссылку на функцию.
Если Вы пишете функцию-обработчик ошибок, у Вас есть три опции для сообщения об ошибках:
– Отслеживать ошибки, но дать возможность сообщать о них через стандартный диалог JavaScript (использовать функцию обработки ошибок, которая возвращает false или не возвращает значение).
– Самостоятельно сообщать об ошибках и отключить стандартный диалог (использовать функцию обработки ошибок, возвращающую true).
– Отключить все сообщения об ошибках (установить null в обработчик onError).
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано
Запустить JavaScript, если при загрузке изображения возникает ошибка:
<img src="image.gif" onerror="myFunction()">
Пример 1: Обработчик со значением Null. В этом тэге IMG код onError=”null” подавляет сообщения об ошибках, если ошибка возникает при загрузке изображения.
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="null">
Пример 2: Обработчик с Null для окна. Обработчик onError для окна не может быть выражен через HTML. Следовательно, Вы обязаны ввести всё необходимое, в нижнем регистре, в тэге SCRIPT. Следующий код присваивает null обработчику onError для всего окна, а не только для объекта Image. Это подавляет все сообщения JavaScript об ошибках, включая сообщения для объекта Image.
<SCRIPT> window.onerror=null </SCRIPT> <IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">
Однако, если объект Image имеет свой специальный обработчик onError, этот обработчик будет выполняться при возникновении ошибки с изображением. Это происходит из-за того что window.onerror=null подавляет сообщения об ошибках JavaScript, а не обработчиков onError.
<SCRIPT>
window.onerror=null
function myErrorFunc() {
alert("The image had a nasty error.")
}
</SCRIPT>
<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="myErrorFunc()">
В следующем примере window.onerror=null подавляет все сообщения об ошибках. Без onerror=null код вызовет ошибку переполнения стэка, так как здесь имеется бесконечная рекурсия.
<SCRIPT>
window.onerror = null;
function testErrorFunction() {
testErrorFunction();
}
</SCRIPT>
<BODY onload="testErrorFunction()">
test message
</BODY>
Пример 3: Функция обработки ошибок. Здесь определена функция myOnError, которая перехватывает ошибки JavaScript. Эта функция использует три массива для хранения сообщения, URL и строки-нарушителя для каждой ошибки. Если пользователь щёлкает кнопку Display Error Report, функция displayErrors открывает окно и создаёт в нём сообщение об ошибке. Заметьте, что эта функция возвращает true для подавления стандартного диалога JavaScript об ошибке.
<SCRIPT>
window.onerror = myOnError
msgArray = new Array()
urlArray = new Array()
lnoArray = new Array()
function myOnError(msg, url, lno) {
msgArray[msgArray.length]
= msg
urlArray[urlArray.length] = url
lnoArray[lnoArray.length]
= lno
return true
}
function displayErrors() {
win2=window.open('','window2','scrollbars=yes')
win2.document.writeln('<B>Error Report</B><P>')
for (var i=0; i < msgArray.length; i++) {
win2.document.writeln('<B>Error in file:</B> '
+ urlArray[i] + '<BR>')
win2.document.writeln('<B>Line
number:</B> ' + lnoArray[i] + '<BR>')
win2.document.writeln('<B>Message:</B> '
+ msgArray[i] + '<P>')
}
win2.document.close()
}
</SCRIPT>
<BODY onload="noSuchFunction()">
<FORM>
<BR><INPUT TYPE="button" VALUE="This button has a syntax error" onClick="alert('unterminated string')">
<P><INPUT TYPE="button" VALUE="Display Error Report" onClick="displayErrors()">
</FORM>
Этот пример даст на выходе:
Error Report Error in file: file:///c%7C/temp/onerror.html Line number: 34 Message: unterminated string literal Error in file: file:///c%7C/temp/onerror.html Line number: 34 Message: missing ) after argument list Error in file: file:///c%7C/temp/onerror.html Line number: 30 Message: noSuchFunction is not defined
Пример 4: Обработчик события вызывает функцию. В тэге IMG обработчик onError вызывает функцию badImage при возникновении ошибок во время загрузки изображения.
<SCRIPT>
function badImage(theImage) {
alert('Error: ' + theImage.name + ' did not load properly.')
}
</SCRIPT>
<FORM>
<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">
</FORM>
onfocus
– установка фокуса на элементе. Выполняет код JavaScript при возникновении события focus; то есть, если окно, фрэйм или набор фрэймов получает фокус или если элемент формы получает фокус. Событие onfocus происходит, когда элемент получает фокус. Событие onfocus часто используется в полях ввода. Все HTML элементы, КРОМЕ: base, bdo, br, head, html, iframe, meta, param, script, style, и title
Запустить JavaScript, когда поле ввода получит фокус:
<input type="text" onfocus="myFunction()">
Здесь обработчик onFocus используется в объекте valueField Textarea для вызова функции valueCheck.
<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">
onfocusin
Событие onfocusin происходит, когда элемент получает фокус. Событие onfocusin часто используется в полях ввода. Все HTML элементы, КРОМЕ: base, bdo, br, head, html, iframe, meta, param, script, style, и title
Запустить JavaScript, когда поле ввода вот-вот получит фокус:
<input type="text" onfocusin="myFunction()">
onfocusout
Событие onfocusout возникает, когда элемент теряет фокус. Событие onfocusout часто используется в полях ввода. Событие onfocusout часто используется при проверке формы (когда пользователь покидает поле формы). Все HTML элементы, КРОМЕ: base, bdo, br, head, html, iframe, meta, param, script, style, и title
Запустите JavaScript, когда поле ввода вот-вот потеряет фокус:
<input type="text" onfocusout="myFunction()">
onfullscreenchange
Событие fullscreenchange происходит, когда элемент просматривается в полноэкранном режиме. Используйте метод element.requestFullscreen() для просмотра элемента в полноэкранном режиме. Используйте метод element.exitFullscreen() метод отмены полноэкранного режима. Для каждого браузера требуется определенный префикс (см. скобки): 45.0 (webkit), 11.0 (ms), 47.0 (moz), 5.1 (webkit), 15.0 (webkit)
Отображать некоторый текст при просмотре страницы в полноэкранном режиме:
document.addEventListener("fullscreenchange", function() {
output.innerHTML = "fullscreenchange event fired!";
});
Использовать префиксы для кроссбраузерного кода:
/* Стандартный синтаксис */
document.addEventListener("fullscreenchange", function() {
...
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function() {
...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function() {
...
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function() {
...
});
onfullscreenerror
Событие fullscreenerror возникает, когда элемент не может быть просмотрен в полноэкранном режиме, даже если он был запрошен. Используйте метод element.requestFullscreen() для просмотра элемента в полноэкранном режиме. Используйте метод element.exitFullscreen() отмены полноэкранного режима.
Предупреждающий текст, если элемент не может быть просмотрен в полноэкранном режиме:
document.addEventListener("fullscreenerror", function() {
alert("Fullscreen denied")
});
Использовать префиксов для кроссбраузерного кода:
/* Стандартный синтаксис */
document.addEventListener("fullscreenerror", function() {
...
});
/* Firefox */
document.addEventListener("mozfullscreenerror", function() {
...
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenerror", function() {
...
});
/* IE / Edge */
document.addEventListener("msfullscreenerror", function() {
...
});
onhashchange
– изменение привязки части адреса. Поддержка HTML тегов: body. Событие onhashchange происходит, когда были внесены изменения в часть привязки (начинается с символа ‘#’) текущего URL. Пример того, что на самом деле представляет собой якорная часть: Предположим, что текущий URL-адрес http://www.example.com/test.htm#part2 – Якорная часть этого URL-адреса будет #часть 2.
Чтобы вызвать это событие, вы можете:
Измените часть привязки, установив location.hash или location.href свойство Объект Location
Перейдите на текущую страницу с другой закладкой (используйте кнопки “назад” или “вперед”)
Нажмите на ссылку на якорь закладки
Выполнить JavaScript, когда часть привязки была изменена:
<body onhashchange="myFunction()">
Как назначить событие “onhashchange” объекту window:
window.onhashchange = myFunction;
oninput
– начало ввода данных. Событие oninput возникает, когда элемент получает пользовательский ввод. Это событие происходит, когда изменяется значение элемента input или textarea. Это событие похоже на событие onchange. Разница в том, что событие oninput происходит сразу после изменения значения элемента, в то время как onchange происходит, когда элемент теряет фокус, после изменения содержимого. Другое отличие заключается в том, что событие onchange также работает с элементами select. Поддержка HTML тегов: input type=”color”, input type=”date”, input type=”datetime”, input type=”email”, input type=”month”, input type=”number”, input type=”password”, input type=”range”, input type=”search”, input type=”tel”, input type=”text”, input type=”time”, input type=”url”, input type=”week” и textarea
Выполняйть JavaScript, когда пользователь что-то пишет в поле input:
<input type="text" oninput="myFunction()">
Ползунок диапазона – как динамически обновлять значение ползунка:
<input type="range" oninput="myFunction(this.value)">
oninvalid
– элемент поврежден. Событие oninvalid возникает, когда отправляемый элемент input является недопустимым. Например, поле ввода недопустимо, если установлен обязательный атрибут и поле пустое (обязательный атрибут указывает, что поле ввода должно быть заполнено перед отправкой формы). Поддержка HTML тегов: input
Предупреждение о некотором тексте, если поле ввода является недопустимым:
<input type="text" oninvalid="alert('Вы должны заполнить форму!');" required>
Предупреждающий текст, если поле ввода содержит менее 6 символов:
Имя: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Должен содержать 6 или более символов");
}
</script>
Предупреждающий текст, если поле ввода содержит число, которое меньше 2 или больше 5:
Номер: <input type="number" id="myInput" name="quantity" min="2" max="5" required>
<script>
document.getElementById("myInput").addEventListener("invalid", myFunction);
function myFunction() {
alert("Вы должны выбрать число от 2 до 5. Ты выбрал: " + this.value);
}
</script>
onkeydown
– нажата клавиша. Событие onkeydown происходит, когда пользователь нажимает клавишу (на клавиатуре). Порядок событий, связанных с событием onkeydown: onkeydown, onkeypress, onkeyup. Все HTML элементы, КРОМЕ: base, bdo, br, head, html, iframe, meta, param, script, style, и title. Событие KeyDown всегда возникает до события KeyPress. Если onKeyDown возвращает false, событие KeyPress не возникает. Это предотвращает появление событий KeyPress при удерживании пользователем клавиши в нажатом состоянии.
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY – Для события поверх окна, представляет местонахождение курсора в момент возникновения события. Для события поверх формы, представляет позицию элемента формы.
which – ASCII-значение нажатой клавиши. Для получения реальной буквы, цифры или символа нажатой клавиши используйте метод String.fromCharCode. Для установки этого свойства, когда значение ASCII неизвестно, используйте метод String.charCodeAt.
modifiers – Содержит список клавиш-модификаторов, нажатых при возникновении события.
Запустить JavaScript, когда пользователь нажимает клавишу:
<input type="text" onkeydown="myFunction()">
Использовать “onkeydown” вместе с событием “onkeyup”:
<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
Здесь использована функция blockA для вычисления символов, введённых с клавиатуры в текстовый бокс textentry. Если пользователь вводит “a” или “A”, функция возвращает false, а текстовый бокс не отображает значение. В этой функции свойство which события присваивает ASCII-значение нажатой пользователем клавиши переменной keyChar. Оператор if вычисляет keyChar и возвращает false для специфицированных символов:
<form name="main">
<input name="textentry"
type=text size=10 maxlength=10>
</form>
<script>
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
return false;
}
document.main.textentry.onkeydown = blockA;
</script>
onkeypress
– нажата клавиша и затем отпущена. Выполняет код JavaScript при возникновении события KeyPress; то есть, если пользователь удерживает клавишу нажатой. Событие onkeypress возникает, когда пользователь нажимает клавишу (на клавиатуре). Событие onkeypress запускается не для всех клавиш (например, ALT, CTRL, SHIFT, ESC) во всех браузерах. Чтобы определить только, нажал ли пользователь клавишу, используйте вместо событие onkeydown, потому что оно работает для всех ключей. Порядок событий, связанных с событием onkeydown: onkeydown, onkeypress, onkeyup. Все HTML элементы, КРОМЕ: base, bdo, br, head, html, iframe, meta, param, script, style, и title. Событие KeyPress возникает сразу после события KeyDown только тогда, когда onKeyDown возвращает что-либо, отличное от false. Событие KeyPress возникает повторно до тех пор, пока пользователь не отпустит клавишу. Вы может отменять индивидуальные события KeyPress.
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY – Для события поверх окна представляет местонахождение курсора в момент возникновения события. Для события поверх формы представляет позицию элемента формы.
which – ASCII-значение нажатой клавиши. Для получения реальной буквы, цифры или символа нажатой клавиши используйте метод String.fromCharCode. Для установки этого свойства, когда значение ASCII неизвестно, используйте метод String.charCodeAt.
modifiers – Содержит список клавиш-модификаторов, нажатых при возникновении события.
Запустите JavaScript, когда пользователь нажимает клавишу:
<input type="text" onkeypress="myFunction()">
Здесь метод captureEvents отлавливает ввод с клавиатуры, а обработчик onKeyPress вызывает функцию blockA для проверки нажатий клавиш. Если нажимаются клавиши “a” или “z”, функция прокручивает окно Navigator’а.
function blockA(e) {
var keyChar = String.fromCharCode(e.which);
if (keyChar == 'A' || keyChar == 'a')
self.scrollBy(10,10);
else if(keyChar == 'Z' || keyChar == 'z')
self.scrollBy(-10,-10);
else return false;
}
document.captureEvents(Event.KEYPRESS);
document.onkeypress = blockA;
onkeyup
– отпущена клавиша.Событие onkeyup происходит, когда пользователь отпускает клавишу (на клавиатуре). Порядок событий, связанных с событием onkeydown: onkeydown, onkeypress, onkeyup. Все HTML элементы, КРОМЕ: base, bdo, br, head, html, iframe, meta, param, script, style, и title.
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY – Для события поверх окна представляет местонахождение курсора в момент возникновения события. Для события поверх формы представляет позицию элемента формы.
which – ASCII-значение нажатой клавиши. Для получения реальной буквы, цифры или символа нажатой клавиши используйте метод String.fromCharCode. Для установки этого свойства, когда значение ASCII неизвестно, используйте метод String.charCodeAt.
modifiers – Содержит список клавиш-модификаторов, нажатых при возникновении события.
Запустить JavaScript, когда пользователь отпускает ключ:
<input type="text" onkeyup="myFunction()">
Использовать “onkeydown” вместе с событием “onkeyup”:
<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">
Вывести фактический ключ, который был выпущен внутри текстового поля:
Введите свое имя: <input type="text" id="fname" onkeyup="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = x;
}
</script>
Здесь метод captureEvents отлавливает ввод с клавиатуры, а обработчик onKeyUp вызывает функцию Key_Up. Метод alert функции открывает диалоговое окно для отображения значения нажатой клавиши:
function Key_Up(e) {
var keyChar = String.fromCharCode(e.which);
alert("Hold '" + keyChar +"' again for me, okay?");
}
document.onkeyup=Key_Up;
document.captureEvents(Event.KEYUP);
onload
– элемент загружен. Событие onload происходит, когда объект был загружен. Событие onload чаще всего используется в элементе body для выполнения скрипта после того, как веб-страница полностью загрузила все содержимое (включая изображения, файлы скриптов, CSS-файлы и т.д.). Событие onload можно использовать для проверки типа браузера посетителя и версии браузера и загрузки соответствующей версии веб-страницы на основе полученной информации. Событие onload также можно использовать для обработки файлов cookie.
Обработчик onLoad используется в тэге BODY или FRAMESET, например, BODY onLoad=”…”. Для тэгов FRAMESET и FRAME: событие обработчика onLoad во фрэйме (помещённого в тэг BODY) возникает до onLoad тэга FRAMESET (помещённого в тэг FRAMESET). Для изображений обработчик onLoad указывает скрипт, исполняемый при выводе изображения. Не путайте вывод изображения с загрузкой изображения. Вы можете загрузить несколько изображений, затем вывести их поочерёдно в одном и том же объекте Image путём установки свойства src объекта. Если Вы изменяете изображение, выводимое таким образом, onLoad выполняется каждый раз при выводе изображения, а не только при загрузке изображений в память.
Если специфицируете обработчик onLoad для объекта Image, который выводит циклическую GIF-анимацию (multi-image GIF), каждый цикл анимации включает обработчик onLoad, и обработчик выполняется однократно для каждого цикла. Можно использовать обработчик onLoad для создания анимации JavaScript путём повторяющейся установки свойства src объекта Image.
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
width, height – Для события поверх окна, но не поверх слоя/layer, эти свойства представляют ширину и высоту окна.
Запустить JavaScript сразу после загрузки страницы:
<body onload="myFunction()">
В JavaScript, используйте метод addEventListener():
object.addEventListener("load", myScript);
Вывод сообщения при загрузке страницы. Здесь обработчик onLoad выводит приветствие после загрузки страницы.
<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>
Вывод сообщения при загрузке изображения. Здесь создаются два объекта Image: один – конструктором Image, а второй – тэгом IMG. Каждый объект Image имеет обработчик onLoad, который вызывает функцию displayAlert, выводящую сообщение. Для изображения, созданного тэгом IMG, диалог alert отображает имя изображения. Для изображения, созданного конструктором Image, alert выводит сообщение без имени изображения. Это происходит из-за того, что обработчик onLoad для объекта, созданного конструктором Image, обязан быть именем функции и он не может специфицировать параметры для функции displayAlert.
<SCRIPT>
imageA = new Image(50,50)
imageA.onload=displayAlert
imageA.src="cyanball.gif"
function displayAlert(theImage) {
if (theImage==null) {
alert('An image loaded')
}
else alert(theImage.name + ' has been loaded.')
}
</SCRIPT>
<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top" onLoad=displayAlert(this)><BR>
Циклический вывод GIF-анимации. Здесь выводится изображение birdie.gif, которое является анимированным изображением GIF. Обработчик onLoad увеличивает переменную cycles, которая отслеживает количество циклов анимации. Чтобы увидеть значение cycles, пользователь щёлкает кнопку Count Loops.
<SCRIPT>
var cycles=0
</SCRIPT>
<IMG ALIGN="top" SRC="birdie.gif" BORDER=0 onLoad="++cycles">
<INPUT TYPE="button" VALUE="Count Loops" onClick="alert('The animation has looped ' + cycles + ' times.')">
Изменение отображаемой GIF-анимации. Это пример использует обработчик onLoad для ротации шести GIF-анимаций. Каждая анимация показывается как последовательность отдельных объектов Image. Когда документ загружается, выводится !anim0.html. Когда эта анимация завершается, обработчик onLoad вызывает загрузку следующего файла, !anim1.html, вместо первого файла. После завершения последней анимации, !anim5.html, вновь отображается первый файл. Заметьте, что функция changeAnimation не вызывает сама себя после изменения свойства src объекта Image. Это происходит, потому что свойство src изменяется, обработчик onLoad изображения включается и вызывается функция changeAnimation.
<SCRIPT>
var whichImage=0
var maxImages=5
function changeAnimation(theImage) {
++whichImage
if (whichImage <= maxImages) {
var imageName="!anim" + whichImage + ".gif"
theImage.src=imageName
} else {
whichImage=-1
return
}
}
</SCRIPT>
<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top" onLoad="changeAnimation(this)">
Использовать событие onload для элемента img. Оповещение “Изображение загружено” сразу после загрузки изображения:
<img src="javascriptw3.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
Использовать событие onload для обработки файлов cookie:
<body onload="checkCookies()">
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies включены.";
} else {
text = "Cookies не включены.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
onloadeddata
– загружены данные файла. Обработчик события loadeddata, которое возникает, когда аудио/видео уже можно воспроизводить в текущей позиции, но загрузка медиа-данных продолжается. Событие onloadeddata возникает при загрузке медиа-фрейм загружен, но не гарантирует, что доступно достаточно данных для начала воспроизведения. Событие onloadeddata происходит после onloadedmetadata и перед oncanplay.
При загрузке носителя происходит 7 событий в следующем порядке:
1. onloadstart
2. ondurationchange
3. onloadedmetadata
4. onloadeddata
5. onprogress
6. oncanplay
7. oncanplaythrough
Выполнить JavaScript, когда доступны данные для текущего фрейма (для video):
<video onloadeddata="myFunction()">
Выполнить JavaScript, когда доступны данные для текущего фрейма (для audio):
<audio onloadeddata="myFunction()">
onloadedmetadata
– загружены метаданные файла. Обработчик события loadedmetadata, которое возникает, когда были загружены мета-данные (длительность, размеры кадра (для видео) и текст трека) для указанного аудио/видео файла. Событие onloadedmetadata происходит, когда метаданные для носителя были загружены.
Метаданные для аудио или видео состоят из:
Продолжительность
Размеры (видео)
Треки
Запустить JavaScript при загрузке метаданных для видео:
<video onloadedmetadata="myFunction()">
В JavaScript:
object.onloadedmetadata = function(){myScript};
В JavaScript, используйте метод addEventListener():
object.addEventListener("loadedmetadata", myScript);
onloadstart
– начало загрузки элемента. Обработчик события loadstart, которое возникает, когда начинается процесс загрузки аудио/видео файла.
onmessage
– появление сообщения. Событие onmessage возникает, когда сообщение получено через источник события. Объект события для события onmessage поддерживает следующие свойства:
данные – Содержит фактическое сообщение
origin — URL-адрес документа, вызвавшего событие.
LastEventId — идентификатор последнего сообщения, увиденного в потоке событий.
Связанные события:
onopen — происходит, когда открыто соединение с сервером.
onerror – Происходит при возникновении проблемы
Создайте новый объект EventSource и укажите URL-адрес страницы, отправляющей обновления. Каждый раз при получении обновления происходит событие onmessage. Когда происходит событие onmessage, поместите полученные данные в элемент div с id=”myDIV”:
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("myDIV").innerHTML += event.data + "<br>";
};
onmousedown
– нажата клавиша мыши. Обработчик события mousedown, которое возникает, когда будет нажата левая клавиша мыши. Разница с собитием click в том, что click является комбинацией событий mousedown и mouseup. Выполняет код JavaScript, когда возникает событие MouseDown; то есть, когда пользователь нажимает клавишу мыши. Если onMouseDown возвращает false, акция по умолчанию (вход в режим drag, вход в режим selection или активизация гиперссылки) отменяется. Активизация вызывается событием MouseDown на гиперссылке. Если ссылка активизирована, она изменяет свой цвет, указывая на новое состояние. Действие по умолчанию различное: инициация перетаскивания, выделения текста, прокрутки или масштабирования (в сочетании с нажатием колеса при поддержке такового)
Событие onmousedown происходит, когда пользователь нажимает кнопку мыши над элементом HTML. Порядок событий для левой и средней кнопки мыши:
onmousedown
onmouseup
по клику
Порядок событий для правой кнопки мыши:
onmousedown
onmouseup
oncontextmenu
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY- Местонахождение курсора в момент возникновения события MouseDown.
which – Представляет 1 для щелчка левой клавиши мыши и 3 – для щелчка правой клавиши.
modifiers – Содержит список клавиш-модификаторов, нажатых в момент возникновения события MouseDown.
Вызов функции при нажатии кнопки мыши над абзацем:
<p onmousedown="myFunction()">Click the text!</p>
Здесь пользователь может переместить изображение на странице HTML путём перетаскивания его с помощью мыши. Ваш код HTML определяет изображение и позиционирует его в слое с названием container1. В коде JavaScript обработчики событий устанавливают свойства позиционирования container1 при перетаскивании изображения пользователем, создавая анимацию. Атрибут ID элемента P, который содержит изображение, установлен в container1, делая container1 уникальным идентификатором параграфа и изображения. Тэг STYLE создаёт слой для container1 и позиционирует его. Ниже код JavaScript определяет обработчики onMouseDown, onMouseUp и onMouseMove. С использованием таблиц стилей/style sheets, изображение первоначально определено и позиционировано так:
<HEAD>
<STYLE type="text/css">
#container1 {
position:absolute; left:200; top:200}
</STYLE>
</HEAD>
<BODY>
<P ID="container1">
<img src="backgrnd.gif" name="myImage" width=96 height=96>
</P>
</BODY>
В этом коде метод captureEvents захватывает события MouseUp и MouseDown. Функции DRAG_begindrag и DRAG_enddrag соответственно вызываются для обработки этих событий. Если пользователь нажимает левую клавишу мыши, функция DRAG_begindrag стартует, захватывая события MouseMove и сообщая функции DRAG_drag о необходимости их обработки. Затем она присваивает значение свойства pageX события MouseDown свойству DRAG_lastX, значение свойства pageY – свойству DRAG_lastY и true – свойству DRAG_dragging. Функция DRAG_drag вычисляет DRAG_dragging, чтобы гарантировать, что событие MouseMove было захвачено функцией DRAG_begindrag, затем использует метод moveBy для позиционирования объекта и присваивает значения свойствам DRAG_lastX и DRAG_lastY. Когда пользователь отпускает левую клавишу мыши, функция DRAG_enddrag останавливает захват событий MouseMove. DRAG_enddrag затем гарантирует, что никакие другие функции не вызываются, устанавливая onmousemove в Null и DRAG_dragging – в false.
<SCRIPT>
container1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
container1.onmousedown=DRAG_begindrag;
container1.onmouseup=DRAG_enddrag;
var DRAG_lastX, DRAG_lastY, DRAG_dragging;
function DRAG_begindrag(e) {
if (e.which == 1) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=DRAG_drag;
DRAG_lastX=e.pageX;
DRAG_lastY=e.pageY;
DRAG_dragging=true;
return false;
}
else {
/*Здесь какая-нибудь работа по обработке нажатия правой клавиши мыши*/
return true;
}
}
function DRAG_enddrag(e) {
if (e.which == 1) {
window.releaseEvents(Event.MOUSEMOVE);
window.onmousemove=null
DRAG_dragging=false;
return false;
}
else {
/*Здесь какая-нибудь работа по обработке нажатия правой клавиши мыши*/
return true;
}
}
function DRAG_drag(e) {
if (DRAG_dragging) {
/*Эта функция вызывается только в случае захвата MOUSEMOVE*/
moveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);
DRAG_lastX = e.pageX;
DRAG_lastY = e.pageY;
return false;
}
else {
return true;
}
}
</SCRIPT>
onmouseenter
– указатель мыши наведен на элемент. Обработчик события mouseenter, которое возникает, когда курсор мыши попадает в область элемента. В отличие от mouseover событие mouseenter не является всплывающим (“не пузырится”), т.е не возникает, если курсор мышь попадает в дочерний элемент указанного элемента. Событие onmouseenter возникает, когда указатель мыши входит в элемент. Событие onmouseenter часто используется вместе с событием onmouseleave, которое происходит, когда указатель мыши покидает элемент. Событие onmouseenter аналогично событию onmouseover. Разница в том, что событие onmouseenter не всплывает (не распространяется вверх по иерархии документа).
Одно событие mouseenter отправляется каждому элементу иерархии при их вводе. Здесь 4 события отправляются четырём элементам иерархии, когда указатель достигает текста. Одиночное событие наведения мыши mouseover отправляется в самый глубокий элемент дерева DOM, затем оно всплывает в иерархии, пока не будет отменено обработчиком или не достигнет корня. При наличии глубокой иерархии количество отправляемых событий mouseover может быть довольно большим и вызывать значительные проблемы с производительностью. В таких случаях лучше обрабатывать события mouseenter. В сочетании с соответствующим событием mouseleave (которое запускается в элементе, когда мышь покидает область содержимого), событие mouseenter действует очень похоже на псевдокласс CSS :hover.
Вызов функции при наведении указателя мыши на изображение:
<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">
JavaScript:
object.onmouseenter = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mouseenter", myScript);
Этот пример демонстрирует разницу между событиями onmousemove, onmouseenter и mouseover:
<div onmousemove="myMoveFunction()"> <p id="demo1">I will demonstrate onmousemove!</p> </div> <div onmouseenter="myEnterFunction()"> <p id="demo2">I will demonstrate onmouseenter!</p> </div> <div onmouseover="myOverFunction()"> <p id="demo3">I will demonstrate onmouseover!</p> </div>
В следующем тривиальном примере событие mouseenter используется для изменения границы элемента div, когда мышь входит в выделенное ему пространство. Затем он добавляет элемент в список с номером события mouseenter или mouseleave.
<SCRIPT>
var enterEventCount = 0;
var leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");
mouseTarget.addEventListener("mouseenter", (e) => {
mouseTarget.style.border = "5px dotted orange";
enterEventCount++;
addListItem("This is mouseenter event " + enterEventCount + ".");
});
mouseTarget.addEventListener("mouseleave", (e) => {
mouseTarget.style.border = "1px solid #333";
leaveEventCount++;
addListItem("This is mouseleave event " + leaveEventCount + ".");
});
function addListItem(text) {
// Создать новый текстовый узел, используя предоставленный текст
var newTextNode = document.createTextNode(text);
// Создать новый элемент li
var newListItem = document.createElement("li");
// Добавить текстовый узел к элементу li
newListItem.appendChild(newTextNode);
// Добавить вновь созданный элемент списка в список
unorderedList.appendChild(newListItem);
}
<SCRIPT>
<style>
#mouseTarget {
box-sizing: border-box;
width: 15rem;
border: 1px solid #333;
}
</style>
<div id="mouseTarget">
<ul id="unorderedList">
<li>No events yet!</li>
</ul>
</div>
onmouseleave
– указатель мыши покинул элемент. Обработчик события mouseleave, которое возникает, когда курсор мыши покидает область элемента. В отличие от mouseout событие mouseenter не является всплывающим (“не пузырится”), т.е не возникает, если курсор мышь попадает в дочерний элемент указанного элемента. Событие onmouseleave возникает, когда указатель мыши покидает элемент. Событие onmouseleave часто используется вместе с событием onmouseenter, которое происходит, когда указатель мыши входит в элемент. Событие onmouseleave аналогично событию onmouseout. Разница в том, что событие onmouseleave не всплывает (не распространяется вверх по иерархии документов).
Событие mouseleave срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента. mouseleave и mouseout схожи, но отличаются тем, что mouseleave не всплывает, а mouseout всплывает. Это значит, что mouseleave срабатывает, когда курсор выходит за границы элемента и всех его дочерних элементов, в то время как mouseout срабатывает, когда курсор покидает границы элемента или одного из его дочерних элементов (даже если курсор все ещё находится в пределах элемента).
Вызов функции при перемещении указателя мыши за пределы изображения:
<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">
JavaScript:
object.onmouseleave = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mouseleave", myScript);
Этот пример демонстрирует разницу между событиями onmousemove, onmouseleave и onmouseout:
<div onmousemove="myMoveFunction()"> <p id="demo1">I will demonstrate onmousemove!</p> </div> <div onmouseleave="myLeaveFunction()"> <p id="demo2">I will demonstrate onmouseleave!</p> </div> <div onmouseout="myOutFunction()"> <p id="demo3">I will demonstrate onmouseout!</p> </div>
В документации mouseout есть пример, иллюстрирующий разницу между mouseout и mouseleave. В следующем примере показано, как использовать mouseout для имитации принципа делегирования события mouseleave.
<ul id="test">
<li>
<ul class="leave-sensitive">
<li>item 1-1</li>
<li>item 1-2</li>
</ul>
</li>
<li>
<ul class="leave-sensitive">
<li>item 2-1</li>
<li>item 2-2</li>
</ul>
</li>
</ul>
<script>
var delegationSelector = ".leave-sensitive";
document.getElementById("test").addEventListener(
"mouseout",
function (event) {
var target = event.target,
related = event.relatedTarget,
match;
// search for a parent node matching the delegation selector
while (
target &&
target != document &&
!(match = matches(target, delegationSelector))
) {
target = target.parentNode;
}
// exit if no matching node has been found
if (!match) {
return;
}
// loop through the parent of the related target to make sure that it's not a child of the target
while (related && related != target && related != document) {
related = related.parentNode;
}
// exit if this is the case
if (related == target) {
return;
}
// the "delegated mouseleave" handler can now be executed
// change the color of the text
target.style.color = "orange";
// reset the color after a small amount of time
setTimeout(function () {
target.style.color = "";
}, 500);
},
false,
);
// function used to check if a DOM element matches a given selector
// the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
function matches(elem, selector) {
// the matchesSelector is prefixed in most (if not all) browsers
return elem.matchesSelector(selector);
}
</script>
onmousemove
– указатель мыши перемешен над элементом. Обработчик события mousemove, которое возникает, когда указатель мыши движется над элементом.
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY – Местонахождение курсора в момент возникновения события MouseMove.
JavaScript:
object.onmousemove = function(){myScript};
JavaScript, using the addEventListener() method:
object.addEventListener("mousemove", myScript);
Вызовите функцию при наведении указателя мыши на элемент div:
<div onmousemove="myFunction()">Move the cursor over me</div>
В следующем примере используются события mousedown, mousemove и mouseup, позволяющие пользователю рисовать на холсте HTML. Его функционал прост: толщина линии установлена равной 1, а цвет всегда черный. Когда страница загружается, создаются константы myPics и context для хранения ссылки на холст и 2D-контекст, который мы будем использовать для рисования. Рисование начинается, когда срабатывает событие mousedown. Сначала мы сохраняем координаты x и y указателя мыши в переменных x и y, а затем устанавливаем для isDrawing значение true. Когда указатель мыши перемещается по странице, срабатывает событие mousemove. Если isDrawing имеет значение true, обработчик событий вызывает функцию drawLine, чтобы нарисовать линию от сохраненных значений x и y до текущего местоположения. Когда функция drawLine() возвращает значение, мы корректируем координаты, а затем сохраняем их в координатах x и y. Событие mouseup рисует последний сегмент линии, устанавливает x и y равными 0 и останавливает дальнейшее рисование, устанавливая для isDrawing значение false.
<script>
// When true, moving the mouse draws on the canvas
let isDrawing = false;
let x = 0;
let y = 0;
const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");
// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
// Add the event listeners for mousedown, mousemove, and mouseup
myPics.addEventListener("mousedown", (e) => {
x = e.offsetX;
y = e.offsetY;
isDrawing = true;
});
myPics.addEventListener("mousemove", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = e.offsetX;
y = e.offsetY;
}
});
window.addEventListener("mouseup", (e) => {
if (isDrawing) {
drawLine(context, x, y, e.offsetX, e.offsetY);
x = 0;
y = 0;
isDrawing = false;
}
});
function drawLine(context, x1, y1, x2, y2) {
context.beginPath();
context.strokeStyle = "black";
context.lineWidth = 1;
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
context.closePath();
}
</script>
<style>
canvas {
border: 1px solid black;
width: 560px;
height: 360px;
}
</style>
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
onmouseout
– указатель мыши перемещается из элемента. Обработчик события mouseout, которое возникает, когда указатель мыши выходит за пределы элемента. Выполняет код JavaScript, когда возникает событие MouseOut; то есть каждый раз выходе указателя мыши за пределы области (в клиентской карте изображений) или гиперссылки. Если указатель мыши переходит из одной области клиентской карты изображений в другую, Вы получите сначала onMouseOut для первой области, а затем onMouseOver – для второй области. Тэги Area, использующие onMouseOut, обязаны иметь атрибут HREF в тэге AREA. Необходимо возвратить true в обработчике события, если хотите установить свойства status или defaultStatus с помощью onMouseOver.
Событие onmouseout возникает, когда указатель мыши выходит за пределы элемента. Событие onmouseout часто используется вместе с событием onmouseover, которое возникает при наведении указателя на элемент. Событие onmouseout похоже на событие onmouseleave. Разница в том, что событие onmouseleave не всплывает (не распространяется вверх по иерархии документов).
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY – Местонахождение курсора в момент возникновения события MouseOut
Вызов функции при перемещении указателя мыши за пределы изображения:
<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">
Следующий пример иллюстрирует разницу между событиями mouseout и mouseleave. Событие mouseleave добавляется в ul, чтобы окрашивать список в фиолетовый цвет всякий раз, когда мышь выходит из ul. mouseout добавляется в список, чтобы окрасить целевой элемент в оранжевый цвет, когда мышь выходит из него. Когда вы попробуете это, вы обнаружите, что mouseout передается отдельным элементам списка, а mouseleave — всему списку, благодаря иерархии элементов и тому факту, что элементы списка скрывают базовый ul.
<script>
const test = document.getElementById("test");
// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener(
"mouseleave",
(event) => {
// highlight the mouseleave target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 1000);
},
false,
);
// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener(
"mouseout",
(event) => {
// highlight the mouseout target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false,
);
</script>
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
onmouseover
– указатель мыши перемещается по элементу. Обработчик события mouseover, которое возникает, когда когда курсор мышки наведён на элемент. Событие onmouseover происходит, когда указатель мыши входит в элемент. Событие onmouseover часто используется вместе с событием onmouseout, которое происходит, когда указатель мыши покидает элемент. Событие onmouseover аналогично событию onmouseenter. Разница в том, что событие onmouseenter не всплывает (не распространяется вверх по иерархии документа). Событие mouseover вызывается для элемента, когда указательное устройство (например, мышь или трекпад) используется для перемещения курсора на элемент или один из его дочерних элементов.
Вызов функции при наведении указателя мыши на изображение:
<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
По умолчанию значение HREF якоря отображается в статусной строке в нижней части браузера, когда пользователь помещает указатель мыши над якорем. В следующем примере onMouseOver выводит специальное сообщение “Click this if you dare.”
<A HREF="http://home.netscape.com/" onMouseOver="window.status='Click this if you dare!'; return true">Click me</A>
onmouseup
– кнопка мыши отпускается над элементом. Обработчик события mouseup, которое возникает, когда отпускается нажатая кнопка мыши на элементе. Если onMouseUp возвращает false, акция по умолчанию отменяется. Например, если onMouseUp возвращает false при активной гиперссылке, ссылка не включается. Итак, если MouseUp возникает при неактивной гиперссылке (возможно, в том случае, когда onMouseDown возвращает false), ссылка не включается. Активизация вызывается событием MouseDown на ссылке. Если ссылка активна, она изменяет свой цвет для отражения нового состояния. Событие onmouseup возникает, когда кнопка мыши отпускается над элементом.
Событие mouseup вызывается для элемента, когда кнопка на указывающем устройстве (например, мыши или трекпаде) отпускается, когда указатель находится внутри него. События mouseup являются противоположностью событий mousedown.
Порядок событий для левой и средней кнопки мыши:
onmousedown
onmouseup
по клику
Порядок событий для правой кнопки мыши:
onmousedown
onmouseup
oncontextmenu
type – Указывает тип события.
target – Указывает объект, которому событие первоначально было выслано.
layerX, layerY, pageX, pageY, screenX, screenY – Местонахождение курсора в момент возникновения события MouseUp.
which – Представляет 1 для левой клавиши и 3 – для правой клавиши мыши.
modifiers – Содержит список клавиш-модификаторов, нажатых в момент возникновения события MouseUp.
Вызов функции при отпускании кнопки мыши над абзацем:
<p onmouseup="mouseUp()">Click the text!</p>
onmousewheel (onwheel)
– использовано колесико мыши. Обработчик события wheel, которое возникает, когда на элементе прокручивается вперед или назад колесо мыши. Событие onwheel происходит, когда колесо мыши наводится на элемент. Событие onwheel также возникает, когда пользователь прокручивает страницу с помощью сенсорной панели. Это событие заменяет нестандартное устаревшее событие колеса мыши. Не путайте событие колеса с событием прокрутки. Событие колеса не обязательно отправляет событие прокрутки. Например, элемент может быть вообще непрокручиваемым. Действия масштабирования с помощью колеса или трекпада также активируют события колеса. Событие прокрутки не обязательно запускается событием колеса. Элементы также можно прокручивать с помощью клавиатуры, перетаскивания полосы прокрутки или с помощью JavaScript.
Даже если событие колеса запускает прокрутку, значения delta* в событии колеса не обязательно отражают направление прокрутки содержимого. Поэтому не полагайтесь на свойства delta* события колеса, чтобы получить направление прокрутки. Вместо этого обнаруживайте изменения значений ScrollLeft и ScrollTop цели в событии прокрутки.
Событие «Колесо» можно отменить. Если событие отменено, прокрутка или масштабирование не выполняются. Это может вызвать проблемы с производительностью, поскольку браузеру приходится ждать обработки каждого события колеса, прежде чем фактическая прокрутка содержимого. Этого можно избежать, установив пассивное: true при вызове addEventListener(), что может привести к тому, что браузер будет генерировать неотменяемые события колеса.
Когда пользователь прокручивает колесо мыши над элементом div, измените его размер шрифта:
document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
this.style.fontSize = "35px";
}
В этом примере показано, как масштабировать элемент с помощью колеса мыши (или другого указывающего устройства).
<script>
function zoom(event) {
event.preventDefault();
scale += event.deltaY * -0.01;
// Restrict scale
scale = Math.min(Math.max(0.125, scale), 4);
// Apply scale transform
el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;
</script>
<style>
body {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
div {
width: 105px;
height: 105px;
background: #cdf;
padding: 5px;
}
</style>
<div>Scale me with your mouse wheel.</div>
onoffline
– браузер запущен в оффлайн режиме. Событие onoffline происходит, когда браузер начинает работать в автономном режиме. Событие onoffline является противоположностью события ononline.
Вызовите функцию, когда браузер начнет работать в автономном режиме:
<body onoffline="myFunction()">
ononline
– браузер запущен в онлайн режиме. Событие ononline возникает, когда браузер начинает работать онлайн. Событие online является противоположностью событию onoffline.
Вызовите функцию, когда браузер начнет работать онлайн:
<body ononline="myFunction()">
onpagehide
– пользователь переходит от страницы. Событие onpagehide происходит, когда пользователь уходит с веб-страницы. Есть несколько способов уйти со страницы. Например. нажав на ссылку, обновив страницу, отправив форму, закрыв окно браузера и т. д. Событие onpagehide иногда используется вместо события onunload, поскольку событие onunload приводит к тому, что страница не кэшируется. Чтобы узнать, загружена ли страница непосредственно с сервера или она кэширована, вы можете использовать свойство persisted объекта PageTransitionEvent. Это свойство возвращает true, если страница кэшируется браузером, и false в противном случае.
Вызовите функцию, когда пользователь уходит с веб-страницы:
<body onpagehide="myFunction()">
onpageshow
– пользователь переходит на страницу. Событие onpageshow происходит, когда пользователь переходит на веб-страницу. Событие onpageshow похоже на событие onload, за исключением того, что оно происходит после события onload при первой загрузке страницы. Кроме того, событие onpageshow происходит каждый раз при загрузке страницы, тогда как событие onload не происходит при загрузке страницы из кэша. Чтобы узнать, загружена ли страница непосредственно с сервера или она кэширована, вы можете использовать свойство persisted объекта PageTransitionEvent. Это свойство возвращает true, если страница кэшируется браузером, и false в противном случае
Вызовите функцию, когда пользователь переходит на веб-страницу:
<body onpageshow="myFunction()">
onpaste
– выполнена вставка контента. Событие onpaste возникает, когда пользователь вставляет некоторый контент в элемент. Событие onpaste чаще всего используется для элементов input с type=”text”. Событие вставки API буфера обмена вызывается, когда пользователь инициирует действие «вставить» через пользовательский интерфейс браузера. Если курсор находится в редактируемом контексте (например, в textarea или элементе с атрибутом contenteditable, для которого установлено значение true), то действием по умолчанию является вставка содержимого буфера обмена в документ в позиции курсора. Обработчик этого события может получить доступ к содержимому буфера обмена, вызвав метод getData() для свойства clipboardData события. Чтобы переопределить поведение по умолчанию (например, для вставки других данных или преобразования содержимого буфера обмена), обработчик событий должен отменить действие по умолчанию с помощью event.preventDefault(), а затем вставить нужные данные вручную. Можно создать и отправить событие синтетической вставки, но это не повлияет на содержимое документа. Это событие всплывает, его можно отменить и оно составлено. Используется только для полей ввода.
Вызовите функцию при вставке текста в элемент input:
<input type="text" onpaste="myFunction()" value="Paste something here">
Вызовите функцию при вставке текста в элемент p. (Обратите внимание, что для contenteditable установлено значение «true»):
<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.</p>
Пример
<script>
const target = document.querySelector("div.target");
target.addEventListener("paste", (event) => {
event.preventDefault();
let paste = (event.clipboardData || window.clipboardData).getData("text");
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
selection.collapseToEnd();
});
<script>
<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>
onpause
– приостановка воспроизведения. Обработчик события pause, которое возникает, когда проигрывание аудио/видео приостановлено пользователем или программными средствами. Событие onpause происходит, когда аудио/видео приостанавливается. Событие onpause также происходит, когда аудио/видео достигло конца.
Вызов функции, когда видео было приостановлено:
<video onpause="myFunction()">
onplay
– начало воспроизведения. Обработчик события play, которое возникает, когда было запущено воспроизведение аудио/видео файла.
Вызовите функцию, когда видео начало воспроизводиться:
<video onplay="myFunction()">
onplaying
– воспроизведения файла. Обработчик события playing, которое возникает, когда началось воспроизведение аудио/видео файла. Событие onplaying происходит, когда начинается воспроизведение аудио/видео. Событие onplaying также происходит, когда аудио/видео возобновляется после приостановки или буферизации.
Вызов функции при запуске видео:
<video onplaying="myFunction()">
onprogress
– получение метаданных файла. Обработчик события progress, которое возникает, когда загружается указанный аудио/видео файл с сервера. Событие onprogress возникает, когда браузер загружает аудио или видео.
Вызов функции при загрузке видео:
<video onprogress="myFunction()">
onratechange
– изменение скорости воспроизведения. Обработчик события ratechange, которое возникает, когда скорость проигрывания аудио/видео изменяется (например, когда пользователь переключается на замедленный или ускоренный режим воспроизведения). Событие onratechange происходит при изменении скорости воспроизведения мультимедиа (например, когда пользователь переключается в режим замедленного или ускоренного воспроизведения). Это событие вызывается свойством воспроизведенияRate объекта Audio/Video, которое устанавливает или возвращает текущую скорость воспроизведения аудио/видео.
Вызовите функцию при изменении скорости воспроизведения видео:
<video onratechange="myFunction()">
onreset
– выполнен сброс данных. Обработчик события reset, которое возникает при очистке формы, происходящей при нажатии на кнопку Reset. Выполняет код JavaScript, когда возникает событие reset; то есть, когда пользователь восстанавливает значения элементов формы (щёлкая кнопку Reset).
Вызов функции при сбросе формы:
<form onreset="myFunction()"> Enter name: <input type="text"> <input type="reset"> </form>
Следующий пример выводит объект Text со значением по умолчанию “CA” и кнопкой reset. Если пользователь вводит аббревиатуру названия штата в объект Text и щёлкает на кнопке reset, восстанавливается оригинальное значение “CA”. Обработчик onReset формы выводит сообщение, указывающее, что восстановлены значения по умолчанию.
<FORM NAME="form1" onReset="alert('Defaults have been restored.')">
State:
<INPUT TYPE="text" NAME="state" VALUE="CA" SIZE="2"><P>
<INPUT TYPE="reset" VALUE="Clear Form" NAME="reset1">
</FORM>
onresize
– изменение размера элемента. Выполняет код JavaScript, когда возникает событие resize; то есть, когда пользователь или скрипт изменили размер окна или фрэйма. Событие onresize происходит, когда размер окна браузера был изменен. Совет: Чтобы получить размер элемента, используйте свойства clientWidth, clientHeight, InnerWidth, InnerHeight, OuterWidth, OuterHeight, OffsetWidth и/или OffsetHeight. Этот обработчик высылается после завершения отображения HTML с новыми размерами внутреннего окна. Это позволяет позиционировать элементы и именованные якоря так, чтобы они имели свои запрашиваемые окончательные размеры и местоположение, свойства SRC изображений могли восстанавливаться динамически и т.д.
Вызовите функцию при изменении размера окна браузера:
<body onresize="myFunction()">
Использование метода addEventListener() для прикрепления события «изменения размера» к объекту окна.
window.addEventListener("resize", myFunction);
Здесь функция open_now создаёт окно myWin и захватывает события Resize. Обработчик onResize вызывает функцию alert_me, которая выводит сообщение, если пользователь изменяет размер окна myWin.
function open_now(){
var myWin;
myWin=window.open("","displayWin","width=400,height=300,resizable=yes,
menubar=no,location=no,alwaysRaised=yes");
var text="<html><head><title>Test</title></head>"
+"<body bgcolor=white><h1>Please resize me</h1></body>"
+"</html>";
myWin.document.write(text);
myWin.captureEvents(Event.RESIZE);
myWin.onresize=alert_me;
}
function alert_me(){
alert("You resized me! \nNow my outer width: " + this.outerWidth +
"\n and my outer height: " +this.outerHeight);
this.focus();
}
onscroll
– прокрутка содержимого элемента. Событие onscroll возникает при прокрутке полосы прокрутки элемента. Совет: используйте свойство стиля переполнения CSS, чтобы создать полосу прокрутки для элемента. Событие прокрутки срабатывает, когда элемент прокручивается. Чтобы определить завершение прокрутки, посмотрите событие прокрутки элемента.
Вызовите функцию при прокрутке элемента div:
<div onscroll="myFunction()">
Переключение между именами классов в разных положениях прокрутки. Когда пользователь прокручивает страницу вниз на 50 пикселей от верхнего края страницы, к элементу добавляется имя класса «test» (и удаляется при повторной прокрутке вверх).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Вставьте элемент, когда пользователь прокрутил страницу вниз на 350 пикселей (добавьте класс слайдUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
В следующем примере показано, как использовать событие прокрутки, чтобы определить, когда пользователь прокручивает элемент:
<script>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.addEventListener("scroll", (event) => {
output.textContent = "Scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
});
</script>
<div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>
В следующем примере показано, как использовать свойство обработчика событий onscroll для определения того, когда пользователь прокручивает:
<script>
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.onscroll = (event) => {
output.textContent = "Element scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
};
</script>
<div id="scroll-box" style="overflow: scroll; height: 100px; width: 100px; float: left;">
<p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>
onsearch
– выполнен поиск. Событие onsearch происходит, когда пользователь нажимает клавишу «ENTER» или кнопку «x» в элементе input с type=”search”.
Вызов функции при отправке поиска:
<input type="search" onsearch="myFunction()">
onseeked
– поиск закончился. Обработчик события seeked, которое возникает, когда пользователь завершил перемещение в новую позицию воспроизведения аудио/видео. Событие onseeked происходит, когда пользователь ищет новую позицию в медиа.
Вызовите функцию, когда пользователь ищет новую позицию в видео:
<video onseeked="myFunction()">
Этот пример демонстрирует разницу между событием onseeking и событием onseeked:
<video onseeking="myFunction()" onseeked="mySecondFunction()">
Использование свойства currentTime объекта Video для отображения текущей позиции во время воспроизведения, когда пользователь закончил перемещение/переход к новой позиции:
// Get the video element:
const video = document.getElementById("myVideo");
// Attach a seeked event to the video element:
video.addEventListener("seeked", myFunction);
// Function to display the time position of the playback:
function myFunction() {
document.getElementById("demo").innerHTML = video.currentTime;
}
onseeking
– поиск активен. Обработчик события seeking, которое возникает, когда пользователь начинает перемещение в новую позицию воспроизведения аудио/видео. Событие onseeking происходит, когда пользователь начинает искать новую позицию в медиа.
Вызовите функцию, когда пользователь начинает перемещаться/переходить на новую позицию в видео:
<video onseeking="myFunction()">
onselect
– выбор некоторого текста или значения. Обработчик события select, которое, когда пользователь выделяет какой-нибудь текст внутри элемента с помощью мыши или клавиатуры. Событие onselect происходит после того, как в элементе выделен некоторый текст. Событие onselect чаще всего используется для элементов input type=”text” или textarea.
Здесь onSelect используется в Text-объекте valueField для вызова функции selectState.
<INPUT TYPE="text" VALUE="" NAME="valueField" onSelect="selectState()">
Вызовите функцию, когда выделен какой-либо текст:
<input type="text" onselect="myFunction()">
Использование метода select() входного текстового объекта HTML DOM для выбора некоторого содержимого текстового поля. Когда это происходит, срабатывает событие onselect, которое запускает функцию оповещения.
// Select the contents of a text field
function mySelectFunction() {
document.getElementById("myText").select();
}
// Alert some text when the text in the text field has been selected
function myAlertFunction() {
alert("You selected some text!");
}
onshow
– показ элемента. Обработчик события show, которое возникает, когда элемент menu выводится, как контекстное меню. Событие onshow возникает, когда элемент menu отображается как контекстное меню.
Вызовите функцию, когда элемент menu отображается как контекстное меню:
<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!
<menu type="context" id="mymenu" onshow="myFunction()">
<menuitem label="Refresh" onclick="window.location.reload();"></menuitem>
</menu>
</div>
onstalled
– браузер не может получить мультимедийные данные по любой причине.Обработчик события stalled, которое возникает, когда браузер пытается получить мультимедийные данные, но они не доступны. Событие onstalled возникает, когда браузер пытается получить недоступные мультимедийные данные.
Вызовите функцию, когда браузер пытается получить недоступные медиаданные:
<video onstalled="myFunction()">
onsubmit
– подтверждение отправки данных формы. Обработчик события submit, которое возникает при отправке формы. Выполняет код JavaScript, когда возникает событие submit; то есть, когда пользователь отправляет форму на сервер. Можно использовать onSubmit для предотвращения отправки формы; для этого поместите оператор return, возвращающий false, в этот обработчик события. Любые другие значения разрешают отправку формы. При отсутствии оператора return форма будет отправлена.
Здесь onSubmit вызывает функцию validate для вычисления отправляемых данных. Если данные верны, форма отправляется; иначе форма не отправляется.
<FORM onSubmit="return validate(this)"> ... </FORM>
Вызов функции при отправке формы:
<form onsubmit="myFunction()"> Enter name: <input type="text"> <input type="submit"> </form>
onsuspend
– остановка извлечения метаданных. Обработчик события suspend, которое возникает, когда получение данных медиа файла прекращается, до окончания полной загрузки по любой причине. Событие onsuspend возникает, когда браузер не получает мультимедийные данные. Событие onsuspend возникает, когда загрузка предотвращается или приостанавливается.
Вызовите функцию, когда браузер не получает медиаданные:
<video onsuspend="myFunction()">
ontimeupdate
– изменение позиции (времени) воспроизведения файла, то есть перемотка файла. Обработчик события timeupdate, которое возникает, когда позиция воспроизведения аудио/видео изменилась (например, когда пользователь выбрал точку воспроизведения на много дальше от текущей). Событие ontimeupdate возникает при изменении времени воспроизведения мультимедиа. Событие ontimeupdate происходит во время воспроизведения мультимедиа. Событие ontimeupdate возникает, когда пользователь перемещает позицию воспроизведения.
Вызовите функцию, когда время воспроизведения изменилось:
<video ontimeupdate="myFunction()">
Использование свойства currentTime для установки текущей позиции воспроизведения на 5 секунд:
document.getElementById("myVideo").currentTime = 5;
ontoggle
– пользователь открывает или закрывает элемент detailsю Обработчик события toggle, которое возникает, когда пользователь открывает или закрывает элемент details. Событие ontoggle происходит, когда пользователь открывает или закрывает элемент details. Элемент details указывает дополнительные сведения, которые пользователь может просмотреть или скрыть по требованию.
Вызовите функцию при открытии или закрытии элемента details:
<details ontoggle="myFunction()">
onunload
– загрузка выполнена, после чего произошло закрытие документа.Событие onunload происходит после выгрузки страницы (или закрытия окна браузера). onunload происходит, когда пользователь уходит со страницы (нажимая на ссылку, отправляя форму, закрывая окно браузера и т. д.). Примечание. Событие onunload также запускается, когда пользователь перезагружает страницу (и событие onload). Используйте onUnload с тэгами BODY или FRAMESET, например, BODY onUnload=”…”. Относительно фрэймов и набора фрэймов – обработчик onUnload фрэйма (помещённый в тэг BODY) появляется до появления обработчика onUnload набора фрэймов (помещённого в тэг FRAMESET).
Вызовите функцию, когда пользователь выгружает документ:
<body onunload="myFunction()">
Здесь onUnload вызывает функцию cleanUp для выполнения некоторого процессинга при окончании работы, когда пользователь выходит из страницы (закрывает её):
<BODY onUnload="cleanUp()">
onvolumechange
– громкость изменена.Обработчик события volumechange, которое возникает при изменении значения громкости звука (включая полное отключение звука). Событие onvolumechange возникает при изменении тома носителя. Событие onvolumechange происходит, когда громкость увеличивается или уменьшается. Событие onvolumechange происходит, когда звук отключен или включен.
Вызов функции при изменении громкости видео:
<video onvolumechange="myFunction()">
Использование свойства Volume для установки громкости:
document.getElementById("myVideo").volume = 0.2;
onwaiting
– ожидание восстановления воспроизведения. Обработчик события waiting, которое возникает, когда медиа файл остановлен, но ожидается возобновление запуска (например, когда файл делает паузу для буферизации оставшихся данных). Событие onwaiting возникает, когда медиа должен дождаться следующего кадра.
Вызовите функцию, когда видео останавливается, поскольку необходимо буферизовать следующий кадр:
<video onwaiting="myFunction()">
