Question

我有一个带有数字输入元素的简单HTML5页面。我正试图从这个元素中捕获onchange（或onclick）事件，并注意到一些具有挑战性的行为。在嵌入式javascript中，我将一个initialize（）函数附加到window.onload事件。在这个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触发的事件被称为“更改”。

此代码适用于我：

<!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 个答案: