L'exécution du langage de script JavaScript doit être déclenchée. L'approche générale consiste à rédiger plusieurs fonctions directement sur la page Web. Certains d'entre eux sont traités par le navigateur lorsque le code est chargé ou utilise des codes similaires à ce qui suit pour déclencher l'implémentation des fonctions liées à la fonction.
<div id = ”link” onclick = ”fun ()”> </div>
Le code ci-dessus signifie que lorsque la souris clique sur un élément avec ID comme lien, son événement onClick est déclenché, puis la fonction amusante définie à l'aide de JavaScript est exécutée. Cette approche est définitivement déraisonnable, car l'opération de déclenchement est directement écrite dans la structure HTML, et le contenu et le comportement ne sont pas isolés, ce qui entraînera des inconvénients au développement ou aux modifications secondaires futurs.
Il convient de noter que lorsque le traitement des événements est lié à l'élément correspondant, les opérations ne peuvent être effectuées qu'après charger cet élément. Si le script traité est placé dans la zone de tête, le navigateur rapportera une erreur. Étant donné que l'élément HTML suivant n'a pas encore été chargé, le script de traitement dans la tête a été traité.
Un bon moyen d'exécuter le code JavaScript devrait être de séparer le contenu comportemental et de le traiter après le chargement de la page. Par conséquent, lorsque vous traitez avec JavaScript Code, nous devons utiliser les événements de chargement des auditeurs et des objets Windows.
Auditeur
La fonction réelle de l'auditeur est de séparer le comportement du contenu. Dans le passé, certains événements déclenchants étaient nécessaires pour déclencher des fonctions liées à JavaScript. Maintenant, nous utilisons directement un écouteur pour un élément de JavaScript pour écouter les événements de cet élément. Si cet élément est déclenché et que la fonction de traitement correspondante de cet événement est définie dans l'auditeur, cette fonction sera traitée.
La méthode standard de W3C est appelée AddeventListener, qui est prise en charge par IE9, Chrome, Firefox et Opera. La méthode d'écriture est:
window.adDeventListener ('Load', fonction, false);La méthode attachée en début IE a des effets similaires:
window.attachevent ('onload', fonction);La méthode d'utilisation d'un auditeur est également très simple. Il s'agit d'abord d'obtenir un élément dans la page, puis d'utiliser un écouteur pour cet élément pour définir l'événement écouté et la fonction de gestion des événements correspondants. Par exemple ci-dessus:
document.getElementById ('lien'). AddEventListener ('click', fun, false);Pour des instructions plus détaillées sur l'utilisation du moniteur, veuillez consulter les informations supplémentaires à la fin de l'article.
événement Window.Onload
L'événement Onload ne sera déclenché que lorsque la page entière a été entièrement chargée. Lorsque nous écrivons le code JavaScript dans l'événement Onload, nous pouvons nous assurer que le navigateur traitera notre code JavaScript une fois l'élément HTML chargé. Écriture de base:
window.onload = function () {// code}De cette façon, le code de cette fonction sera traité après le chargement. Cependant, cette méthode présente un inconvénient, à savoir qu'elle ne peut être utilisée que pour cette fonction. Les événements de plusieurs fenêtres ne peuvent pas apparaître sur la page. Si plusieurs événements Onload se produisent, le contenu ultérieur écrasera le précédent.
Ensuite, nous pouvons le faire, écrivez tous les noms de fonction qui doivent être chargés dans un événement Window.onad, puis définissez la fonction à l'extérieur:
window.onload = function () {func1 (); func2 (); } fonction func1 () {…} fonction func2 () {…}Bien que ce soit OK, il est très gênant car nous devons écrire tous les noms de fonction à charger, et il sera très difficile à modifier. Bien sûr, il doit y avoir une solution. JQuery fournit une méthode de chargement multi-script très puissante, il doit donc y avoir une solution pour JavaScript natif.
window.onload gère plusieurs fonctions simultanément
Nous devons écrire une fonction de traitement et regarder d'abord le code:
fonction addloadListener (fn) {if (typeof window.addeventListener! = 'undefined') {window.addeventListener ('Load', fn, false); } else if (typeof document.addeventListener! = 'undefined') {document.addeventListener ('Load', fn, false); } else if (typeof window.attachevent! = 'undefined') {window.attachevent ('onload', fn); } else {var oldfn = window.onload; if (typeof window.onload! = 'fonction') {window.onload = fn; } else {window.onload = function () {oldfn (); fn (); }; }}}Associons simplement cette fonction addloadListener personnalisée, en passant un nom de fonction en tant que paramètre. Il détermine d'abord si le navigateur prend en charge l'auditeur compétent. S'il prend en charge l'auditeur, il utilise l'auditeur pour écouter les événements Onload de l'objet Window, puis gère cette fonction. Ce code utilise l'instruction IF pour juger tous les événements d'écoute de tous les navigateurs et est compatible avec les navigateurs.
Nous mettons ce code en haut du segment de code JavaScript, puis définissons les fonctions pertinentes ci-dessous, puis utilisons l'instruction suivante pour charger la fonction JavaScript.
addloadListener (func); fonction func () {…}De cette façon, toutes les fonctions JavaScript doivent être traitées après le chargement de la page. Vous pouvez utiliser directement la fonction addloadListener et plusieurs fonctions peuvent être utilisées. D'une manière générale, il est préférable de charger tout JavaScript en utilisant l'événement Onload pour éviter des situations inattendues.