Для типов событий пользователя наиболее часто используются мышь, клавиатура и браузер.
1. Мероприятие мыши:
Все события мыши часто используются. Следующие примеры используются для тестирования различных событий мыши.
Кода -копия выглядит следующим образом:
<script language = "javascript">
Функциональная ручка (oevent) {
var disp = document.getElementbyId ("display");
if (window.event) oevent = window.event; // обрабатывать совместимость и получить объект
disp.innerhtml + = "Имя события мыши:" + oevent.type + "<br>";
}
window.onload = function () {
var op = document.getElementbyId ("box");
op.onmousedown = handle;
op.onmouseover = handle;
op.onmouseup = handle;
op.onmouseout = handle;
op.onclick = handle;
op.ondblclick = handle;
}
</script>
<div>
<div id = "box">
Содержание коробки
</div>
<p id = "display"> </p>
</div>
Тест на кнопку клавиш мыши (с эталонной таблицей)
Кода -копия выглядит следующим образом:
<script language = "javascript">
Function TestClick (oevent) {
var Odiv = document.getElementById ("Display");
if (window.event)
oevent = window.event;
Odiv.innerhtml += oevent.button; // Вывод значения кнопки
}
document.onmousedown = testclick;
window.onload = testclick; // тест не нажал никаких ключей
</script>
<div>
<p id = "display"> </p>
</div>
2. События клавиатуры
Существует не так много типов событий клавиатуры, только три типа событий.
Keydown (нажмите клавишу, нажмите и удерживайте его, продолжит запускать)
Keypress (запускается при нажатии клавиши и генерируется символ, то есть он игнорирует функциональные клавиши, такие как Shift, Alt, Ctrl)
Keyup (запускается при выпуске ключа)
Пример прослушивания клавиатуры:
Кода -копия выглядит следующим образом:
<script language = "javascript">
Функциональная ручка (oevent) {
if (window.event) oevent = window.event; // обрабатывать совместимость и получить объект события
var Odiv = document.getElementById ("Display");
Odiv.innerhtml + = oevent.type + ""; // Имя события вывода
}
window.onload = function () {
var otextarea = document.getElementById ("textIn");
otextarea.onkeydown = handle; // слушать все события клавиатуры
otextarea.onkeyup = handle;
otextarea.onkeypress = handle;
}
</script>
<div>
<textarea Rows = "4" Cols = "50" ID = "TextIn">
</textarea>
<p id = "display"> </p>
</div>
Для клавиатуры самая важная вещь - это не имя события, а то, что нажата. Поскольку IE не имеет свойства Charcode, Key -код такой же, как и стандартный код ключа DOM, только когда происходят события Keydown и Keyup.
В событиях Keypress используется следующий метод.
Кода кода выглядит следующим образом: oevent.charcode = (oevent.type == "keypress")? Oevent.keycode :();
Причина, по которой KeyCode не принят, заключается в том, что он представляет клавиши клавиатуры, а не выходные символы. Следовательно, вывод «A» и «a», ключевой код эквивалентен, а Charcode отличается символами.
Кроме того, в KeyPress значение ключевого кода стандартного DOM всегда 0;
Пример: связанные свойства событий клавиатуры:
Кода -копия выглядит следующим образом:
<script language = "javascript">
Функциональная ручка (oevent) {
var Odiv = document.getElementById ("Display");
if (window.event) oevent = window.event; // обрабатывать совместимость и получить объект события
// Установить значение IE Charcode
oevent.charcode = (oevent.type == "keypress")? oevent.keycode: 0;
Odiv.innerhtml + = oevent.type + ": charcode" + oevent.charcode + "KeyCode" + oevent.keycode + "<br>"; // выходной тест
}
window.onload = function () {
var otextarea = document.getElementById ("textIn");
otextarea.onkeydown = handle; // слушать все события клавиатуры
otextarea.onkeypress = handle;
}
</script>
<div>
<textarea Rows = "4" Cols = "50" ID = "TextIn">
</textarea>
<p id = "display"> </p>
</div>
3. HTM событие
Для браузеров различные HTML -события имеют свои собственные события, и некоторые из них часто подвергаются воздействию пользователям, таким как загрузка, ошибка, выбор и т. Д. Обычно используемые HTML -события следующие:
Событие нагрузки является одним из часто используемых событий, поскольку структура DOM не была построена до завершения загрузки страницы, поэтому не может быть связанных операций.
Назначьте нагрузку на объекты окна, событие Unload эквивалентно методам Onload и Ounload, помеченным <body>.