jquery - attachEvent不是函数-使用模块模式

我正在尝试构建一个JavaScript模块以更好地理解该模式。我正在尝试使用addEventListener和attachEvent将点击事件附加到按钮上，但是无法注册console.log。

我还收到一条错误消息，指出“ TypeError：element.attachEvent不是函数”

这是我目前的小提琴：http://jsfiddle.net/rL5xp/

这是HTML：

<p>The color is <span class="js-print">green</span>.</p>
<button class="js-button">Click Here</button>

这是JavaScript：

var settings = [
    {color : 'green'},
    {color : 'blue'},
    {color : 'red'}
];

var $ele = {
     span   : $('.js-print'),
     button : $('.js-button')
};

var ChangeColor = (function(s, $element) {

  var init = function() {
    bindBrowserActions();
  }

  var bindBrowserActions = function() {
    addClick($element.button, 'click', function() {
         console.log('click');
    });
  }

  var addClick = function(element, evnt, funct) {
    if (element.addEventListener) {
      return element.addEventListener(evnt, funct, false);
    }
    //addEventListener is not supported in <= IE8
    else {
        return element.attachEvent('on'+evnt, funct);
    }
  }

  return {
    init : init
  }

})(settings, $ele);

(function() {
  ChangeColor.init();
})();

最佳答案

在addClick方法中，参数element作为jQuery包装器元素而不是dom元素引用传递，因此它不具有addEventListener或attachEvent之类的方法。

由于element是jQuery包装器元素，因此可以使用.on()注册事件处理程序。

var addClick = function(element, evnt, funct) {
    element.on(evnt,  funct)
}

演示：Fiddle

关于jquery - attachEvent不是函数-使用模块模式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18801964/