Javascript事件，参数“e” ，“事件”或其他 [英] Javascript event, the parameter "e" , "event" or other

问题描述

我的代码：

  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'）; 
 
函数normalizedX（event）{
 return window.Touch？ event.originalEvent.touches [0] .pageX：event.pageX; 
} 
 
函数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; //右键单击
 mouse.startX = normalizedX（event）; 
 mouse.startY = normalizedY（event）; 
 //存储转换状态
 / / 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）'）; 
 / *相对于初始位置移动
 $ inner.css（' -  webkit-transform'，globalMatrix.rotate（-offsetY，offsetX，0））; // * / 
} 
 
函数roundToMultiple（number，multiple）{
 var value = number / multiple 
，integer = Math.floor（value）
，rest = value  -  integer; 
 return rest> 0.5？ （integer + 1）* multiple：integer * multiple; 
} 
  

尝试仅查看javascript部分，我的问题在那里。 / p>

我想知道为什么事件将作为参数和参数传递给脚本中的大部分功能。有时它也可能是e。谁创造了他们？

我自己从来没有创建任何事件变量，谁负责这个事件变量。

解决方案

jQuery将调用您的事件函数，它将传递一个事件对象到参数中。您不需要担心创建变量，您可以给任何您想要的名称（假定它是一个有效的变量名称）。

创建事件对象应该被认为是黑盒子，你不应该担心它的确切结构或实现。只需要做文档和示例显示你要做的事情，你会没事的。

关键是在函数中有一个参数;否则，您将无法访问jQuery传递的事件对象。

正如其他一些答案所述，避免使用名称 event ，因为如果不小心，可能会在某些浏览器上与同一个名称的全局变量冲突。相反，使用 e 或类似的，然后如果您忘记在函数中有参数，则会得到一个 NameError

  //错误的方式＃1 
 $（'。class'）bind（'click' （）{
 event.preventDefault（）; //可能会尝试在window.event上调用.preventDefault（），如果它存在
}）; 
 
 //错误的方式＃2（快速失败，因为e可能不会在全局对象上）
 $（'。class'）。bind（'click'，function（） {
 e.preventDefault（）; // ReferenceError抛出此处
}）; 
 
 //正确的方法
 $（'。class'）。bind（'click'，function（e）{//或（event）），但是第一个例子可以咬你
 e.preventDefault（）; //没问题
}）; 
  

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.

解决方案

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
});

这篇关于Javascript事件，参数“e” ，“事件”或其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！