Ao falar sobre eventos JavaScript, é difícil evitar três tópicos: bolhas de eventos, captura de eventos e bloqueio de eventos padrão, seja entrevista ou no trabalho diário.
1. Bolhas de eventos
Vamos dar uma olhada em um pedaço de código:
var $ input = document.getElementsByTagName ("input") [0]; var $ div = document.getElementsByTagName ("div") [0]; var $ body = document.getElementsByTagName ("corpo") [0]; $ input.OnClick = function (e) {this.StyLeDer ") [0]; janela.e; alert ("vermelho")} $ div.OnClick = function (e) {this.style.border = "5px verde sólido" alert ("verde")} $ body.onclick = function (e) {this.style.border = "5px Solid Yellow" alert ("amarelo")}}Código HTML
<div> <input type = "button" value = "teste de teste de bolhas" /> </div> "vermelho", "verde", "amarelo" aparece por sua vez.
Sua intenção original é acionar o elemento do botão, mas é acionado junto com o evento ligado ao elemento pai. Esta é a bolha do evento.
Se a ligação do evento à entrada for alterada para:
$ input.OnClick = function (e) {this.style.border = "5px vermelho sólido" var e = e || janela.e; alerta ("vermelho") e.stoppropagation ();}Nesse momento, apenas "vermelho" aparecerá porque impede que o evento buble.
2. Captura de eventos
Como há uma borbulha de eventos, pode haver uma captura de eventos, que é um processo reverso. A diferença é do elemento superior para o elemento de destino ou do elemento de destino para o elemento superior.
Vamos ver um pedaço de código:
$input.addEventListener("click", function(){ this.style.border = "5px solid red"; alert("red")}, true)$div.addEventListener("click", function(){ this.style.border = "5px solid green"; alert("green")}, true)$body.addEventListener("click", function () {this.style.border = "5px amarelo sólido";Neste momento, "amarelo", "verde", "vermelho" aparece um por um, que é a captura do evento.
3. Bloqueie o evento padrão
Existem alguns comportamentos padrão dos elementos HTML, como a tag A, e haverá uma ação de salto depois de clicar; A entrada do tipo de envio no formulário possui um evento de salto de envio padrão; A entrada do tipo de redefinição possui um comportamento de formulário de redefinição. Se você deseja bloquear esse comportamento padrão do navegador, o JavaScript fornece um método.
var $ a = document.getElementsByTagName ("A") [0]; $ A.OnClick = function (e) {alert ("A ação do salto foi bloqueada por mim") e.PreventDefault (); // return false; // também é possível} <a href = "http://keleyi.com"> ke leyi </a> O evento padrão se foi.Como o retorno false e e.preventDefault () têm o mesmo efeito, existem diferenças? Claro que existe.
O comportamento padrão dos hosts de eventos pode ser organizado apenas nos atributos de eventos HTML e nos métodos de manuseio de eventos no nível DOM0.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.