CODEWITHSUNDEEP
javascripthtmlevent-handlingonchange
Bryan Greenway
Bryan Greenway

Reputation: 733

Capturing html5/javascript onchange event

I have a simple HTML5 page with a number input element. I'm trying to catch the onchange (or onclick) event from this element and have noticed some challenging behavior. In the embedded javascript, I attach an initialize() function to the window.onload event. 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. While the initialize() function is running, the events appear to work; 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). 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>

Upvotes: 0

Views: 2981

Answers (2)

Teifi
Teifi

Reputation: 713

  • 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;
    ...    
};

Upvotes: 2

Dan M
Dan M

Reputation: 1785

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. 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. 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".

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>

Upvotes: 2

Related Questions