0

数値入力要素を持つ単純な HTML5 ページがあります。この要素から onchange (または onclick) イベントをキャッチしようとしていますが、いくつかの困難な動作に気付きました。埋め込まれた JavaScript で、initialize() 関数を window.onload イベントにアタッチします。この initialize() 関数内で、キャンバスにさまざまなものをペイントし (以下のサンプルではわかりやすくするために削除しています)、数値入力にイベント リスナーも追加します。initialize() 関数が実行されている間、イベントは機能しているように見えます。ただし、関数が完了すると、イベントはキャプチャされなくなります。これは、ある種のスコーピングの問題のようです??? イベントリスナーが割り当てられた関数の外に出ると、イベントリスナーはリッスンしなくなります。おそらく説明がかなり下手です。以下のコードは、説明されている動作を示しています (Chrome でのみテスト済み)。私' ページが表示されている限り、イベントリスナーが機能することを望みます。確かにこれは可能です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">

<script type="text/javascript">

var Div1;
var Canvas1;
var Spinner1;
var Context1;

function initialize()
{
        // body
           document.body = document.createElement('body');  

        // Div
           Div1 = document.createElement('div');           
           document.body.appendChild(Div1);     

        // canvas           
            Canvas1 = document.createElement('canvas');
            Div1.appendChild(Canvas1);

        // Input Number         
            Spinner1 = document.createElement('input');
            Spinner1.setAttribute('type','number');
            Spinner1.setAttribute('min',"0");
            Spinner1.setAttribute('max',"50");
            Spinner1.setAttribute('value',"2");                                                 
            Div1.appendChild(Spinner1);

        // Event Handlers   
            Spinner1.addEventListener("onchange",SpinnerValue_Changed(),false);

        // contexts         
            Context1 = Canvas1.getContext("2d");


    function SpinnerValue_Changed()
    {
       window.alert("event captured");
    }           

};  // END initialize()

window.onload=initialize();

</script>

  </head>
    <body>
    </body>
</html>
4

2 に答える 2

2
  • イベント リスナーは、 EventTarget.addEventListener()を介して登録された関数またはオブジェクトを参照します。
  • 一方、イベント ハンドラーは on... 属性またはプロパティを介して登録された関数を参照します。
event handler Browser compatibility
Chrome  Firefox(Gecko)  InternetExplorer    Opera   Safari(WebKit)
(Yes)   (Yes)           (Yes)               (Yes)   (Yes)

function initialize()
{
    ...
    // Event Handlers
    //Spinner1.addEventListener("onchange",SpinnerValue_Changed(),false);
    Spinner1.onchange=SpinnerValue_Changed;
    ...    
};
于 2013-06-14T07:05:39.660 に答える