捕获html5/javascript onchange事件_Javascript_Html_Event Handling_Onchange

捕获html5/javascript onchange事件

javascript html

捕获html5/javascript onchange事件,javascript,html,event-handling,onchange,Javascript,Html,Event Handling,Onchange,我有一个带有数字输入元素的简单HTML5页面。我试图从这个元素捕获onchange（或onclick）事件，并注意到一些具有挑战性的行为。在嵌入式javascript中，我将initialize（）函数附加到window.onload事件。在这个initialize（）函数中，我在画布上绘制了各种内容（为了清晰起见，在下面的示例中删除了这些内容），我还向数字输入添加了一个事件侦听器。当initialize（）函数运行时，事件似乎起作用；但是，函数完成后，将不再捕获事件。这似乎是某种范围问题？？？

我有一个带有数字输入元素的简单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>


var-Div1；
var Canvas1；
var喷丝头1；
var-Context1；
函数初始化（）
{
//身体
document.body=document.createElement（'body'）；
//Div
Div1=document.createElement（'div'）；
文件.正文.附件（第1部分）；
//帆布
Canvas1=document.createElement（'canvas'）；
第1分部.儿童（游说1）；
//输入号码
Spinner1=document.createElement（'input'）；
Spinner1.setAttribute（'type'，'number'）；
喷丝头1.setAttribute（'min'，'0'）；
喷丝头1.setAttribute（'max'，'50'）；
喷丝头1.setAttribute（'value'，'2'）；
第1分部。附属器（喷丝头1）；
//事件处理程序
Spinner1.addEventListener（“onchange”，SpinnerValue_Changed（），false）；
//上下文
Context1=Canvas1.getContext（“2d”）；
函数SpinnerValue_已更改（）
{
窗口警报（“捕获的事件”）；
}           
};  // 结束初始化（）
window.onload=initialize（）；

事件侦听器指通过EventTarget.addEventListener（）注册的函数或对象
而事件处理程序指的是通过在上注册的函数。。。属性或属性

事件侦听器指通过EventTarget.addEventListener（）注册的函数或对象
而事件处理程序指的是通过在上注册的函数。。。属性或属性

您的想法是正确的，但是您的代码有几个问题

首先，要将SpinnerValue_Changed函数作为参数传递到addEventListener调用中。这意味着它必须是范围内的变量，而不是函数定义

其次，当您将

SpinnerValue\u Changed（）

传递到addEventListener方法中时，您要求Javascript执行

SpinnerValue\u 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>


var-Div1；
var Canvas1；
var喷丝头1；
var-Context1；
函数初始化（）
{
var SpinnerValue_Changed=函数（）{
警报（“捕获事件”）；
};
//身体
document.body=document.createElement（'body'）；
//Div
Div1=document.createElement（'div'）；
文件.正文.附件（第1部分）；
//帆布
Canvas1=document.createElement（'canvas'）；
第1分部.儿童（游说1）；
//输入号码
Spinner1=document.createElement（'input'）；
Spinner1.setAttribute（'type'，'number'）；
喷丝头1.setAttribute（'min'，'0'）；
喷丝头1.setAttribute（'max'，'50'）；
喷丝头1.setAttribute（'value'，'2'）；
第1分部。附属器（喷丝头1）；
//事件处理程序
喷丝头1.addEventListener（“更改”，SpinnerValue_更改，错误）；
//上下文
Context1=Canvas1.getContext（“2d”）；
};  // 结束初始化（）
window.onload=initialize（）；