Javascript addEventListener似乎不起作用

addEventListener不工作，即使我确保访问if（警报工作）。 我正在使用firefox，所以现在不需要为IE“附加事件”

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;

---

它不工作，因为

nbClicks

未在

changeBgColor

中初始化

var

向函数声明一个局部变量，在本例中为

init

如果将

changeBgColor

更改为

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

---

此外，

backgroundColor

需要一个字符串，而不是

未定义的

（因为没有声明这些变量）。

它不起作用，因为

nbClicks

没有在

changeBgColor

中初始化

var

向函数声明一个局部变量，在本例中为

init

如果将

changeBgColor

更改为

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

---

此外，

backgroundColor

需要一个字符串，而不是

未定义的

（因为这些变量没有声明）。

我发现您的代码有两个直接的问题：

JavaScript将抛出引用错误，因为变量nbClicks不在函数changeBgColor的作用域中

您应该为wrap.style.backgroundColor指定字符串。在本例中，JavaScript认为它们是更多的变量，并将抛出另外两个引用错误

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

(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;

})();

---

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

JavaScript将抛出引用错误，因为变量nbClicks不在函数changeBgColor的作用域中

您应该为wrap.style.backgroundColor指定字符串。在本例中，JavaScript认为它们是更多的变量，并将抛出另外两个引用错误

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

(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;

})();

---

在

changeBgColor

中放置一条log语句，这样您就知道它是否到达了那里。是否定义了

lightCoral

和

lightGreen

呢？在

changeBgColor

中放一条log语句，这样你就知道它是否到达了那里。是否定义了

lightCoral

和

lightGreen

？