1

パターンをよりよく理解するために 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();
})();
4

1 に答える 1

3

メソッドではaddClick、引数は dom 要素参照ではなく jQuery ラッパー要素として渡されたため、またはelementのようなメソッドはありません。addEventListenerattachEvent

elementは jQuery ラッパー要素であるため、.on() を使用してイベント ハンドラーを登録できます。

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

デモ:フィドル

于 2013-09-14T12:57:39.900 に答える