Hay tres formas de manejar eventos de JavaScript: 1. Controlador de eventos HTML, agregue el controlador de eventos directamente en el código HTML, la sintaxis es "<elemento evento = función de evento...>" 2. Controlador de eventos de nivel DOM0, para el objeto especificado Para agregar procesamiento de eventos, la sintaxis es "element object.event=function(){...}" 3. Los controladores de eventos de nivel DOM2 también se agregan a objetos específicos y se utilizan principalmente para manejar las operaciones de especificación y eliminar controladores de eventos.
El entorno operativo de este tutorial: sistema Windows 10, versión JavaScript 1.8.5, computadora Dell G3.
Tres formas de utilizar controladores de eventos de Javascript
Cuando ocurre un evento, tenemos que manejarlo. Hay tres métodos principales de controladores de eventos de Javascript:
1. controlador de eventos HTML
Es decir, agregamos controladores de eventos directamente en el código HTML, como el siguiente código:
<input id="btn" value="Button" type="button" onclick="showmsg();"> <script> function showmsg(){ alert("HTML agregado manejo de eventos");Del código anterior, podemos ver que el procesamiento de eventos está directamente anidado en el elemento. Esto tiene un problema: el acoplamiento entre el código HTML y js es demasiado fuerte. Si algún día desea cambiar showmsg en js, entonces no solo. ¿Tienes que hacerlo? Si lo modificas en js, también debes modificarlo en html. Podemos aceptar una o dos modificaciones, pero cuando tu código alcanza el nivel de 10,000 líneas, la modificación requerirá mucho tiempo y dinero. , no recomendamos este método.
2. Controlador de eventos DOM nivel 0
Es decir, para agregar procesamiento de eventos para el objeto especificado, observe el siguiente código:
<input id="btn" value="Button" type="button"> <script> var btn= document.getElementById("btn"); btn.onclick=function(){ alert("Procesamiento de eventos agregados a nivel DOM" ); } btn.onclick=null;//Si desea eliminar el evento de clic de btn, simplemente configúrelo en nulo</script>En el código anterior, podemos ver que, en comparación con los controladores de eventos HTML, los eventos DOM de nivel 0, el acoplamiento entre el código HTML y el código js se ha reducido considerablemente. Sin embargo, los programadores inteligentes todavía no están satisfechos y esperan encontrar una forma más sencilla de solucionarlo. Veamos la tercera forma de solucionarlo.
3. Controlador de eventos de nivel DOM2
DOM2 también agrega controladores de eventos a objetos específicos, pero involucra principalmente dos métodos para manejar las operaciones de especificar y eliminar controladores de eventos: addEventListener() y removeEventListener(). Todos reciben tres parámetros: el nombre del evento a manejar, la función como controlador de eventos y un valor booleano (si manejar el evento en la fase de captura), mire el siguiente código:
<input id="btn" value="Button" type="button"> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",showmsg,false);//Aquí estamos son Establezca el último valor en falso, es decir, no se procesará en la etapa de captura. En términos generales, el procesamiento burbujeante tiene mejor compatibilidad en varios navegadores. function showmsg(){ alert("Manejador de eventos agregado a nivel DOM"); btn.removeEventListener ("click",showmsg,false);//Si desea eliminar este evento, simplemente pase los mismos parámetros</script>Aquí podemos ver que al agregar y eliminar procesamiento de eventos, el último método es más directo y simple. Sin embargo, Ma Haixiang les recuerda a todos que al procesar el evento de eliminación, los parámetros pasados deben ser consistentes con los parámetros anteriores; de lo contrario, la eliminación no será válida.
Amplíe sus conocimientos:
El flujo de eventos describe el orden en que se reciben los eventos en una página. En los primeros días del desarrollo de los navegadores, los dos principales fabricantes de navegadores, IE y Netscape, estaban en desacuerdo, lo que llevó a una situación frustrante. El flujo de eventos era completamente diferente. Eso es con lo que estamos familiarizados: la difusión de eventos de IE, la captura de eventos de Netscape. Primero tomemos una fotografía y veamos brevemente la estructura:
1. Evento burbujeante
La propagación de eventos significa que el evento es recibido inicialmente por el elemento más específico (el nodo con el nivel de anidamiento más profundo en el documento) y luego se propaga hacia arriba hasta el nodo menos específico (el documento). Tome la imagen de arriba para ilustrar, cuando se hace clic en la parte del texto, primero la recibe el elemento en el texto y luego la propaga a la ventana paso a paso, es decir, el proceso de 6-7-8-9-10. se ejecuta.
2. Captura de eventos
La captura de eventos significa que el evento es recibido primero por el nodo menos específico y el nodo más específico recibe el evento al final. De manera similar, en el modelo anterior, cuando se hace clic en la parte de texto, la ventana primero la recibe y luego la propaga al elemento de texto paso a paso, es decir, se ejecuta el proceso de 1-2-3-4-5.