Uma explicação detalhada de objetos de evento, objetos de origem de eventos e fluxos de eventos em js

• O que são eventos: Eventos referem-se a todos os eventos que podem ocorrer em js e são monitorados, como: (mouse, teclado, alterações na janela do navegador, etc.)

• O que é um objeto de evento (evento): Em termos leigos, é um objeto que registra diversas informações sobre o evento.
  O que precisa ser observado aqui é que o objeto de evento terá problemas de compatibilidade. Em navegadores diferentes do IE, é evento, mas em não navegadores, é window.event.

 btn.onclick = function(event){let e = event || window.event}

Simplificando, refere-se ao objeto específico no qual o evento ocorreu. Para elementos de elemento, o objeto de origem do evento refere-se ao elemento em que você clicou. Também existem problemas de compatibilidade do navegador:

• No fireFox é event.srcElement
• No IE é event.target
  O método de escrita compatível refere-se ao objeto de evento

fluxo de eventos

Os fluxos de eventos são divididos principalmente em duas categorias: 1. Eventos de captura 2. Eventos de bolha A ordem de acionamento é capturar primeiro e depois borbulhar, mas se for subdividido, haverá um estágio alvo após a captura do estágio de bolha. ou seja, o elemento DOM que é especificamente operado no estágio de operação a ser executado.

capturar eventos

O nó superior primeiro recebe o evento e depois o propaga para baixo até o nó específico. ex: Quando o usuário clica no elemento p e usa captura de evento, o evento click será propagado na ordem documento>htm>corpo>p. O modo de transmissão é de fora para dentro.

eventos borbulhantes

Ao contrário do evento capture, ele é passado de dentro para fora. Quando o usuário clica em p, ele será passado para o pai, p>body>html. ***Porque esse recurso é frequentemente usado para delegação de eventos.

delegação do evento

Vinculamos os mesmos eventos a serem acionados por todos os elementos filhos ao elemento pai, o que pode reduzir as operações DOM e melhorar o desempenho. O método de uso específico é usar o método do objeto de origem do evento.

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

Para vincular eventos de clique a li, normalmente nossa abordagem é percorrer os eventos de clique até li

 deixe oLi = document.querySelectorAll("li")
 for(seja i; i < oLi.length; i++){
            oLi[i].onclick = function(){
                console.log("eu")
            }
        }

A maneira de usar a delegação de eventos é

 deixe oUl = document.querySelector("ul")
  oUl.onclick = function(evento){
            deixe e = evento || janela.evento
            console.log(e.target.innerHTML)
        }

• vantagem
• Melhore o desempenho, sem necessidade de percorrer todos os elementos para vincular eventos um por um.
• Novos elementos flexíveis podem ser criados dinamicamente sem religar eventos.

Operação para evitar bolhas de eventos (gravação de compatibilidade)

***Alguns eventos não requerem operações de borbulhamento

 função stopBubble(evento){
    var e = event||window.event //Método de escrita compatível com objeto de evento e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //Método de escrita compatível com IE}

Bloquear eventos padrão (método de escrita compatível)

*** Bloqueie uma tag e salte padrão com o botão direito do mouse e eventos de menu

 função cancelarHandle(evento){
    var e = evento||janela.evento
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

Recomendações relacionadas: [tutorial em vídeo JavaScript]

A descrição acima é uma explicação detalhada do objeto de evento, objeto de origem do evento e fluxo de evento em js. Para obter mais informações, preste atenção a outros artigos relacionados no site PHP chinês!