body要素のonloadイベントへのコールバック関数の配線

私はjavaScriptを初めて使用し、コールバック関数をイベントに配線するさまざまな手法を検討していました。body要素のonloadイベントへのコールバック関数の配線

すべてのJSコードをhtmlから分離し、window.onloadブロック（すべてのヘッドバックJavaScriptによって強く推奨されています。私はそれに従っています）のすべてのコールバック関数をワイヤリングするテクニックでは、onloadイベントのbody要素の配線が機能しません。

私は、2つの警告ボックスを期待して（私はボタンをクリックしたとき）HiiがHelloと他の続いたが、私は（ボタンのクリックで）こんにちはのみ取得していますが、その前に、私はHii警告ボックスが届きませんよ。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 
     function fun1() { 
      alert("Hii"); 
     } 

     function fun2() { 
      alert("hello"); 
     } 

     window.onload = function() { 
      document.getElementsByTagName('body')[0].onload = function() { 
       fun1(); 
      }; 

      document.getElementById('btn1').onclick = function() { 
       fun2(); 
      }; 
     }; 
    </script> 
</head> 
<body> 
    <input type="button" id="btn1" value="Click"> 
</body> 
</html>

質問の第2部分。私はhtmlコード自体にbody要素のonloadを移動し、次のコードで

は、それから私は（予想通り） Hiiを持つ唯一の警告ボックスを得るが、期待通りに、ボタン上の onlickイベントが動作しません警告ボックス Hello。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 
     function fun1() { 
      alert("Hii"); 
     } 

     function fun2() { 
      alert("hello"); 
     } 

     window.onload = function() { 
      document.getElementById('btn1').onclick = function() { 
       fun2(); 
      }; 
     }; 
    </script> 
</head> 
<body onload="fun1()";> 
    <input type="button" id="btn1" value="Click"> 
</body> 
</html>

この不確実な動作は私を困惑させています。

出典

2017-02-28 amritesh

window.onloadの問題は、body.onloadイベントの後にトリガーすることです。これは、fun1が呼び出されない理由を説明しています。onloadイベントハンドラをbodyタグにアタッチするときに、ハンドラをアタッチする前にそのイベントが既にトリガされていました。

これを改善する1つの方法は、DOMContentLoadedイベントを聞くことです。 body.onloadイベントの前にトリガーされます。実際には、ロードするイメージを含め、ドキュメントの内容全体が本当に必要な場合にのみwindow.onloadを使用する必要があります。 DOMContentLoadedはその前にトリガされます - DOMツリーが利用可能なとき。

だから、これは動作するはずです：

document.addEventListener('DOMContentLoaded', function() { 
    document.body.onload = function() { 
     fun1(); 
    }; 

    document.getElementById('btn1').onclick = function() { 
     fun2(); 
    }; 
});

しかし、別のbody.onloadハンドラを持ってする理由は本当にありません。あなたにも行う可能性があります：

document.addEventListener('DOMContentLoaded', function() { 
    fun1(); // call it when the DOM content is loaded. 

    document.getElementById('btn1').onclick = function() { 
     fun2(); 
    }; 
});

そして、...それは、同じイベントのためのハンドラよりも多くを添付することができ、そのため異なるスクリプトが持っていないので、addEventListenerでイベントハンドラを割り当てることがベストプラクティスですその点でお互いに干渉する：あなたは、イベントハンドラに一つだけの機能を実行すると

document.addEventListener('DOMContentLoaded', function() { 
    fun1(); // call it when the DOM content is loaded. 

    document.getElementById('btn1').addEventListener('click', function() { 
     fun2(); 
    }); 
});

短いカットを適用することができる。代わりに、匿名関数でその呼び出しをラップで、あなたにもその機能を渡すかもしれませんそれ自体を参照として：

document.addEventListener('DOMContentLoaded', function() { 
    fun1(); // call it when the DOM content is loaded. 

    document.getElementById('btn1').addEventListener('click', fun2); 
});

出典

2017-02-28 21:08:15 trincot

body要素のonloadイベントへのコールバック関数の配線

答えて

関連する問題