window.onload 使用ガイド_JavaScript のヒント-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

window.onload 使用ガイド_JavaScript のヒント

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

多くの場合、Web ページの JavaScript スクリプトコードは、ドキュメントが読み込まれた後に実行する必要があります。そうしないと、この状況を回避するために、次の 2 つの方法を使用できます。

1. スクリプトコードを Web ページの下端に配置します。これにより、スクリプトコードを実行するときに、操作対象のオブジェクトが確実に読み込まれます。
2. window.onload を通じてスクリプトコードを実行します。

最初の方法は煩雑に感じられます (実際、これをお勧めします)。多くの場合、スクリプトコードをより適切な場所に配置する必要があるため、window.onload メソッドの方が良い選択です。 window.onload は、ドキュメントが読み込まれるときにトリガーされるイベントです。このイベントのイベントハンドラーを登録し、そのイベントハンドラー内で実行されるスクリプトコードを記述することで、オブジェクトを取得できないことを回避できます。。まずコード例を見てみましょう:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F90";
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

ログイン後にコピー

上記のコードの本来の目的は、div の背景色を #F90 に設定することですが、この効果は達成されません。これは、コードが document.getElementById(" に対して実行されるときに順次実行されるためです。 #bg").style.backgroundColor="#F90" と記述した時点では、この div オブジェクトはまだ読み込まれていないため、設定は成功しません。コードは次のように変更されます:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>位置高度div垂直居中</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
 document.getElementById("bg").style.backgroundColor="#F90";
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

ログイン後にコピー

その理由は、window.onload のイベント処理関数内に背景色を設定するコードが配置されており、ドキュメントがロードされたときにのみイベント処理関数と背景色を設定するスクリプトコードが実行されるためです。

イベントハンドラー関数バインディング:

方法 1:

window.onload=function(){}、上記のコードでは、このメソッドはイベント処理関数を window.onload イベントにバインドするために使用されています。もちろん、ここでバインドされているのは非匿名関数です。関数をバインドすることもできます。コード例は次のとおりです。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法详解</title>
<script type="text/javascript">
window.onload=function myalert()
{
");
}
</script>
</head>
<body>

</body>
</html>

ログイン後にコピー

上記のコードは、myalert メソッドを window.onload イベントにバインドできますが、次の方法で複数のイベントハンドラーをこのイベントにバインドすることはできません。

window.onload=function a(){}

window.onload=function b(){}

上記のコードは複数のイベント処理関数を window.onload イベントにバインドできませんが、最後の関数は以前の関数をすべて上書きします。ただし、コードは変更できます:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
 function a(){
  document.getElementById("bg").style.backgroundColor="#F90";
 }
 function b(){
  document.getElementById("bg").style.width="200px";
 }
 a();
 b();
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

ログイン後にコピー

上記のコードは、複数のイベント処理関数をバインドするのと同じ効果を実現します。

方法 2:

addEventListener() とattachEvent() を使用して、イベント処理関数を onload イベントにバインドできます。以下がそれぞれ導入されています。 addEventListener() はイベント処理関数をバインドする現在の標準的な方法ですが、IE8 以前のブラウザではこのメソッドがサポートされていません。例は次のとおりです。

上記のコードは、複数のイベントハンドラーを window.onload イベントにバインドできます。構文形式の簡単な説明:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.addEventListener("load",bg,false);
window.addEventListener("load",changeW,false);
function bg(){
 document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
 document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

ログイン後にコピー

addEventListener("type", 関数名, false)

addEventListener() 関数には 3 つのパラメーターがあります。最初のパラメーターはイベントタイプ名の前に on を付けることはできないことに注意してください。たとえば、window.onload イベントは次のようにのみ記述できます。 2 番目のパラメータはバインドされる関数の名前で、3 番目のパラメータは通常 false です。

AttachEvent() 関数を使用してイベント処理関数をバインドします:

IE9 より前の IE ブラウザは addEventListener() 関数をサポートしていないため、attachEvent() 関数が使用されます。コード例は次のとおりです。

上記のコードの効果は、addEventListener() 関数を使用した場合と同じです。構文形式を簡単に紹介します。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
window.attachEvent("onload",bg);
window.attachEvent("onload",changeW);
function bg(){
 document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
 document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

ログイン後にコピー

addEventListener("タイプ", 関数名)

この関数にはパラメータが 2 つしかありません。最初のパラメータは addEventListener() の最初のパラメータと同じ機能ですが、名前の前に「on」が付いています。最初のパラメータは、バインドされるイベントハンドラ関数の名前です。さまざまなブラウザと互換性を持たせるために、上記のコードを次のように変更する必要があります:

上記のコードは、主要なブラウザの互換性の問題を解決します。上記のコードで判定するには次のコードを使用します:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  

<title>window.onload用法</title>
<style type="text/css">
#bg{
 width:100px;
 height:100px;
 border:2px solid red;
}
</style>
<script type="text/javascript">
if(window.addEventListener){
 window.addEventListener("load",bg,false);
 window.addEventListener("load",changeW,false);
}
else{
 window.attachEvent("onload",bg);
 window.attachEvent("onload",changeW);
}

function bg(){
 document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
 document.getElementById("bg").style.width="200px";
}
</script>
</head>
<body>
 <div id="bg"></div>
</body>
</html>

ログイン後にコピー

if ステートメントを使用して、オブジェクトに addEventListener 属性があるかどうかを判断し、ある場合は addEventListener() 関数を使用し、それ以外の場合はattachEvent() 関数を使用します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7334

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1264

PHP チュートリアル

1209

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。驚くほど簡単です！検索をyに制限することができます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

例JSONファイルの例 Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。キー価値ペア表記を使用して、あらゆる種類を保存できます

10 jQuery構文蛍光物 Mar 02, 2025 am 12:32 AM

コードプレゼンテーションを強化する：開発者向けの10個の構文蛍光物ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

10 JavaScript＆JQuery MVCチュートリアル Mar 02, 2025 am 01:16 AM

この記事では、JavaScriptとJQuery Model-View-Controller（MVC）フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています

＆＃x27; this＆＃x27; JavaScriptで？ Mar 04, 2025 am 01:15 AM

コアポイントこれは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

See all articles

window.onload 使用ガイド_JavaScript のヒント

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック