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
  • event listener refers to a function or object registered via EventTarget.addEventListener(),
  • whereas event handler refers to a function registered via on... attributes or properties.
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 回答
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>
于 2013-06-14T07:13:06.267 回答