捕获html5 / javascript onchange事件

Question

I have a simple HTML5 page with a number input element. 我有一个带有数字输入元素的简单HTML5页面。 I'm trying to catch the onchange (or onclick) event from this element and have noticed some challenging behavior. 我正在尝试从此元素捕获onchange（或onclick）事件，并注意到一些具有挑战性的行为。 In the embedded javascript, I attach an initialize() function to the window.onload event. 在嵌入式javascript中，我将initialize（）函数附加到window.onload事件。 Inside this initialize() function I paint various things on a canvas (removed for clarity in the sample below), I also add an event listener to the number input. 在这个initialize（）函数内部，我在画布上绘制了各种东西（为清楚起见，在下面的示例中将其删除），我还向数字输入添加了事件侦听器。 While the initialize() function is running, the events appear to work; 当initialize（）函数运行时，这些事件似乎可以正常工作。 however, after the function completes, the events are no longer captured. 但是，功能完成后，将不再捕获事件。 This appears to be some sort of scoping issue??? 这似乎是某种范围界定问题？？？ Once outside of the function where the event listeners were assigned, they no longer listen. 一旦在分配了事件侦听器的功能之外，它们将不再侦听。 Probably a very poor description. 描述可能很差。 The code below displays the described behavior (tested only in Chrome). 下面的代码显示了描述的行为（仅在Chrome中测试）。 I'd like for the event listeners to work as long as the page is displayed. 我希望事件侦听器只要页面显示即可工作。 Surely this is possible.??? 当然这是可能的。

<!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

event listener refers to a function or object registered via EventTarget.addEventListener() , 事件监听器是指通过EventTarget.addEventListener（）注册的函数或对象，
whereas event handler refers to a function registered via on... attributes or properties. 而事件处理程序是指通过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

You have the right idea, but your code has a couple of problems. 您有正确的想法，但是您的代码有两个问题。

First, you want to pass the SpinnerValue_Changed function into the addEventListener call as a parameter. 首先，您要将SpinnerValue_Changed函数作为参数传递给addEventListener调用。 This means it needs to be a variable that is in scope, not a function definition. 这意味着它必须是范围内的变量，而不是函数定义。

Second, when you pass SpinnerValue_Changed() into the addEventListener method, what you are asking Javascript to do is execute the SpinnerValue_Changed method, and pass the result to the addEventListener method. 其次，当您将SpinnerValue_Changed()传递给addEventListener方法时，您要Javascript执行的操作是执行SpinnerValue_Changed方法，并将结果传递给addEventListener方法。 To pass the function as a callback, you want to leave off the () . 要将函数作为回调传递，您需要省略() 。

Finally, while "onchange" is the name of the event when it's inlined right on an input element, the event Javascript fires is just called "change". 最后，虽然“ onchange”是在输入元素上内联时事件的名称，但Javascript触发的事件仅称为“ change”。

This code works for me: 该代码对我有用：

<!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