javascript - addEventListener 似乎不起作用

Question

addEventListener 不起作用，即使我确保我访问了 if (警报有效)。我使用的是 Firefox，所以现在不需要为 IE 提供“attachEvent”...

function addEvent(type,fnName,obj,cap)
{
    if(obj.addEventListener)
    {
        alert("I am here");
        obj.addEventListener(type,fnName,cap);
    }
}

function changeBgColor()
{
    var wrap = document.getElementById("wrapper");
    nbClicks++;
    if (1 == nbClicks )
    {
        wrap.style.backgroundColor = lightCoral;
    }
    if (2 == nbClicks )
    {
        wrap.style.backgroundColor = lightGreen;
    }
}

function init()
{
    var nbClicks = 0;
    var wrap = document.getElementById("wrapper");
    addEvent("click",changeBgColor,wrap,false);
} 

window.onload = init;

Answer 1

我发现您的代码存在两个直接问题:

1. JavaScript 将抛出 ReferenceError，因为变量 nbClicks 不在函数 changeBgColor 的作用域内。

2. 您应该将字符串分配给wrap.style.backgroundColor。在这种情况下，JavaScript 认为它们是更多变量，并且会抛出另外几个 ReferenceErrors。

查看代码的编辑版本，我将其全部封装在一个闭包中，以便所有函数都引用 nbClicks:

(function(){

  var nbClicks = 0;

  function addEvent(type,fnName,obj,cap) {
    if(obj.addEventListener) {
        obj.addEventListener(type,fnName,cap);
    }
  }

  function changeBgColor() {
    var wrap = document.getElementById("wrapper");
    nbClicks++;
    if (1 == nbClicks ) {
        wrap.style.backgroundColor = 'lightCoral';
    }
    if (2 == nbClicks ) {
        wrap.style.backgroundColor = 'lightGreen';
    }
  }

  function init() {
    var wrap = document.getElementById("wrapper");
    addEvent("click",changeBgColor,wrap,false);
  } 

  window.onload = init;

})();