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

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

WBOY

リリース： 2016-05-16 15:39:40

オリジナル

1792 人が閲覧しました

多くの場合、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() 関数を使用します。