O conceito de eventos
Evento: refere -se a alguns momentos de interação específicos que ocorrem em uma janela de documento ou navegador. Podemos agendar eventos através de ouvintes (ou manipuladores) para que o código correspondente seja executado quando o evento ocorrer.
1. Fluxo de eventos
1. Fluxo de eventos: descreve a ordem em que os eventos são aceitos na página
2. Bolhas de eventos: recebidas pelo elemento mais específico e depois propagadas de cima a passo a passo para o nó do elemento menos específico (documento)
3. Captura de eventos: O nó menos específico recebe o evento primeiro, enquanto o nó mais específico deve receber o evento por último.
2. Manuseio de eventos
1.html processamento de eventos: adicionar diretamente à estrutura HTML
2. Processamento de eventos de nível DOM0: Atribua uma função a um atributo de manipulador de eventos
3. Manipulação de eventos de nível DOM2:
AddEventListener ("Nome do evento", "Função do manipulador de eventos", valor booleano)
Verdadeiro: Captura de eventos
Falso: Bubbles de eventos
removerventListener ();
4. IE Manipulador de eventos
Anexevent
Destachevent
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </ad Head> <body> <div id = "div"> <botão id = "btn1"> button </botão> </div> <! manuseio ");} </script>-> <!-<cript> var Btn1 = document.getElementById (" Btn1 "); Btn1.OnClick = function () {alert (" Hello Dom 0 Event Handler ")}; // Substituiu Btn1.OnClick = FUNCT () {alert (alert")}; function () {alert ("hello dom de nível de evento 3")}; </script>-> <!-<cript> var btn1 = document.getElementById("btn1");btn1.addEventListener("click",demo1);btn1.addEventListener("click",demo2);btn1.addEventListener("click",demo3);function demo1(){alert("DOM2 level event handler 1");}function Demo2 () {alert ("Dom2 Level Event Handler 2");} função Demo3 () {alert ("Dom2 Level Event Handler 3");} Btn1.RemoveEventListener ("Click", Demo2) </Script>-> <Script> var Btn1 = document.getElementById ("BTN1"); if (BTN1.AddeventListener) {Btn1.adDeventListener ("Click", Demo);} else if (btn1.attachevent) {Btn1.attachevent ("onClick", Demo)}} {) {Btn1.attachevent. Demo () {alert ("hello");} </sCript> </body> </html>Iii. Objeto de evento
1. Objeto de evento: um objeto será gerado quando o evento DOM for acionado.
2. Evento de objeto de evento:
Tipo: Obtenha o tipo de evento
Alvo: Obtenha o alvo do evento
StopPropagation (): impedem os eventos de bolhas
PreventDefault (): Block Event Padase Comportamento
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "div"> <botão id = "btn1"> botão </butão> <a href = "http://www.bedu.com" id = "AID"> Baidu </a> </div> <cript> document.getElementById ("BTN1"). AddEventListener ("Click", Showtype); document.getElementByIdId ("div). addEventListener (" cliques); ShowDiv; document.GetElementIdId "). ADDEVENCIDEN showtype (event) {// alert (event.type); alert (event.target); event.stopPropagation (); // interromper as bolhas de eventos} ShowDiv () {alert ("div")} função showa (event) {// evento.stoppropation (); Event.PreventDefault ();} </script> </body> </html>