Please explain this code snippet

I came across this code while I was browsing for html5 canvas examples. I have pasted the code and I have given a comment in the place where i have a doubt.

if(window.addEventListener) {

  window.addEventListener('load', function () {
  var canvas, context, tool;

  function init () {
    canvas = document.getElementById('imageView');
    if (!canvas) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvas.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

     context = canvas.getContext('2d');
    if (!context) {
      alert('Error: failed to getContext!');
      return;
    }

        tool = new tool_pencil();

    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
  }

   function tool_pencil () {
    var tool = this;
    this.started = false;


    this.mousedown = function (ev) {
        context.beginPath();
        context.moveTo(ev._x, ev._y);
        tool.started = true;
    };

      this.mousemove = function (ev) {
      if (tool.started) {
        context.lineTo(ev._x, ev._y);
        context.stroke();
      }
    };

       this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
      }
    };
  }

    function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { 
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { 
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    //Please explain the follwing set of line
    var func = tool[ev.type];
    if (func) {
      func(ev);
    开发者_如何学Go}
  }

  init();

}, false); }

In conjunction with other answers, what it's doing is putting all the callbacks in the one object. The result is that func is tool.onmousedown, tool.onmouseup, etc.

//Please explain the follwing set of line
var func = tool[ev.type]; // Set func to the tool object's member 
                          // named 'event.type' 
                          // Will set func to undefined if no function is 
                          // found in the tool object
if (func) {  // if a func was found then call it.
  func(ev);
}

Note that the tool hash object is being used to hold function references, not scalars such as 1, "a string", etc. A feature of Javascript is that you can create, save, pass functions at runtime.

Added Thank you @Chris Morgan for pointing out that an_obj['unknown_key'] == undefined, not null.

Also note that foo['a_key'] is the runtime way of saying foo.a_key -- the 'a_key' member of the object 'foo'.

And finally, Javascript does not have hashes. It has objects which work reasonably well as the Hash type found in other languages.

Added some more (after looking at all of the code, not just the part in question). The code is creating an object tool. It has a number of members:

• started flag
• mousedown, mouseup and mousemove functions

The snippet of code is trying to locate the function that matches the event's type. So in this case, the object tool is being used as an object, not as a hash. I've updated the first part of the answer appropriately.

It looks like it's trying to assign a "tool" of type ev.type to the variable func. This should be a function. It then checks if the function exists (ie. if it was assigned or not) and calls it if it does, passing the ev variable as a parameter.