mecanismo de eventos js em detalhes

Saiba mecanismo de eventos deve primeiro entender os eventos e fluxo de eventos.

1. manipulador de eventos

Os manipuladores de eventos são divididos em três categorias:

• manipuladores de eventos HTML
• manipulador de eventos de nível DOM0
• manipulador de eventos de nível DOM2

1. manipuladores de eventos HTML

< Botão onclick = "alert (Olá mundo!)" > </ Olá >

 

 

Características são:

JS acoplado a HTML e altura, quando a necessidade de modificar o nome da função, necessidade de modificar dois lugares

 

manipulador de eventos 2. nível DOM0

manipulador de eventos nível DOM0 por meio de um nó DOM é adicionado em [evento] evento por JS.

var btn = document.getElementById ( "# btn" ); 
btn.onclick = função () { 
    alert (Olá mundo ! ) 
}

 

Características são:

Cada DOM pode adicionar apenas um evento;

 

manipulador de eventos 3. nível DOM2

Suas características:

Você pode adicionar vários nós ao tratamento de eventos DOM

IE10- método correspondente é: a attachEvent / detachEvent , é utilizado como se segue:

função handleEvent (Evento) {
    // TODO 
} 
dom.attachEvent (eventName, handleEvent)   // attachEvent só pode ser accionado em meta fase e fase borbulhar 
dom.detachEvent (eventName, handleEvent)

 

 

 

parâmetros de aquisição pode ser obtida directamente na função ouvinte no caso do seu objecto, as suas propriedades são as seguintes:

1. Tipo - obter o tipo de evento 
2. srcElement - get público 
3. cancelBubble = true para impedir que o evento borbulhando 
4. returnValue = false para evitar o comportamento padrão do evento

 

IE11 navegadores + e outros métodos correspondentes é o addEventListener / o removeEventListener . Seu uso é a seguinte:

função do handleEvent (Evento) {
   // o TODO 
} 
dom.addEventListener (eventName, o handleEvent, a falsa ); //   i {useCapture: falso}, pode desencadear borbulhando fase de fase / alvo; padrão 
dom.removeEventListener (eventName, handleEvent, falso );

 

As propriedades evento de objectos correspondentes são:

1. Tipo - obter o tipo de evento 
2. alvo - obter eventos alvo 
3. stopPropagation () - parar a propagação do evento 
4. preventDefault () - evitar o comportamento padrão do evento

 

 

2. fluxo de eventos

fluxo de eventos é a seqüência de eventos na página de aceitar que a sequência de eventos se espalhar. propagação do evento consiste de três fases:

• Capturando fase - a partir do exterior -> DOM alvo
• estágio alvo
• fase borbulhante - alvo dom-> mais externa

Quando o borbulhamento e exist captura, a fim eventing: Captura -> Target -> borbulhante

exemplo:

<! - 单击filho -> 
<! DOCTYPE html > 
< html lang = "en" > 
< corpo > 
  < div id = "pai" estilo = "width: 400px; height: 200px; background-color: bisque" > 
    < div id = "filho" estilo = "width : 200px; height: 100px; background-color: marrom" > </ div > 
  </ div > 
  < roteiro > 
    document.body.addEventListener ( ' clique ' , ' corpo-Bubble ' ) 
    }, para false );
     // Note que o pai não pode ser usado diretamente como id, representantes WINDOW.PARENT 
    father.addEventListener ( ' Click ' , função (event) { 
      o console.log ( ' pai- bolha ' ); 
    }, para false ); 
    document.body.addEventListener ( ' Click ' função (event) { 
      o console.log ( ' corpo-Capture ' ) 
    }, para true );
    father.addEventListener ( ' clique' Função (event) { 
      console.log ( ' pai-capture ' ); 
    }, Verdadeiro ); 
    son.addEventListener ( ' clique ' , função (event) { 
      console.log ( ' filho ' ); 
    }, falsa ); 
  </ Roteiro > </ corpo > </ html >

 

 

resultados operacionais

corpo- captura de 
pai - captura de 
filho 
pai - bolha 
corpo -bubble

 

3. delegação de eventos

delegados de evento, também chamado de evento corretor.

1. O princípio do delegado do evento

Geralmente refere-se a borbulhar o uso evento, ou um grupo de um manipulador delegado evento DOM para o elemento pai ou elemento mais exterior.

2. A importância do delegado do evento

Pode especificar apenas um manipulador de eventos, você pode gerenciar um número de diferentes tipos de manipuladores de eventos.

 

Se você precisa adicionar o evento à lista de itens, quando um número excessivo de itens da lista, haverá situação de operação frequente do DOM; e função são tipos de referência, memória heap necessário para loja, pegar um monte de espaço. Encomendado pelo evento, o evento pode ser ligado ao elemento pai ul, por isso, só precisa fazer isso uma vez DOM, sem causar redraws frequentes. Ele não vai ocupar muito espaço.

exemplo:

<! - conseguido através da ligação directa de um delegado do evento e também sobre o li o mesmo efeito por propriedades específicas do evento -> <! DOCTYPE HTML > 
< HTML lang = "EN" > 
< corpo > 
  < ul o acima indicado do ID = 'Pai' > 
    < Li ID = "A" > A </ Li > 
    < Li ID = "B" > B </ Li > 
    < Li ID = "C" > C </ Li > 
    < Li ID = "d" > D </Li > 
  </ UL > 
  < script > 
  father.addEventListener ( ' Click ' , função (E) { 
    const Evento = E || o window.event; 
    alvo const = event.target || event.srcElement;
     // A determinação atributo de evento nó DOM atualmente está localizada, diferente programa de processamento de nó 
    interruptor (target.id) {
       caso  " a " : 
        o console.log ( ' a ' );
         INTERVALO ;
       caso  " B" : 
        Console.log ( ' b ' );
         ruptura ;
       caso  " c " : 
        console.log ( " C " );
         ruptura ;
       caso  " d " : 
        console.log ( " d " );
         ruptura ;
       default : 
        console.log ( ' default ' ); 
    } 
  }) 
  </ roteiro > 
</ Corpo >
</ Html >