Javascript event, the parameter "e" , "event" or other

Question

My code:

var transformString = Modernizr.prefixed('transform');
var inputDown, inputMove, inputUp;


if (window.Touch) {
  inputDown = "touchstart";
  inputMove = "touchmove";
  inputUp = "touchend";
}
else {
  inputDown = "mousedown";
  inputMove = "mousemove";
  inputUp = "mouseup";
}

var mouse = { startX: 0, startY: 0 };
var innerElement = $('.threedee');

function normalizedX(event){
    return window.Touch ? event.originalEvent.touches[0].pageX : event.pageX;
}    

function normalizedY(event){
    return window.Touch ? event.originalEvent.touches[0].pageY : event.pageY;
}

$(document).bind(inputDown, function(event){
  event.preventDefault();
  if(event.button === 2) return true; // right-click
  mouse.startX = normalizedX(event);
  mouse.startY = normalizedY(event);
  // store the transform state
  // globalMatrix.setMatrixValue($inner.css('-webkit-transform'));
  $(document)
   .bind(inputMove, move)
   .one(inputUp, function(){ $(document).unbind(inputMove); });
});

function move(event){
  event.preventDefault();
  var offsetX = normalizedX(event) - mouse.startX;
  var offsetY = normalizedY(event) - mouse.startY;
  if(event.shiftKey){
   offsetX = roundToMultiple(offsetX, 15);
   offsetY = roundToMultiple(offsetY, 15);
  }
  innerElement.css(transformString, 'rotateY('+offsetX+'deg) rotateX('+-offsetY+'deg)');
  /* move relative to the initial position
  $inner.css('-webkit-transform', globalMatrix.rotate(-offsetY, offsetX, 0));//*/
}

function roundToMultiple(number, multiple){
  var value = number/multiple
  ,   integer = Math.floor(value)
  ,   rest = value - integer;
  return rest > 0.5 ? (integer+1)*multiple : integer*multiple;
}​

Try to look at the javascript part only, my problem is there.

I am wondering why the "event" will pass as parameter and argument for most of the function in the script. Sometime it may be "e" also. Who created them???

I myself never created any "event" variable, who is responsible for this "event" variable.

Answer 1

jQuery will call your event function and it will pass an event object into the argument. You don't need to worry about creating the variable, and you can give the argument any name you want (assuming it's a valid variable name).

The creation of the event object should be considered "black box", and you shouldn't worry about its exact structure or implementation. Just do what the docs and examples show you to do, and you'll be all right.

The key thing is to have a parameter in the function, though; otherwise, you won't have access to the event object jQuery passes.

As some other answers have stated, it's probably a good idea to avoid the name event, because if you're not careful you could conflict with a global variable of the same name on certain browsers. Instead, use e or similar and then you'll get a NameError if you forget to have a parameter in your function.

// Wrong way #1
$('.class').bind('click', function() {
    event.preventDefault();    // may attempt to call .preventDefault() on window.event if it exists
});

// Wrong way #2 (fails fast since e probably won't be on the global object)
$('.class').bind('click', function() {
    e.preventDefault();        // ReferenceError thrown here
});

// The correct way
$('.class').bind('click', function(e) {    // or (event) if you want, but the first example can bite you
    e.preventDefault();        // no problem
});