window.onloadの使い方を詳しく説明します.

21158 ワード

javascript window-onl

ウェブページのjavaScriptスクリプトコードは、往々にしてドキュメントの読み込みが完了してから実行できます.そうでないと、オブジェクトを取得できなくなる可能性があります.このような状況を避けるために、次の2つの方法が使えます.
一.スクリプトコードをウェブページの一番下に置いて、スクリプトコードを実行する時に、操作する対象がロードされたことを確認できます.
二.window.onloadを通じてスクリプトコードを実行します.第一の方式は感じが乱れています.(実はオススメです.)シナリオコードをより適切なところに置く必要があります.それではwindow.onload方式は良い選択です.Windows.onloadはイベントです.ドキュメントの読み込みが完了するとイベントが発生します.イベントの処理関数を登録し、実行するスクリプトコードをイベント処理関数に置くことができます.したがって、対象を取得できないことを避けることができます.コードの例を先に見ます.

   
<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の背景色を菗F 90に設定したものですが、この効果は実現されていません.コードは順次実行されていますので、Dcument.getElement ById(「棊bg」)を実行すると、style.background Color=」という言葉が実行されています.コードの修正は以下の通りです

   
<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>

以上のコードにより、div背景色を铄F 90に設定する目的が実現されました.背景色を設定したコードがwindow.onloadのイベントハンドラ関数の中に置かれています.ドキュメントのロードが完了してから、イベントハンドラ関数が実行されます.背景色を設定するスクリプトコードも実行されます.イベント処理関数バインディング:方式一:window.οnlοad=function(){}以上のコードでは、この方法を使ってWindows.onloadイベントバインディングイベントハンドラ関数として使用されています.ここでバインディングされているのは匿名関数です.もちろん、非匿名関数としても紐付けられます.コードの例は以下の通りです.

   
<html>   
<head>   
<meta charset=" utf-8">   
<title>window.onload    title>
<script type="text/javascript">
window.onload=function myalert()
{
  alert("    ！");
}
script>
head>
<body>

body>
html>

以上のコードは名前のmyalert方法をwindow.onloadイベントに結びつけることができますが、このイベントのために複数のイベント処理関数を結びつけることはできません.

window.onload=function a(){}
window.onload=function b(){}

以上のコードはwindow.onloadイベントのために複数のイベント処理関数を結びつけることはできません.最後の一つは前のすべての関数をカバーします.ただし、コードは変更できます.

   
<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()とatachEvent()はonloadイベントバインディングイベント処理関数として使用できます.以下では、それぞれ紹介します.addEvent Listener()は現在の標準のイベントハンドリング関数バインディング方式ですが、IE 8とIE 8以下のブラウザはこの方式をサポートしていません.実例は以下の通りです.

   
<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>

以上のコードはwindow.onloadイベントのために複数のイベント処理関数を結びつけることができます.文法の形式を簡単に紹介します.

addEventListener("type",   ,false)

addEventListener()関数は三つのパラメータを持っています.最初のパラメータイベントタイプは、イベントタイプ名の前にonがあってはいけません.例えば、window.on loadイベントは、この場所ではloadしか書けません.二つ目のパラメータは結合される関数名です.三つ目のパラメータは一般的にfalseです.atachEvent()関数バインディングイベント処理関数を使用します.IE 9以前のIEブラウザはaddEvent Listener()関数をサポートしていません.だから、atachEvent()関数は有効な場所があります.コードの例は以下の通りです.

   
<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()関数の効果は同じです.文法形式を簡単に紹介します.

addEventListener("type",   )

この関数は2つのパラメータしかありません.最初のパラメータはイベントタイプですが、addEventListener()の最初のパラメータと同じです.名前は違います.名前の前に「on」があります.2番目のパラメータはバインディングされるイベントハンドラの名前です.各ブラウザに対応するために、上記のコードを改造する必要があります.例は以下の通りです.

   
<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(object.addEventListener){
  object.addEventListener();
}
else{
  object.attachEvent();
}

if文でオブジェクトがaddEvent Listener属性を持つかどうかを判断します.これがあればaddEvent Listener()関数を使用します.そうでなければ、atachEvent()関数を使用します.

Android原生WebViewとJavaScriptはインタラクティブです.