English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Na verdade, esse artigo foi escrito há muito tempo, mas devido a um bug no salvamento do SF, escrevi muito naquela época, mas não foi salvo, achei isso um grande pesar, hoje tenho tempo livre, então vou complementar, também vou fazer um resumo final do meu aprendizado de JavaScript.
Aqui, vamos discutir principalmente os eventos relacionados ao JavaScript -
Programa de tratamento de eventos
No DOM, foram definidos alguns eventos, e a função que responde a um evento é chamada de programa de tratamento de eventos (ou detector de eventos). O nome do programa de tratamento de eventos geralmente começa com 'on', por exemplo: onclick.
Bolha e captura de eventos
O fluxo de eventos se refere à ordem de recebimento de eventos na página, IE, Firefox e o navegador Chrome são todos eventos de bolha, ou seja, o evento de bolha se refere ao evento que inicialmente é recebido pelo elemento mais específico, e então é propagado de forma hierárquica para os nós menos específicos. Enquanto isso, a captura de eventos é exatamente o contrário, a captura de eventos foi proposta pelo Netscape, e a bolha e a captura de eventos são mostradas detalhadamente na figura a seguir:
Embora o evento de captura seja o único modelo de fluxo de eventos suportado pelo Netscape, atualmente o IE9O Firefox e o Google também suportam esse modelo de fluxo de eventos.
Vantagens do evento de bolha
Porque os eventos possuem o mecanismo de bolha, podemos usar o princípio da bolha para adicionar eventos ao nível superior, acionando o efeito de execução. A vantagem disso, claro, é melhorar o desempenho.
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
for(var i = 0;i<aLi.length;i++){
aLi[i].onmouseover = function () {
this.style.backgroundColor = "blue";
};
ali[i].onmouseout = function () {
this.style.backgroundColor = "";
}
}
};
</script>
</head>
<body>
<div>
<ul id = "bubble">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
Dessa forma, podemos adicionar eventos de mouse aos li. Mas se temos muitos li, o uso de loop for pode afetar o desempenho.
Podemos usar o delegate de eventos para alcançar esse efeito. O HTML não muda:
<script type="text/javascript">
window.onload = function () {
var aUl = document.getElementsById("bubble");
var aLi = aUl.getElementsByTagName("li");
//Em qualquer evento, o elemento que você manipula é o origem do evento.
// IE: window.event.srcElement
// Padrão: event.target
aUl.onmouseover = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "blue";
}
};
aUl.onmouseout = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() = "li"){
target.style.background = "";
}
}
};
</script>
Então, como evitar a propagação de eventos? Veja o exemplo a seguir:
<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//Depois de prevenir a propagação do evento, ao clicar no caixa cinza, o processo todo só exibirá uma caixa de diálogo uma vez (observe a comparação com a situação padrão)
function showMsg(obj,e)
{
alert(obj.id);
stopBubble(e)
}
//Função de prevenção de propagação de evento
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
</script>
Clique na效果图 do contorno preto:
Manipulador de evento do DOM 0
Normalmente, a especificação do manipulador de evento usando js é atribuir uma função de callback ao atributo deste manipulador de evento. Cada elemento tem seu próprio atributo de manipulador de evento (nome em minúsculas, por exemplo: onclick)
btn.onclick = function(){
console.log('hello');
};
Os manipuladores de evento especificados no nível 0 do DOM são considerados métodos do elemento. Portanto, this aponta para o elemento atual:
var btn = document.getElementById('myDiv');
//Os eventos desencadeados no DOM 0 geram um objeto de evento event
btn.onclick = function (event) {
alert(this.id);//myDiv
};
DOM level 1
DOM level 1 Foca na modelagem de documentos HTML e XML. Ele contém funções de navegação e processamento de documentos.
DOM level 1 em 1998 A 10 M. 1 D tornou-se W3C recomendação padrão.
A segunda versão do rascunho de trabalho foi 2000 9 M. 29 D.
Vale a pena mencionar: o DOM level 0 não é o W3C especificação. Mas apenas para o Netscape Navigator 3.0 e IE 3.Uma definição equivalente de funcionalidade na versão 0.
DOM 2Manipulador de evento
DOM 2Define dois métodos para especificar e excluir operações de manipuladores de evento: addEventListener() e removeEventListener(), todos eles aceitam três parâmetros:
1.Nome do evento. Por exemplo, o click
2.Função como manipulador de evento.
3.Booleano (true indica chamada do manipulador de evento no estágio de captura, false indica estágio de propagação)
Também é possível definir funções de chamada de volta de eventos usando o método addEventListener do objeto Element.
//element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
console.log(this.id);
},false);
Manipuladores de eventos no IE
IE9Os navegadores IE anteriores não suportam addEventListener() e removeEventListener().
Diferente dos outros navegadores, o IE usa os métodos attachEvent() e detachEvent() para adicionar manipuladores de eventos ao DOM, devido ao IE8e versões mais antigas suportam apenas a propagação de eventos, então eles aceitam apenas dois parâmetros:
1、nome do manipulador de eventos (antes deve ser adicionado on)
2、função do manipulador de eventos
Os manipuladores de eventos adicionados usando attachEvent() são os seguintes:
var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
console.log(this.id);
});
Notavelmente, no caso do método attachEvent(), o manipulador de eventos é executado no escopo global, então neste momento, this é igual a window
objeto de evento
Ao acionar um evento em algum DOM, é gerado um objeto de evento event, que contém todas as informações relacionadas ao evento. Incluindo o elemento que causou o evento, o tipo do evento e outras informações relacionadas a eventos específicos. O objeto event é passado como o primeiro parâmetro para a função de chamada de volta da escuta de eventos. Podemos usar o objeto event para obter muitas informações relacionadas ao evento atual:
type (String) — O nome do evento
target (node) — O nó DOM de origem do evento
currentTarget?；(node) — O nó DOM atual no qual a função de chamada de volta foi acionada (será feita uma comparação mais detalhada em breve)
bubbles (boolean) — Indica se este evento é um evento de bolha (será explicado em breve)
preventDefault(function) — Este método impede que o agente de usuário do navegador dispare o comportamento padrão do evento atual. Por exemplo, impedir que o evento click do elemento <a> carregue uma nova página
cancelable (boolean) — Esta variável indica se o comportamento padrão deste evento pode ser impedido chamando event.preventDefault.
stopPropagation (function) - Cancela a captura ou propagação adicional do evento, use este método se bubbles for true
eventPhase: retorna um número que indica a fase atual do evento, 0 indica que o evento está começando a se propagar do topo do DOM para o elemento-alvo1Para fase de captura2Para o evento alcançar o elemento-alvo3Para fase de bolha.
Além disso, o objeto de evento pode ter muitos outros atributos, mas eles são específicos para o evento específico. Por exemplo, os eventos de mouse contêm os atributos clientX e clientY para indicar a posição do mouse na janela atual.
Além disso, o método stopPropagation() é usado para interromper imediatamente a propagação do evento no DOM, ou seja, cancelar a propagação adicional da bolha ou captura de eventos.
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
alert("Clicado");
event.stopPropagation();
};
//Evitar acionar o manipulador de eventos no document.body
document.body.onclick = function (event) {
alert("Corpo clicado");
};
O objeto event existe apenas durante a execução do manipulador de eventos, assim que o manipulador de eventos for executado, o objeto event será automaticamente destruído.
Objeto de evento do IE
Ao adicionar um manipulador de eventos no nível 0 do DOM, o objeto event existe como uma propriedade do objeto window:
var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
var event = window.event;
alert(event.type);//click
};
O objeto event do IE também contém propriedades e métodos relacionados ao evento que o criou.
cancleBubble - Boolean - O valor padrão é false, mas pode ser configurado como true para cancelar a propagação do evento, o mesmo que o método stopPropagation() no DOM.
returnValue - Boolean - O valor padrão é true, ao configurar como false, é usado para cancelar o comportamento padrão do evento, o mesmo que preventDefault() no DOM.
srcElement - Elemento - O elemento alvo do evento, o mesmo que a propriedade target no DOM.
type - String - O tipo de evento acionado.
Evento click
Quando o usuário clicar, o objeto event conterá as seguintes propriedades.
pageX, pageY: Coordenadas do local de clique em relação ao elemento html, em unidades de pixels.
clientX, clientY: Coordenadas do local de clique em relação ao viewport, em unidades de pixels.
screenX, screenY: Coordenadas do local de clique em relação à tela de exibição do dispositivo, em unidades de pixels do hardware do dispositivo
clientX, clientY
Gráfico: clientX e clientY, seus valores representam as coordenadas horizontais e verticais do ponteiro do mouse no viewport no momento do evento (não inclui a área da barra de rolagem)
Posições deslocadas
Através das seguintes4Propriedades que podem obter a posição deslocada do elemento.
(1offsetHeight: Tamanho em pixels do espaço ocupado pelo elemento na direção vertical. Inclui a altura do elemento, a altura da barra de rolagem horizontal (visível), a altura da borda superior e a altura da borda inferior.
(2offsetWidth: Tamanho em pixels do espaço ocupado pelo elemento na direção horizontal. Inclui a largura do elemento, a largura da barra de rolagem vertical (visível), a largura da borda esquerda e a largura da borda direita.
(3offsetLeft: Distância em pixels do lado esquerdo da borda externa do elemento até o lado esquerdo da borda interna do elemento pai.
(4offsetTop: Distância em pixels do topo do borda externa do elemento até o topo da borda interna do elemento pai.
pageX, pageY
Essas duas propriedades representam a posição do cursor do mouse na página, e, quando a página não rolar, os valores de pageX, pageY são iguais aos de clientX, clientY
Tamanho da rolagem
Tamanho da rolagem, que se refere ao tamanho do elemento que contém o conteúdo de rolagem.
A seguir está4Propriedades relacionadas ao tamanho da rolagem.
(1scrollHeight: Altura total do conteúdo do elemento sem a barra de rolagem.
(2scrollWidth: Largura total do conteúdo do elemento sem a barra de rolagem.
(3scrollLeft: Número de pixels ocultos à esquerda da área de conteúdo. Ao ajustar essa propriedade, pode-se alterar a posição de rolagem do elemento.
(4scrollTop: Número de pixels ocultos acima da área de conteúdo. Ao ajustar essa propriedade, pode-se alterar a posição de rolagem do elemento.
Eventos de foco
Os eventos de foco são acionados quando o elemento da página ganha ou perde o foco, e têm os seguintes4Eventos de foco:
1.blur: Acionado quando o elemento perde o foco. Este evento não se propaga.
2.focus: Acionado quando o elemento ganha o foco. Não se propaga.
3.focusin: Acionado quando o elemento ganha o foco, propagando-se.
4.focusout: Acionado quando o elemento perde o foco, propagando-se.
Eventos do mouse
DOM 3Definição de9Eventos do mouse:
click: Acionado quando o usuário clicar no botão principal do mouse, geralmente o botão esquerdo ou a tecla Enter.
dbclick: Acionado quando o usuário clicar duas vezes no mouse.
mousedown: Quando o usuário pressionar qualquer tecla do mouse, será acionado este evento, que não pode ser acionado pela teclado.
mousemove: acionado repetidamente quando o mouse se move ao redor de um elemento, este evento não pode ser acionado por eventos de teclado.
mouseout: acionado quando o mouse sai do elemento, este evento não pode ser acionado pelo teclado.
mouseover: acionado quando o mouse entra no elemento, este evento não pode ser acionado pelo teclado.
mouseenter: semelhante a 'mouseover', mas não bubbling e não é acionado quando o cursor se move para elementos descendentes.
mouseleave: semelhante a 'mouseout', mas não bubbling. Não é acionado sobre o elemento.
mouseup: acionado quando o usuário solta o botão do mouse, não pode ser acionado pela teclado.
O objeto de evento passado para o manipulador de eventos de mouse tem os atributos clientX e clientY, que especificam as coordenadas do ponteiro do mouse em relação à janela contida. Adicionando o deslocamento de rolagem da janela, é possível converter a posição do mouse em coordenadas de documento.
Todos os elementos na página suportam eventos de mouse. Exceto mouseenter e mouseleave, todos os eventos são bubbling, e seu comportamento padrão pode ser cancelado. No entanto, cancelar o comportamento padrão de eventos de mouse pode afetar outros eventos, porque alguns eventos de mouse são dependentes uns dos outros.
Eventos de arraste
(1)(evento drag)
O evento drag é acionado durante o arraste do objeto de origem.
(2)(evento dragstart, evento dragend)
O evento dragstart é acionado quando o usuário começa a arrastar um objeto com o mouse, e o evento dragend é acionado quando o arraste termina.
(3)(evento dragenter, evento dragleave)
O evento dragenter é acionado no objeto de destino após o objeto de origem ser arrastado para dentro, e o evento dragleave é acionado no objeto de destino após o objeto de origem sair do objeto de destino.
(4)(evento dragover)
O evento dragover é acionado no objeto posterior quando o objeto de origem é arrastado sobre ele.
(5)(evento drop)
Quando o objeto de origem é arrastado acima do objeto de destino e o usuário solta o mouse, um evento drop é acionado no objeto de destino.
Isso é tudo o que há no artigo, espero que ajude na sua aprendizagem, e espero que todos apoiem o tutorial gritar.