Cuando se habla de eventos de JavaScript, es difícil evitar tres temas: burbujas de eventos, captura de eventos y bloqueo de eventos predeterminados, ya sea entrevista o en el trabajo diario.
1. Burbujas de eventos
Echemos un vistazo a un código:
var $ input = document.getElementsBytagName ("input") [0]; var $ div = document.getElementsByTagName ("div") [0]; var $ body = document.getElementsByTagName ("cuerpo") [0]; $ input.onclick = function (e) {this.style.border = "5px sólido rojo" var e = e |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||loB'||||||||loH|||||||||loHpxer ventana.e; alerta ("rojo")} $ div.onclick = function (e) {this.style.border = "5px sólido verde" alert ("verde")} $ body.onclick = function (e) {this.style.border = "5px sólido amarillo" alerta "alerta")}}}}código HTML
<div> <input type = "button" value = "test Event Bubbles" /> </div> "rojo", "verde", "amarillo" aparece a su vez.
Su intención original es activar el elemento del botón, pero se activa junto con el evento ligado al elemento principal. Esta es la burbuja del evento.
Si el evento de enlace a la entrada se cambia a:
$ input.OnClick = function (e) {this.style.border = "5px sólido rojo" var e = e || ventana.e; alerta ("rojo") e.stoppropagation ();}En este momento, solo aparecerá "rojo" porque evita que el evento burbujee.
2. Captura de eventos
Dado que hay un burbujeo de eventos, puede haber una captura de eventos, que es un proceso inverso. La diferencia es del elemento superior al elemento de destino o del elemento de destino al elemento superior.
Veamos un código:
$ input.adDeventListener ("click", function () {this.style.border = "5px sólido rojo"; alerta ("rojo")}, true) $ div.addeventListener ("click", function () {this.style.border = "5px sólido verde"; alerta ("verde")}, verdadero) $ body.addeventlistener ("click", "() orther this.style.border = "5px Solid Yellow";En este momento, "amarillo", "verde", "rojo" aparece uno por uno, que es la captura del evento.
3. Bloquear el evento predeterminado
Hay algunos comportamientos predeterminados de elementos HTML, como la etiqueta A, y habrá una acción de salto después de hacer clic; La entrada de tipo de envío en el formulario Formulario tiene un evento de salto de envío predeterminado; La entrada de tipo de reinicio tiene un comportamiento de formulario de reinicio. Si desea bloquear el comportamiento predeterminado del navegador, JavaScript le proporciona un método.
var $ a = document.getElementsBytagName ("A") [0]; $ a.onclick = function (e) {alerta ("La acción de salto fue bloqueada por mí") E.PreventDefault (); // return false; // también es posible} <a href = "http://keleyi.com"> ke leyi </a> El evento predeterminado se ha ido.Dado que el retorno falso y E.PreventDefault () tienen el mismo efecto, ¿hay alguna diferencia? Por supuesto que hay.
El comportamiento predeterminado de los hosts de eventos solo se puede organizar en atributos de eventos HTML y métodos de manejo de eventos de nivel DOM0.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.