eventos de página
: em que ordem as páginas HTML são carregadas?
Resposta: A página é carregada de cima para baixo na ordem em que o código é escrito.
Problemas que podem ocorrer : Se JavaScript for usado para operar elementos DOM antes de a página ser carregada, ocorrerão erros de sintaxe.
Solução : os eventos da página podem alterar o tempo de execução do código JavaScript.
Eventos de foco
No desenvolvimento web, os eventos de foco são usados principalmente para funções de validação de formulário e são um dos eventos mais comumente usados.
Por exemplo, alterar o estilo da caixa de texto quando a caixa de texto fica em foco, validar os dados inseridos na caixa de texto quando a caixa de texto perde o foco, etc.
Para que todos entendam melhor como utilizar eventos de foco, a seguir é apresentada uma demonstração para verificar se o nome de usuário e a senha estão vazios.
Implementação de código
<!DOCTYPEhtml>
<cabeça>
<meta charset="UTF-8">
<title>Verifique se o nome de usuário e a senha estão vazios</title>
<estilo>
corpo{plano de fundo:#ddd;}
.box{fundo:#fff;preenchimento:20px 30px;largura:400px;margem: 0 automático;alinhamento de texto:centro;}
.btn{largura:180px;altura:40px;fundo:#3388ff;borda:1px sólido #fff;cor:#fff;tamanho da fonte:14px;}
.ipt{largura:260px;preenchimento:4px 2px;}
.dicas{largura:440px;altura:30px;margem:5px automático;fundo:#fff;cor:vermelho;borda:1px sólido #ccc;display:none;altura da linha:30px;preenchimento esquerdo:20px;fonte- tamanho:13px;}
</estilo>
</head>
<corpo>
<p id="dicas" class="dicas"></p>
<p class="caixa">
<p><label>Nome de usuário: <input id="user" class="ipt" type="text"></label></p>
<p><label>Senha: <input id="pass" class="ipt" type="password"></label></p>
<p><button id="login" class="btn">Login</button></p>
</p>
<roteiro>
janela.onload=função(){
addBlur($('user')); // Verifica se o valor está vazio após o elemento com o id do usuário perder o foco. id da passagem perde o foco Se o valor está vazio};
function $(obj) { // Obtenha o elemento especificado com base no id return document.getElementById(obj);
}
function addBlur(obj) { // Adiciona um evento de perda de foco para o elemento especificado obj.onblur = function() {
estáVazio(isto);
};
}
function isEmpty(obj) { // Verifica se o formulário está vazio if (obj.value === '') {
$('dicas').style.display = 'bloquear';
$('tips').innerHTML = 'Nota: O conteúdo de entrada não pode estar vazio ';
} outro {
$('dicas').style.display = 'nenhum';
}
}
</script>
</body>
</html> Eventos de mouse
Os eventos de mouse são os eventos mais comumente usados no desenvolvimento Web.
Por exemplo, alternar o conteúdo exibido na barra de guias quando o mouse deslizar usando o mouse para arrastar a caixa de status para ajustar sua posição de exibição, etc. Todos esses efeitos comuns de páginas da web usam eventos de mouse.
No desenvolvimento do projeto, alguns atributos do mouse comumente usados estão frequentemente envolvidos, que são usados para obter as informações atuais da posição do mouse.
Os atributos pageX e pageY não são compatíveis em navegadores IE6-8. Portanto, a compatibilidade com os navegadores IE6~8 é necessária durante o desenvolvimento do projeto.
As coordenadas do mouse no documento são iguais às coordenadas do mouse na janela atual mais o comprimento do texto rolado pela barra de rolagem.
Para que todos entendam melhor o uso dos eventos do mouse, tomemos como exemplo a exibição circular da posição do clique do mouse.
Implementação de código
<!DOCTYPEhtml>
<cabeça>
<meta charset="UTF-8">
<title>Mostrar posição do clique do mouse</title>
<estilo>
.mouse{posição:absoluta;fundo:#ffd965;largura:40px;altura:40px;raio da borda:20px;}
</estilo>
</head>
<corpo>
<p id="mouse" class="mouse"></p>
<roteiro>
var mouse = document.getElementById('mouse');
//Requisito: Quando o mouse clica na página, obtenha a posição do clique e exiba um pequeno ponto document.onclick = function(event) {
// Obtenha o processamento compatível do objeto de evento var event = event || window.event;
// A posição do mouse na página var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var páginaY = evento.pageY || evento.clientY + document.documentElement.scrollTop;
// Calcula a posição onde <p> deve ser exibido var targetX = pageX - mouse.offsetWidth / 2;
var targetY = pageY - mouse.offsetHeight / 2;
// Exibe <p> no local clicado pelo mouse
mouse.style.display = 'bloquear';
mouse.style.left=targetX + 'px';
mouse.style.top = targetY + 'px';
};
</script>
</body>
</html> [Case] Efeitos de arrastar do mouse
A posição da caixa (valores esquerdo e superior) = a posição do mouse (valores esquerdo e superior) - a distância entre o mouse e a caixa (valores esquerdo e superior) quando o mouse é pressionado.
Dê um exemplo
Idéias para implementação de código :
① Escreva HTML e projete caixas pop-up para implementar efeitos de arrastar e soltar.
② Adicione o evento mousedown e seu manipulador à barra de arrastar.
③ Manipule eventos de movimento do mouse para obter efeitos de arrastar o mouse.
④ Lide com o evento de liberação do botão do mouse para que a caixa pop-up não se mova mais após o botão do mouse ser liberado.
Implementação de código
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Arrastar o mouse</title>
<estilo>
corpo{margem:0}
.box{largura:400px;altura:300px;borda:5px sólido #eee;box-shadow:2px 2px 2px 2px #666;posição:absoluto;topo:30%;esquerda:30%}
.hd{largura:100%;altura:25px;cor de fundo:#7c9299;borda inferior:1px sólido #369;altura da linha:25px;cor:#fff;cursor:mover}
#box_close{float:direita;cursor:ponteiro}
</estilo>
</head>
<corpo>
<p id="caixa" class="caixa">
<p id="drop" class="hd">
Informações de registro (podem ser arrastadas e soltas)
<span id="box_close">【Fechar】</span>
</p>
<p class="bd"></p>
</p>
<roteiro>
// Obtenha a caixa arrastada e arraste a faixa var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // Pressione o mouse na barra de arrastar para arrastar a caixa var event = event || window.event;
// Obtém a posição quando o mouse é pressionado var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var páginaY = evento.pageY || evento.clientY + document.documentElement.scrollTop;
// Calcula a posição clicada do mouse na caixa var spaceX = pageX - box.offsetLeft;
var espaçoY = páginaY - box.offsetTop;
document.onmousemove = function(event) { // Obtém a posição do mouse quando o mouse se move. A caixa inteira segue a posição do mouse var event = event ||
// Obtém a posição do mouse após o movimento var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var páginaY = evento.pageY || evento.clientY + document.documentElement.scrollTop;
// Calcula e define a posição da caixa após o movimento box.style.left = pageX - spaceX + 'px';
box.style.top = páginaY - espaçoY + 'px';
};
};
document.onmouseup = function() {//Cancela o movimento da caixa quando o botão do mouse é liberado document.onmousemove = null;
};
</script>
</body>
</html> Eventos de teclado
Eventos de teclado referem-se a eventos acionados quando o usuário usa o teclado.
Por exemplo, o usuário pressiona a tecla Esc para fechar a barra de status aberta e pressiona a tecla Enter para mudar diretamente o cursor para cima e para baixo, etc.
O seguinte demonstra o uso da alternância da tecla Enter. Os detalhes são mostrados no exemplo.
Implementação de código
<!DOCTYPEhtml>
<cabeça>
<meta charset="UTF-8">
<title>Pressione Enter para mudar</title>
</head>
<corpo>
<p>Nome de usuário: <input type="text"></p>
<p>E-mail: <input type="text"></p>
<p>Número de celular: <input type="text"></p>
<p>Descrição pessoal: <input type="text"></p>
<roteiro>
var entradas = document.getElementsByTagName('input');
for (var i = 0; i < entradas.comprimento; ++i) {
entradas[i].onkeydown = função(e) {
// Obtém o processamento compatível do objeto de evento var e = event || window.event;
// Determine se a tecla pressionada é Enter. Em caso afirmativo, deixe a próxima entrada receber o foco if (e.keyCode === 13) {
// Percorra todas as caixas de entrada e encontre o subscrito da entrada atual for (var i = 0; i < inputs.length; ++i) {
if (entradas[i] === isto) {
// Calcula o índice do próximo elemento de entrada var index = i + 1 >= inputs.length 0 : i + 1;
quebrar;
}
}
// Se a próxima entrada ainda for uma caixa de texto, obtenha o foco do teclado if (inputs[index].type === 'text') {
inputs[index].focus(); // Aciona evento de foco }
}
};
}
</script>
</body>
</html> Observe que
os valores-chave salvos no evento keypress são códigos ASCII, e
os valores-chave salvos nos eventos keydown e keyup são códigos-chave virtuais.
Para obter detalhes, consulte manuais como MDN
Eventos de formulário
Os eventos de formulário referem-se a eventos que ocorrem durante a operação de formulários da web.
Por exemplo, verificação do formulário antes do envio, operação de confirmação quando o formulário é redefinido, etc. JavaScript fornece eventos de formulário relacionados.
O exemplo a seguir demonstra se é necessário enviar e redefinir os dados do formulário. Os detalhes são mostrados no exemplo.
Implementação de código
<!DOCTYPEhtml>
<cabeça>
<meta charset="UTF-8">
<title>Eventos de formulário</title>
</head>
<corpo>
<form id="cadastre-se">
<label>Nome de usuário: <input id="user" type="text"></label>
<input type="submit" value="Enviar">
<input type="reset" value="Redefinir">
</form>
<roteiro>
// Obtenha os objetos de formulário e elemento que precisam ser verificados var regist = document.getElementById('register');
var usuário = document.getElementById('usuário');
regist.onsubmit = function(event) { // Adiciona um evento de envio ao formulário // Obtém o objeto de evento e gera o tipo de evento atual var event = event || window.event;
console.log(evento.tipo);
// Determina se o conteúdo do elemento do formulário está vazio. Se estiver vazio, retorne falso, caso contrário, retorne verdadeiro.
retornar usuário.valor? verdadeiro: falso;
};
regist.onreset = function (event) { // Adiciona um evento de redefinição ao formulário // Obtém o objeto de evento e gera o tipo de evento atual var event = event || window.event;
console.log(evento.tipo);
// Determine se deseja confirmar a redefinição, pressione "OK" para retornar verdadeiro, pressione "Cancelar" para retornar falso
return confirm('Confirme se deseja redefinir as informações. Após a redefinição, todo o conteúdo preenchido no formulário será limpo');
};
</script>
</body>
</html> Análise prática
do efeito de ampliação de imagem
Como implementar o efeito de ampliação de imagem:
① Prepare duas imagens idênticas, uma imagem pequena e uma imagem grande.
② A miniatura é exibida na área de exibição do produto.
③ A imagem grande é usada para exibir a área correspondente na imagem grande proporcionalmente quando o mouse se move na imagem pequena.
Ideias para implementação de código :
① Escreva uma página HTML para exibir imagens pequenas, máscaras que escondem o mouse e imagens grandes.
② Quando o mouse se move sobre a imagem pequena, a máscara do mouse e a imagem grande são exibidas.
③ Quando o mouse se move, deixe a máscara se mover na imagem pequena.
④ Limite o alcance móvel da máscara na imagem pequena.
⑤ Exiba a imagem grande proporcionalmente com base na cobertura da máscara na imagem pequena.