What does "initialize event handler" mean in this context?

Question

In file1.js I read:

// NOTE: initialize your app event handlers here, see file2.js for a simple event handler example

// TODO: configure following to work with both touch and click events (mouse + touch)
// see http://msopentech.com/blog/2013/09/16/add-pinch-pointer-events-apache-cordova-phonegap-app/

//...overly simple example...
//    var el, evt ;
//
//    if( navigator.msPointerEnabled || !('ontouchend' in window))    // if on Win 8 machine or no touch
//        evt = "click" ;                                             // let touch become a click event
//    else                                                            // else, assume touch events available
//        evt = "touchend" ;                                          // not optimum, but works
//
//    el = document.getElementById("id_btnHello") ;
//    el.addEventListener(evt, myEventHandler, false) ;

in file2.js I read:

// This file contains your event handlers, the center of your application.
// NOTE: see file1.js for event handler initialization code.

// example event handler
function myEventHandler() {
  // event handler code
};

What "initialize event handlers here" in file1.js is supposed to mean?

What should I do there?

Is it a place for defining additional event handlers, like the one in file2.js ?

Or could it be that by "initialize" they mean that file1.js is the place where I should make use of an even handler (i.e. using it within an event listener, like in the example that comes after, in file1.js) ?

I've googled the expression "event handler initialization", or "initialize event handler" and I found almost nothing, so I am confused...

Update: In code above, in file2.js, I had forgotten to include the beginning comments. Added them. Hopefully this can help further understand the different roles of the two files?

Answer 1

Definition

An event handler is just a piece of code (function in the case of Javascript) that does something when a specific event occurs.

An Example

One example would be the mouseover event that occurs when the mouse (any pointing device really) moves over an element on the page.

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<script>
  var test = document.getElementById("test");

  // ... //

  // this handler will be executed every time the cursor is 
  // moved over a different list item
  test.addEventListener("mouseover", function( event ) {   
    // highlight the mouseover target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(function() {
      event.target.style.color = "";
    }, 500);
  }, false);
</script>

Example code "borrowed from" MDN.

Example Explanation

The example above shows adding an event listener (or event handler) during the initialization process for the script. The event handler is defined inline (the part where function( event ) { starts). The inline function is called every time our event occurs.

What this means is that when you move your mouse over one of the list items, the color of the text for that list item will turn orange for about half a second.

Some Answers

Now that the definitions are out of the way, let's talk about answering your questions.

• What "initialize event handlers here" in file1.js is supposed to mean?

It means that you should build your event handling functions immediately following the comment. You will also need to add code to add the event handler to the object on which the event occurs (the test.addEventListener("mouseover",... part).

• Is it a place for defining additional event handlers, like the one in file2.js?

You can include code in that spot or you could reference an external file, that is your choice which way you want to handle it.

• Or could it be that by "initialize" they mean that file1.js is the place where I should make use of an even handler (i.e. using it within an event listener, like in the example that comes after, in file1.js)?

Same answer as the last question.

Answer 2

IMO what they mean with "initialize your event handlers" is you have to do this:

myElement.addEventListener(evt, myEventHandler, false) ;

because:

1. By assigning an event handler to an element, for a given event (click), you somewhat give life to the even handler, you initialize it (in a broader sense (in lack of a stricter one, in this context)).
2. The other possible interpretation, that "initialize your even handlers" has to be intended as define event handler functions, would not make much sense, because the comments in code seem to refers to file2.js as the place where event handler functions are defined.