Monitoreo de eventos
El monitoreo de eventos es dejar que la computadora espere a que ocurra un evento, y cuando este evento ocurre, responde a él, como esperar a que el mouse haga clic en el botón, hacer clic para abrir una nueva página cuando ocurre; pero el evento de monitoreo que escribió encontró esto Después del evento, se bloqueará para que no pueda saltar.
El monitoreo de eventos involucra tres objetos de clase
1. EventSource (origen del evento) donde ocurrió el evento
2. Evento: el evento encapsula eventos específicos que ocurren en los componentes de la interfaz.
3. EventListener (detector de eventos): responsable de monitorear eventos desde la fuente del evento
Uso de monitoreo de eventos
1. Cuando el mismo objeto usa .onclick para activar varios métodos, el último método sobrescribirá el método anterior, es decir, cuando se produzca el evento onclick del objeto, solo se ejecutará el último método enlazado. Con la supervisión de eventos, no habrá cobertura y se ejecutarán todos los eventos vinculados.
window.onload = function(){
var btn = document.getElementById("yuanEvent");
btn.onclick = function(){
alert("第一个事件");
}
btn.onclick = function(){
alert("第二个事件");
}
btn.onclick = function(){
alert("第三个事件");
}
}
2. Una vez que se utiliza el detector de eventos para vincular el objeto, se puede liberar la vinculación correspondiente.
var eventOne = function(){
alert("第一个监听事件");
}
function eventTwo(){
alert("第二个监听事件");
}
window.onload = function(){
var btn = document.getElementById("yuanEvent");
btn.addEventListener("click",eventOne);
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
}
3. Al desvincular el evento, debe utilizar el identificador de la función. Es imposible desvincular la función completa escribiéndola.
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
Modelo de evento
Hay dos modelos de eventos en javascript: DOM0 y DOM2.
El modelo de eventos de nivel DOM0 es un modelo de eventos temprano, compatible con todos los navegadores, y su implementación es relativamente simple.
<p id = 'click'>click me</p>
<script>
document.getElementById('click').onclick = function(event){
alert(event.target);
}
</script>
Este modelo de evento es para registrar el nombre del evento directamente en el objeto dom. Este código es para registrar un evento onclick en la etiqueta p y generar el objetivo de clic dentro de la función de evento. Descartar el evento es aún más simple, que es copiar nulo a la función de evento, de la siguiente manera:
document.getElementById('click'_).onclick = null;
De esto podemos saber que en dom0, un objeto dom solo puede registrar una función del mismo tipo, porque si se registran múltiples funciones del mismo tipo, se producirá sobreescritura y la función previamente registrada no será válida.
El modelo de eventos de nivel DOM2 es un modelo de captura y propagación, que es un evento. Primero debe capturarse y luego propagarse los
eventos de registro y liberación de
nivel DOM2 . En el nivel DOM2, addEventListener y removeEventListener se utilizan para registrar y liberar eventos. La ventaja de esta función en comparación con el método anterior es que un objeto dom puede registrar múltiples eventos del mismo tipo, sin cobertura de eventos, y ejecutar cada función de evento a su vez.