JavaScriptの罠（window.onload）
罠っていうか、こんなのにひっかかった私はもしかしたらアホだったんでしょうか？
イベントハンドラとは、イベントが発生したときに実行する処理を指定できるキーワードのことです。
イベントとは、「クリックしたとき」とか「ページが読み込まれたとき」、「マウスが乗ったとき」など、ユーザーからウェブページに対して、または何らかの処理によって起こされるアクションのことを言います。
「ページが読み込まれたとき」はこう書きます（func00()がJavaScript中に定義されているものとする）。
しかし今では以下のようにJavaScript中に書くのが主流になっています。
こういう書き方を「無名関数」といいます。関数（function）にfunc00みたいな名前がないですよね。
でも、これでは関数の再利用はできないので、次のように書くことができます。
ですがこれちょっとした問題があります。上の例では独自に定義したユーザー関数ですが、setTimeout()関数のように定義済みのものを上のように使うと、Internet Explorerではエラーになることがあります。
エラーの内容は「実装されていません」で、一応実行はしてくれるみたいです。
だから関数の再利用とこのエラー回避のためには、2番目の例のように無名関数を使うしかないのです。じゃあどうやって関数の再利用とエラー回避を実現するのか。以下の例を見てください。
という風にします。無名関数内で定義したユーザー関数や定義済み関数を利用するという方法をとります。まずこの方法なら間違いはないと思われます。
先日私が引っかかった罠というのはこのことでした。
イベントとは、「クリックしたとき」とか「ページが読み込まれたとき」、「マウスが乗ったとき」など、ユーザーからウェブページに対して、または何らかの処理によって起こされるアクションのことを言います。
「ページが読み込まれたとき」はこう書きます（func00()がJavaScript中に定義されているものとする）。
<body onload="func00()">
しかし今では以下のようにJavaScript中に書くのが主流になっています。
window.onload = function(){
処理
}こういう書き方を「無名関数」といいます。関数（function）にfunc00みたいな名前がないですよね。
でも、これでは関数の再利用はできないので、次のように書くことができます。
function func00(){
処理
}
window.onload = func00; //()はつけない！ですがこれちょっとした問題があります。上の例では独自に定義したユーザー関数ですが、setTimeout()関数のように定義済みのものを上のように使うと、Internet Explorerではエラーになることがあります。
エラーの内容は「実装されていません」で、一応実行はしてくれるみたいです。
だから関数の再利用とこのエラー回避のためには、2番目の例のように無名関数を使うしかないのです。じゃあどうやって関数の再利用とエラー回避を実現するのか。以下の例を見てください。
function func00(){
処理
}
function func01(){
処理
}
window.onload = function(){
func00();
setTimeout('func01()',1000); //1秒後に、func01()を実行する
}という風にします。無名関数内で定義したユーザー関数や定義済み関数を利用するという方法をとります。まずこの方法なら間違いはないと思われます。
先日私が引っかかった罠というのはこのことでした。
コメント
2013.03.25 09:19:29 イ