捕獲html5 / javascript onchange事件

Question

我有一個帶有數字輸入元素的簡單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>

Answer 1

事件監聽器是指通過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;
    ...    
};

Answer 2

您有正確的想法，但是您的代碼有兩個問題。

首先，您要將SpinnerValue_Changed函數作為參數傳遞給addEventListener調用。 這意味着它必須是范圍內的變量，而不是函數定義。

其次，當您將SpinnerValue_Changed()傳遞給addEventListener方法時，您要Javascript執行的操作是執行SpinnerValue_Changed方法，並將結果傳遞給addEventListener方法。 要將函數作為回調傳遞，您需要省略() 。

最后，雖然“ onchange”是在輸入元素上內聯時事件的名稱，但Javascript觸發的事件僅稱為“ change”。

該代碼對我有用：

<!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()
{
    var SpinnerValue_Changed = function() {
       alert("event captured");
    };

    // 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("change", SpinnerValue_Changed, false);

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

};  // END initialize()

window.onload=initialize();

</script>

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

捕獲html5 / javascript onchange事件

問題描述

2 個解決方案

解決方案1
2 2013-06-14 07:05:39

解決方案2
2 已采納 2013-06-14 07:13:06

捕獲html5 / javascript onchange事件

問題描述

2 個解決方案

解決方案1 2 2013-06-14 07:05:39

解決方案2 2 已采納 2013-06-14 07:13:06

解決方案1
2 2013-06-14 07:05:39

解決方案2
2 已采納 2013-06-14 07:13:06