La ejecución del lenguaje de secuencias de comandos JavaScript debe activarse. El enfoque general es escribir varias funciones directamente en la página web. Algunos de ellos son procesados por el navegador cuando se carga el código, o usan códigos similares a los siguientes para activar la implementación de las funciones relacionadas con la función.
<div id = "link" onClick = "diversión ()"> </div>
El código anterior significa que cuando el mouse hace clic en un elemento con ID como enlace, se activa su evento OnClick y luego se ejecuta la función divertida usando JavaScript. Este enfoque definitivamente no es razonable, porque la operación de activación se escribe directamente en la estructura HTML, y el contenido y el comportamiento no están aislados, lo que causará inconvenientes para el desarrollo o modificaciones secundarias futuras.
Cabe señalar que cuando el procesamiento de eventos está vinculado al elemento correspondiente, las operaciones solo se pueden realizar después de cargar ese elemento. Si el script procesado se coloca en el área de la cabeza, el navegador informará un error. Debido a que el siguiente elemento HTML aún no se ha cargado, se ha procesado el script de procesamiento en la cabeza.
Una buena manera de ejecutar el código JavaScript debe ser separar el contenido de comportamiento y procesarlo después de la carga de la página. Por lo tanto, al tratar con el código JavaScript, necesitamos usar los eventos de carga de oyentes y objetos de ventana.
Oyente
La función real del oyente es separar el comportamiento del contenido. En el pasado, se necesitaban algunos eventos desencadenantes para activar funciones relacionadas con JavaScript. Ahora, usamos directamente un oyente para un elemento en JavaScript para escuchar eventos de este elemento. Si este elemento se activa y la función de procesamiento correspondiente para este evento se define en el oyente, se procesará esta función.
El método estándar de W3C se llama AddEventListener, que es compatible con IE9, Chrome, Firefox y Opera. El método de escritura es:
Window.AdDeventListener ('Load', función, falso);El método adjunte de eventos en el IE temprano tiene efectos similares:
window.attachevent ('onload', function);El método de usar un oyente también es muy simple. Primero es obtener un elemento en la página y luego usar un oyente para este elemento para definir el evento escuchado y la función de manejo de eventos correspondiente. Por ejemplo arriba:
document.getElementById ('enlace'). addEventListener ('hacer clic', diversión, falso);Para obtener instrucciones más detalladas sobre el uso del monitor, consulte la información complementaria al final del artículo.
Window.onload evento
El evento de Onload solo se activará cuando toda la página se haya cargado completamente. Cuando escribimos el código JavaScript en el evento Onload, podemos asegurarnos de que el navegador procese nuestro código JavaScript después de cargar el elemento HTML. Escritura básica:
Window.Onload = function () {// código}De esta manera, el código en esta función se procesará después de la carga. Sin embargo, este método tiene un inconveniente, que es que solo se puede usar para esta función. Múltiples eventos de ventana. Los eventos de la carga no pueden aparecer en la página. Si se producen múltiples eventos de Onload, el contenido posterior sobrescribirá el anterior.
Luego, podemos hacer esto, escribir todos los nombres de funciones que deben cargarse en un evento de ventana.
window.Onload = function () {func1 (); func2 (); } función func1 () {...} function func () {...}Aunque esto está bien, es muy inconveniente porque necesitamos escribir todos los nombres de funciones que se cargarán, y será muy problemático modificarlo. Por supuesto, debe haber una solución. JQuery proporciona un método de carga múltiple muy potente, por lo que debe haber una solución para JavaScript nativo.
Window.onload maneja múltiples funciones simultáneamente
Necesitamos escribir una función de procesamiento y mirar el código primero:
función addLoadListener (fn) {if (typeof window.adDeventListener! = 'Undefined') {Window.adDeventListener ('load', fn, false); } else if (typeof document.adDeventListener! = 'Undefined') {document.adDeventListener ('load', fn, falso); } else if (typeof window.attachevent! = 'undefined') {window.attachevent ('onload', fn); } else {var Oldfn = Window.Onload; if (typeof window.onload! = 'function') {window.onload = fn; } else {window.onload = function () {Oldfn (); fn (); }; }}}Simplemente analicemos esta función AddLoadListener personalizada, pasando un nombre de función como parámetro. Primero determina si el navegador admite el oyente relevante. Si admite el oyente, utiliza el oyente para escuchar eventos de información del objeto de la ventana y luego maneja esta función. Este código utiliza la declaración IF para juzgar los eventos de escucha de todos los navegadores y es compatible con el navegador cruzado.
Ponemos este código en la parte superior del segmento de código JavaScript, luego definimos las funciones relevantes a continuación y luego usamos la siguiente declaración para cargar la función JavaScript.
addLoadListener (func); función func () {...}De esta manera, cualquier función de JavaScript debe procesarse después de cargar la página. Puede usar la función AddLoadListener directamente y se pueden usar múltiples funciones. En términos generales, es mejor cargar todo JavaScript usando el evento de Onload para evitar situaciones inesperadas.