Lecturas relacionadas:
JavaScript Event Learning Resumen (V) Tipo de evento de ratón en JS
//www.vevb.com/article/86259.htm
JavaScript Event Learning Resumen (I) Flujo de eventos
//www.vevb.com/article/86261.htm
JavaScript Event Learning Resumen (IV) Miembros públicos del evento (propiedades y métodos)
//www.vevb.com/article/86262.htm
JavaScript Event Learning Summary (ii) JS Event Handler
//www.vevb.com/article/86264.htm
JavaScript Event Learning Resumen (III) JS Event Object
//www.vevb.com/article/86266.htm
1. Objeto de evento
1. Comprenda el objeto del evento
Existen eventos en el navegador como objetos, es decir, evento. Activar un evento generará un evento de objeto de evento, que contiene toda la información relacionada con el evento. Incluye los elementos que dan como resultado el evento, el tipo de evento y otra información relacionada con un evento específico.
Por ejemplo: el evento generado por la operación del mouse contendrá información sobre la posición del mouse; El evento generado por la operación del teclado contendrá información relacionada con la tecla presionada.
Todos los navegadores admiten objetos de eventos, pero los métodos de soporte son diferentes. En DOM, los objetos de eventos deben pasar a las funciones de manejo de eventos como parámetros únicos. En IE, el evento es un atributo de objetos de ventana.
2. Evento en el controlador de eventos HTML
<input id = "btn" type = "button" value = "click" onclick = "console.log ('HTML Event Handler'+Event.Type)"/>Esto crea una función que contiene el evento variable local. Se puede acceder al objeto del evento directamente a través del evento.
3. Objetos de evento en DOM
Los controladores de eventos en el nivel DOM0 y el nivel DOM2 pasarán el evento como parámetros.
<body> <input id = "btn" type = "button" value = "haga clic"/> <script> var btn = document.getElementById ("btn"); btn.onclick = function (event) {console.log ("dom0 y click"); console.log (event.type); //clickhthbtn.addeventListener("Click ", function (event) {console.log (" dom2 y click "); console.log (event.type); // click}, falso); </script> </body>4. Objetos de evento en IE
El primer caso: al agregar un controlador de eventos a través del método de nivel DOM0, el objeto de evento existe como un atributo del objeto de la ventana.
<body> <input id = "btn" type = "button" valor = "clic"/> <script> var btn = document.getElementById ("btn"); btn.onclick = function () {var event = window.event; console.log (event.type); // Haga clic} </script> </body>El segundo caso: el controlador de eventos se agregó a través de AttackEvent (), y el objeto de evento se pasa como parámetro.
<body> <input id = "btn" type = "button" valor = "clic"/> <script> var btn = document.getElementById ("btn"); btn.attachevent ("onclick", function (type)Pero no entiendo dos cosas.
1. Un parámetro de evento también se puede pasar al controlador de eventos agregado a través del método de nivel DOM0. Su tipo es el mismo que Window.event.Type, pero el parámetro de evento pasado es diferente de Window.Event. ¿Por qué?
btn.onclick = function (event) {var event1 = window.event; console.log ('event1.type ='+event1.type); //event1.type=ClickConsole.log('Event.Type='+Event.Type); //event.type=ClickConsole.log('Event1==Event?'+(Event==Event1)); // evento1 == Evento? Falso}2. El evento aprobado en el controlador de eventos agregado a través de sujectEvent es diferente de Window.Event. ¿Por qué?
<body> <input id = "btn" type = "button" valor = "clic"/> <script> var btn = document.getElementById ("btn"); btn.attachevent ("onclick", function (type) {console.log (event.type); //clickconsole.log("event==window.event?"+(event==Window.event));Lo anterior es el resumen de JavaScript Event Learning (III) Conocimiento relacionado sobre los objetos de eventos JS introducidos por el editor. Espero que sea útil para todos. Si desea saber más, ¡preste atención al sitio web de Wulin.com!