JavaScriptスクリプト言語の実行をトリガーする必要があります。一般的なアプローチは、いくつかの関数をWebページに直接記述することです。それらのいくつかは、コードがロードされたときにブラウザによって処理されるか、以下と同様のコードを使用して、関数に関連する関数の実装をトリガーします。
<div id =” link” onclick =” fun（）”> </div>
上記のコードは、マウスがリンクとしてIDを使用して要素をクリックすると、そのonClickイベントがトリガーされ、JavaScriptを使用して定義されたFUN関数が実行されることを意味します。トリガー操作はHTML構造に直接書き込まれ、内容と動作が隔離されていないため、このアプローチは間違いなく不合理です。これにより、将来の二次開発や修正に不便が生じます。
イベント処理が対応する要素に結合している場合、操作はその要素がロードされた後にのみ実行できることに注意する必要があります。処理されたスクリプトがヘッドエリアに配置されている場合、ブラウザはエラーを報告します。次のHTML要素はまだロードされていないため、ヘッド内の処理スクリプトが処理されています。
JavaScriptコードを実行する良い方法は、行動コンテンツを分離し、ページの読み込み後に処理することです。したがって、JavaScriptコードを処理する場合、リスナーとウィンドウオブジェクトのロードイベントを使用する必要があります。
リスナー
リスナーの実際の機能は、動作をコンテンツから分離することです。過去には、JavaScript関連の機能をトリガーするために、いくつかのトリガーイベントが必要でした。これで、JavaScriptの要素のリスナーを直接使用して、この要素のイベントを聞きます。この要素がトリガーされ、このイベントの対応する処理関数がリスナーで定義されている場合、この関数は処理されます。
W3Cの標準的な方法は、IE9、Chrome、Firefox、およびOperaでサポートされているAddEventListenerと呼ばれます。ライティング方法は次のとおりです。
window.addeventlistener（ 'load'、function、false）;
初期のIEのAccationEventメソッドには同様の効果があります。
window.attachevent（ 'onload'、function）;
リスナーを使用する方法も非常に簡単です。最初にページ内の要素を取得し、次にこの要素のリスナーを使用して、リスニングされたイベントと対応するイベント処理機能を定義することです。たとえば、上記：
document.getElementById（ 'link'）。addeventlistener（ 'click'、fun、false）;
モニターの使用に関する詳細な手順については、記事の最後にある補足情報をご覧ください。
window.onloadイベント
オンロードイベントは、ページ全体が完全にロードされている場合にのみトリガーされます。 JavaScriptコードをOnloadイベントに記述すると、HTML要素がロードされた後にブラウザがJavaScriptコードを処理できるようにします。基本的な書き込み：
window.onload = function（）{// code}このようにして、この関数のコードはロード後に処理されます。ただし、この方法には欠点があります。つまり、この関数にのみ使用できるということです。複数のwindow.onloadイベントはページに表示されません。複数のオンロードイベントが発生した場合、後続のコンテンツは前のコンテンツを上書きします。
次に、これを行い、ウィンドウにロードする必要があるすべての関数名を記述し、ロードイベントを使用してから、外部の関数を定義します。
window.onload = function（）{func1（）; func2（）; }関数func1（）{…} function func2（）{…}これは大丈夫ですが、ロードするためにすべての関数名を書く必要があるため、非常に不便です。変更するのは非常に厄介です。もちろん、解決策がなければなりません。 jQueryは非常に強力なマルチスクリプトローディング方法を提供するため、ネイティブJavaScriptのソリューションが必要です。
window.onload複数の機能を同時に処理します
処理機能を作成し、最初にコードを確認する必要があります。
関数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 windof.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（）; }; }}}このカスタムaddloadlistener関数を解析して、関数名をパラメーターとして渡すだけです。まず、ブラウザが関連するリスナーをサポートするかどうかを決定します。リスナーをサポートする場合、リスナーを使用してウィンドウオブジェクトのオンロードイベントを聞き、この関数を処理します。このコードは、IFステートメントを使用して、すべてのブラウザのリスニングイベントを判断し、クロスブラウザー互換です。
このコードをJavaScriptコードセグメントの上部に配置し、以下の関連関数を定義し、次のステートメントを使用してJavaScript関数をロードします。
addloadlistener（func）; function func（）{…}このようにして、ページが読み込まれた後、JavaScript関数を処理する必要があります。 AddLoadListener関数を直接使用でき、複数の機能を使用できます。一般的に言えば、オンロードイベントを使用してすべてのJavaScriptをロードして、予期しない状況を回避することをお勧めします。