Firefox 中用于 JavaScript 分配侦听器的 Javascript 事件

Question

好的，所以这里有一个关于Firefox不响应window.event的问题，你需要向函数添加一个额外的参数。我对此没有问题;我的问题是，如果我想从不同的 Javascript 函数中分配事件侦听器，我该怎么做？

基本上，我试图做的是常见的效果，当你有一个带有灰色文本的表单框时，例如，"你的名字......"然后，当您单击该框时，文本消失并且颜色变为黑色;取消焦点时，该框仍为空，提示文本将返回。

现在，我

不是直接为我想使用它的每个页面编写代码，而是尝试创建一个函数，我可以使用表单的 ID 调用该函数，它会自动将其应用于每个输入元素。代码如下：

function fadingForm(formElementID, endColor)
{
  var form = document.getElementById(formElementID);
  for(var i = 0; i < form.elements.length; i++)
  {
    form.elements[i].originalValue = form.elements[i].value;
    form.elements[i].originalColor = form.elements[i].style.color;
    form.elements[i].changedColor  = endColor;
    // Somehow I need to get that event parameter in here I guess?
    // I tried just putting the variable event in as a parameter,
    //   but as you'd expect, that doesn't work.
    form.elements[i].onfocus = function() { focused(); };
    form.elements[i].onblur  = function() { blurred(); };
  }
}
function focused(e)
{
  evt = e || window.event;
  element = evt.target;
  if(element.value == "" || element.value == element.originalValue)
  {
    element.value = "";
    element.style.color = element.changedColor;
  }
}
function blurred(e)
{
  evt = e || window.event;
  element = evt.target;
  if(element.value == "" || element.value == element.originalValue)
  {
    element.value = element.originalValue;
    element.style.color = element.originalColor;
  }
}

当然，这在Chrome，Safari等中完美运行。只是不是火狐。

Answer 1

事件侦听器focused并且blurred接受事件对象e，但您从不提供事件对象。提供给匿名包装器函数的事件对象永远不会使用，也不会传递给focused/blurred 。因此，e始终是未定义的。

相反，在设置侦听器时，请执行以下操作：

form.elements[i].onfocus = function(e) { focused(e); };
form.elements[i].onblur  = function(e) { blurred(e); };

甚至：

form.elements[i].onfocus = focused;
form.elements[i].onblur  = blurred;

以便将事件对象直接传递到侦听器函数中。