Directorio artículo
Evento se refiere a JavaScript se puede detectar el comportamiento.
flujo de eventos se refiere a la orden recibida desde la página del evento, la secuencia de eventos también se entiende en la página de difusión.
Las cosas podrían haber sido así,
Microsoft IE flujo de eventos se llama burbujeo evento (eventbubbling), Microsoft cree que en el momento en que comience el evento que reciben el elemento específico mayoría (el nivel de anidamiento más profundo de los nodos en el documento), luego se extendió progresivamente hacia arriba para no nodo más específica (documento) .
La idea de Netscape Navigator de Netscape es menor nodo específico debe ser recibida evento anterior, y la mayoría de los nodos específicos deben durar recibido evento.
Finalmente W3C sobre el desarrollo del flujo del evento se divide en tres fases:
- Captura de eventos: desde el exterior al interior
- mesa de blancos
- burbujeante Evento: de adentro hacia afuera, cuando un elemento hijo del elemento padre tiene el mismo evento, desencadena cuando un elemento secundario es el elemento padre se activará burbujeante mecanismo.
Yo este artículo es explicar el alcance del flujo principal de los acontecimientos. Porque antes de preguntas de la entrevista visto preguntaron en el caso de una burbuja gigante y, finalmente, a la que el extremo. No sé la respuesta, en los resultados de búsqueda en línea, la respuesta es no asociado, tenía que hacerlo usted mismo. Mis propios resultados de la prueba están fuera. Y la referencia a "Programación JavaScript avanzado", si algo va mal, por favor, corríjanme
Con dos maneras de lograr eventos de monitor
-
addEventListener(event,function,useCapture)- evento: Evento, cuerdas, hay necesidad de poner en "on", como un evento de clic del ratón acaba de escribir "clic"
- función: la función cuando se llama a este método para ser ejecutado
- useCapture: ya sea en la fase de captura, el valor predeterminado es falso, el evento no se ejecuta cuando fue capturado
- No es compatible con Internet Explorer 8 y por debajo
-
attachEvent(event,function)- evento: un evento, una cadena, es necesario agregar "sobre", como que necesita un clic del ratón al evento pueden escribir "onclick"
- función: la función cuando se llama a este método para ser ejecutado
- Sólo es compatible con Internet Explorer 8 y por debajo , esta función no puede ver una fase de captura de eventos (desde IE4 hizo después del evento de burbujeando a IE8, es decir, también insiste en que debe considerarse como un evento de propagación flujo de eventos).
-
Si quieres compatibles ambos navegadores, entonces Chant escribimos una función de detector
para copiar la siguiente función de su código para
parámetros:- elemento que llegar a los elementos
- evento de tipo cadena, que desea controlar el tiempo
- función de devolución de llamada de retorno
- bool tipo booleano
- Si desea escuchar fase de propagación de falsas relleno
- Si desea escuchar fase de captura para llenar cierto
function addEvent(element, event, callback, bool) {
if (element.addEventListener) {
element.addEventListener(event, callback, bool);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callback)
}
}
rango de flujo de eventos
Aquí voy a introducir una serie de captura de eventos, el código de tiempo fijado, puede hacerlo por uno mismo.
1. E11-IE9, y otros navegadores (Chrome, Firefox, etc.) son de salida como se muestra a continuación, que es:
- Captura de eventos Etapa:
window-->document-->html-->body-->父元素-->子元素 - Evento fase de propagación:
子元素-->父元素-->body-->html-->document-->window
ventana de captura de eventos es desde el principio, y finalmente a que termine el proceso de burbujeo ventana.
2. IE8-IE6 y la salida se muestra, es decir,
- Evento fase de propagación:
子元素-->父元素-->body-->html-->document
El último proceso de burbujeo evento para documentar el final.
Explicar por qué la salida de los dos, ver el siguiente código sabrá, yo uso la función de detector de arriba definido, la función de monitor que IE8 para usar las siguientes attachEvent, que no requiere parámetro booleano, que escribí monitorear el riesgo la burbuja y la captura del código se ejecutará como una captura.
Pero esto también se puede ver, el orden y el código de localización es capturado bien lamentos.
3. No acabado. Dice "JavaScript Programación avanzada" IE5.5 y por debajo de las versiones, se saltará <html>la etiqueta, lo que significa que la fase de propagación de eventos: 子元素-->父元素-->body-->document
Pero en realidad me pone a prueba IE5 a continuación: 子元素-->父元素-->body-->html-->document
Pero también el evento final proceso de burbujeo al final del documento.
código
CSS:
#mydiv {
width: 150px;
height: 150px;
padding: 20px;
background-color: antiquewhite;
}
#mypar {
width: 100px;
height: 100px;
background-color: seagreen;
}
html:
<div id="mydiv">
<p id="mypar"></p>
</div>
js
var p = document.getElementById("mypar");
var div = document.getElementById("mydiv");
var body = document.getElementsByTagName("body")[0];
var html = document.getElementsByTagName("html")[0];
//捕获
addEvent(p, 'click', function() {console.log('p')}, true);
addEvent(div, 'click', function() {console.log('div')}, true);
addEvent(body, 'click', function() {console.log('body')}, true);
addEvent(html, 'click', function() {console.log('html')}, true);
addEvent(document, 'click', function() {console.log('document')}, true);
addEvent(window, 'click', function() {console.log('window')}, true);
//冒泡
addEvent(p, 'click', function() {console.log('p')}, false);
addEvent(div, 'click', function() {console.log('div')}, false);
addEvent(body, 'click', function() {console.log('body')}, false);
addEvent(html, 'click', function() {console.log('html')}, false);
addEvent(document, 'click', function() {console.log('document')}, false);
addEvent(window, 'click', function() {console.log('window')}, false);
function addEvent(element, event, callback, bool) {
if (element.addEventListener) {
element.addEventListener(event, callback, bool);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callback)
}
}
Soy una Lian Luo, me encanta en un callejón sin salida
