El concepto de eventos
Evento: se refiere a algunos momentos de interacción específicos que ocurren en un documento o ventana del navegador. Podemos programar eventos a través de los oyentes (o manejadores) para que el código correspondiente se ejecute cuando ocurra el evento.
1. Flujo de eventos
1. Flujo de eventos: describe el orden en que se aceptan los eventos en la página
2. Burbujas de eventos: recibidas por el elemento más específico y luego propagado hacia arriba paso a paso al nodo del elemento menos específico (documento)
3. Captura del evento: el nodo menos específico recibe el evento primero, mientras que el nodo más específico debe recibir el evento por última vez.
2. Manejo de eventos
1. Procesamiento de eventos HTML: Agregue directamente a la estructura HTML
2. Procesamiento de eventos de nivel DOM0: asigne una función a un atributo de controlador de eventos
3. Manejo de eventos de nivel DOM2:
addEventListener ("Nombre del evento", "Función de controlador de eventos", valor booleano)
Verdadero: Captura de eventos
Falso: burbujas de eventos
RemoLEventListener ();
4. IE Handler de eventos
adjunta
desplegable
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "div"> <botón id = "btn1"> botón </botón> </sh!-<script> function delo () {alerta ("hola html handling");} </script script-------------<! btn1 = document.getElementById ("btn1"); btn1.OnClick = function () {alert ("Hello Dom0 Level Event Handler")}; // anvered Btn1.onClick = function () {Alert ("HOLO DOM0 Vandador de eventos de nivel 2")}; Btn1.OnClick = function () {alerta alerta ("Hello DOM0 Level Handler 3 ")}; </script>-> <!-<script> var btn1 = document.getElementById (" btn1 "); btn1.addeventListener (" click ", demo1); btn1.addeventListener (" click ", delo2); btn1.addevententlistener (" click ", demo3); Demo1 () {Alert ("Dom2 Level Event Handler 1");} function Demo2 () {Alert ("DOM2 Level Event Handler 2");} function Demo3 () {Alert ("Dom2 Level Event Handler 3");} BTN1.RemoveVentListener ("Click", Demos2) </script>-> <script> Var BTN1 = document.getElementById ("btn1"); if (btn1.addeventListener) {btn1.addeventListener ( demo () {alerta ("hola");} </script> </body> </html>Iii. Objeto de evento
1. Objeto del evento: se generará un objeto cuando se active el evento DOM.
2. Evento Objeto Evento:
Tipo: Obtenga el tipo de evento
Objetivo: Obtenga el objetivo del evento
stopPropagation (): prevenir los eventos de las burbujas
PreventDefault (): Bloqueo de comportamiento predeterminado del evento
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "div"> <botón id = "btn1"> botón </botón> <a href = "http://www.baidu.com" id = "ayuda"> baidu </a> </div> <script> document.getElementById ("btn1"). addEventListener ("haga clic", showType); document.getElementById ("div"). addEventListener ("click", showDiv); document.getElementByid ("aid"). addEdEventListener ("click", ", click", showa); showType (event) {// alert (event.type); alert (event.target); event.stoppropagation (); // stop Event Bubbles} function showDiv () {alert ("div")} function showA (event) {// event.stoppopagation (); // event.preventDefault ();} </script </script </body>