событиях страницы
: в каком порядке загружаются HTML-страницы?
Ответ: Страница загружается сверху вниз в том порядке, в котором написан код.
Проблемы, которые могут возникнуть : Если для работы с элементами DOM до загрузки страницы используется JavaScript, возникнут синтаксические ошибки.
Решение . События страницы могут изменить время выполнения кода JavaScript.
События фокуса
В веб-разработке события фокуса в основном используются для функций проверки формы и являются одними из наиболее часто используемых событий.
Например, изменение стиля текстового поля, когда текстовое поле получает фокус, проверка данных, введенных в текстовое поле, когда текстовое поле теряет фокус и т. д.
Чтобы каждый мог лучше понять, как использовать события фокуса, ниже приведена демонстрация, позволяющая проверить, пусты ли имя пользователя и пароль.
Реализация кода
<!DOCTYPE html>
<голова>
<мета-кодировка="UTF-8">
<title>Убедитесь, что имя пользователя и пароль пусты</title>
<стиль>
тело {фон: #ddd;}
.box{background:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
.btn{ширина:180 пикселей;высота:40 пикселей;фон:#3388ff;граница:1px сплошной #fff;цвет:#fff;размер шрифта:14px;}
.ipt{ширина:260px;padding:4px 2px;}
.tips{ширина:440 пикселей;высота:30 пикселей;поля:5 пикселей авто;фон:#fff;цвет:красный;граница:1px сплошной #ccc;дисплей:нет;line-height:30px;padding-left:20px;font- размер: 13 пикселей;}
</стиль>
</голова>
<тело>
<p id="tips" class="tips"></p>
<p класс="коробка">
<p><label>Имя пользователя: <input id="user" class="ipt" type="text"></label></p>
<p><label>Пароль: <input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">Войти</button></p>
</p>
<скрипт>
window.onload = функция() {
addBlur($('user')); // Проверяем, является ли значение пустым после того, как элемент с идентификатором пользователя теряет фокус. addBlur($('pass')); идентификатор прохода теряет фокус. Является ли значение пустым};
function $(obj) { // Получаем указанный элемент по идентификатору return document.getElementById(obj);
}
function addBlur(obj) { // Добавляем событие потери фокуса для указанного элемента obj.onblur = function() {
isEmpty (это);
};
}
function isEmpty(obj) { // Проверяем, пуста ли форма if (obj.value === '') {
$('tips').style.display = 'блок';
$('tips').innerHTML = 'Примечание: входное содержимое не может быть пустым';
} еще {
$('советы').style.display = 'нет';
}
}
</скрипт>
</тело>
</html> События мыши
События мыши — наиболее часто используемые события в веб-разработке.
Например, переключение содержимого, отображаемого на панели вкладок, при наведении указателя мыши на перетаскивание поля состояния для регулировки положения его отображения и т. д. Все эти общие эффекты веб-страниц используют события мыши.
При разработке проектов часто задействуются некоторые часто используемые атрибуты мыши, которые используются для получения информации о текущем положении мыши.
Атрибуты pageX и pageY несовместимы с браузерами IE6–8. Поэтому при разработке проекта требуется совместимость с браузерами IE6~8.
Координаты мыши в документе равны координатам мыши в текущем окне плюс длина текста, прокручиваемого полосой прокрутки.
Чтобы каждый мог лучше понять использование событий мыши, давайте в качестве примера возьмем круговое отображение положения щелчка мыши.
Реализация кода
<!DOCTYPE html>
<голова>
<мета-кодировка="UTF-8">
<title>Показать положение щелчка мыши</title>
<стиль>
.mouse{position:absolute;background:#ffd965;ширина:40px;высота:40px;border-radius:20px;}
</стиль>
</голова>
<тело>
<p id="mouse" class="mouse"></p>
<скрипт>
вар мышь = document.getElementById('мышь');
//Требование: когда мышь щелкнет по странице, получите позицию щелчка и отобразите маленькую точку document.onclick = function(event) {
// Получаем совместимую обработку объекта события var event = event || window.event;
// Положение мыши на странице var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
вар pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Вычисляем позицию, в которой должен отображаться <p> var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight/2;
// Отображение <p> в месте, по которому щелкнули мышью
mouse.style.display = 'блок';
mouse.style.left = targetX + 'px';
mouse.style.top = targetY + 'px';
};
</скрипт>
</тело>
</html> [Дело] Эффекты перетаскивания мышью
Положение поля (левое и верхнее значения) = положение мыши (левое и верхнее значения) — расстояние между мышью и полем (левое и верхнее значения) при нажатии мыши.
Приведите пример
Идеи реализации кода :
① Напишите HTML и спроектируйте всплывающие окна для реализации эффектов перетаскивания.
② Добавьте событие mousedown и его обработчик на панель перетаскивания.
③ Обработка событий движения мыши для достижения эффектов перетаскивания мышью.
④ Обработайте событие отпускания кнопки мыши, чтобы всплывающее окно больше не перемещалось после отпускания кнопки мыши.
Реализация кода
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Перетаскивание мышью</title>
<стиль>
тело{маржа:0}
.box{width:400px;height:300px;border:5px Solid #eee;box-shadow:2px 2px 2px 2px #666;position:absolute;top:30%;left:30%}
.hd{ширина:100%;высота:25 пикселей;цвет фона:#7c9299;border-bottom:1px сплошной #369;line-height:25px;цвет:#fff;курсор:переместить}
#box_close{float:right;курсор:указатель}
</стиль>
</голова>
<тело>
<p id="box" class="box">
<p id="drop" class="hd">
Регистрационная информация (можно перетаскивать)
<span id="box_close">【Закрыть】</span>
</p>
<p class="bd"></p>
</p>
<скрипт>
// Получаем перетаскиваемый блок и перетаскиваем полосу var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // Нажмите мышью на полосу перетаскивания, чтобы перетащить поле var event = event || window.event;
// Получаем позицию при нажатии мыши var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
вар pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Вычисляем позицию щелчка мыши в поле var spaceX = pageX - box.offsetLeft;
вар spaceY = pageY - box.offsetTop;
document.onmousemove = function(event) { // Получаем позицию мыши при ее перемещении. Весь блок следует за позицией мыши var event = event || window.event;
// Получаем позицию мыши после перемещения var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// Вычисляем и устанавливаем положение поля после перемещения box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
};
};
document.onmouseup = function() {//Отменить перемещение поля при отпускании кнопки мыши document.onmousemove = null;
};
</скрипт>
</тело>
</html> События клавиатуры
События клавиатуры — это события, которые срабатывают, когда пользователь использует клавиатуру.
Например, пользователь нажимает клавишу Esc, чтобы закрыть открытую строку состояния, и нажимает клавишу Enter, чтобы напрямую переключать курсор вверх и вниз и т. д.
Ниже показано использование переключения клавиши Enter. Детали такие, как показано в примере.
Реализация кода
<!DOCTYPE html>
<голова>
<мета-кодировка="UTF-8">
<title>Нажмите Enter, чтобы переключиться</title>
</голова>
<тело>
<p>Имя пользователя: <input type="text"></p>
<p>Электронная почта: <input type="text"></p>
<p>Номер мобильного телефона: <input type="text"></p>
<p>Личное описание: <input type="text"></p>
<скрипт>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
inputs[i].onkeydown = function(e) {
// Получаем совместимую обработку объекта события var e = event || window.event;
// Определяем, является ли нажатая клавиша Enter. Если да, то фокус будет передан следующему вводу if (e.keyCode === 13) {
// Проходим все поля ввода и находим индекс текущего ввода for (var i = 0; i < inputs.length; ++i) {
if (inputs[i] === это) {
// Вычисляем индекс следующего входного элемента var index = i + 1 >= inputs.length 0 : i + 1;
перерыв;
}
}
// Если следующий ввод по-прежнему является текстовым полем, получаем фокус клавиатуры if (inputs[index].type === 'text') {
inputs[index].focus(); // Событие фокуса триггера }
}
};
}
</скрипт>
</тело>
</html> Обратите внимание, что
значения клавиш, сохраняемые в событии нажатия клавиши, представляют собой коды ASCII, а
значения клавиш, сохраняемые в событиях нажатия клавиш и нажатия клавиш, представляют собой виртуальные коды клавиш.
Для получения подробной информации обратитесь к таким руководствам, как MDN.
События формы.
События формы относятся к событиям, которые происходят при работе с веб-формами.
Например, проверка формы перед отправкой, операция подтверждения при сбросе формы и т. д. JavaScript предоставляет связанные события формы.
Ниже в качестве примера показано, следует ли отправлять и сбрасывать данные формы. Детали такие, как показано в примере.
Реализация кода
<!DOCTYPE html>
<голова>
<мета-кодировка="UTF-8">
<title>События формы</title>
</голова>
<тело>
<форма id="регистрация">
<label>Имя пользователя: <input id="user" type="text"></label>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</форма>
<скрипт>
// Получаем объекты формы и элемента, которые необходимо проверить var regist = document.getElementById('register');
вар пользователь = document.getElementById('пользователь');
regist.onsubmit = function(event) { // Добавляем событие отправки в форму // Получаем объект события и выводим текущий тип события var event = event || window.event;
console.log(event.type);
// Определяем, пусто ли содержимое элемента формы. Если оно пусто, возвращаем false, в противном случае возвращаем true.
вернуть user.value ? правда: ложь;
};
regist.onreset = function (event) { // Добавляем событие сброса в форму // Получаем объект события и выводим текущий тип события var event = event window.event;
console.log(event.type);
// Определить, следует ли подтверждать сброс, нажмите «ОК», чтобы вернуть true, нажмите «Отмена», чтобы вернуть false
return submit('Пожалуйста, подтвердите, хотите ли вы сбросить информацию. После сброса все содержимое формы будет удалено');
};
</скрипт>
</тело>
</html> Практический
анализэффекта увеличения изображения
Как реализовать эффект увеличения изображения:
① Подготовьте два одинаковых изображения: маленькое и большое.
② Миниатюра отображается в области отображения продукта.
③ Большое изображение используется для пропорционального отображения соответствующей области на большом изображении при перемещении мыши по маленькому изображению.
Идеи реализации кода :
① Напишите HTML-страницу для отображения маленьких картинок, масок, скрывающих мышь, и больших картинок.
② Когда мышь перемещается по маленькому изображению, отображаются маска мыши и большое изображение.
③ При движении мыши позвольте маске перемещаться на маленьком изображении.
④ Ограничьте диапазон перемещения маски на маленьком изображении.
⑤ Отображение большого изображения пропорционально покрытию маски на маленьком изображении.