3

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?

2

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.

4
  • Thanks for your thorough explanation and for your time! However the more I look at it the more I think that by "initialize the event handler here" they just meant "attach the event handler to the relevant object, and configure the event nature (click, ...)". In the specific scenario I took this from I think that also it would not make much sense to have event handlers in both files... but, it's still a guess of course. I bet the only one who can tell for sure it's who wrote it, but one thing is sure, "initialize an event handler" is not a common wording, and probably wrong, agree?
    – jj_
    Mar 31 '16 at 5:08
  • @jj_ I wouldn't call it wrong, since initialization in its most general sense means doing whatever needs to be done to get X ready/working/active/usable/whatever, and the intent of the comment is perfectly unambiguous. I'd guess that "set up" is slightly more common but that may just be my personal bias since I think that word would be more intuitive here.
    – Ixrec
    Mar 31 '16 at 7:43
  • @Ixrec and Adam Zuckerman, please see the update to my question.
    – jj_
    Apr 1 '16 at 2:34
  • The update does not significantly change the question. It is helpful to see the whole thing, but my answer still stands even with the changes. Apr 1 '16 at 3:17
0

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.
1
  • 1
    No it was not an edit, but my actual answer.. I was just saying that the example they provided in the comments (the code I posted in my answer), is IMO what they meant by "initialize your app event handlers". Edited the answer to make this more explicit.
    – jj_
    Apr 1 '16 at 0:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.