событие не определено с функцией bind

Question

class Foo {
    construtor(){
        this.ref = document.querySelector('.foo');
        this.bind('click', onClick)
    }
    onClick(event) {
        // event is undefined
        console.log(event)
    }
    bind(event,action) {
        this.ref.addEventListener(event, action.bind(this));
    }
}

Скажите, пожалуйста, как аргумент события может передаваться в функцию onClick.

Answer 1

Следующая демонстрация может связать несколько элементов с любым применимым событием и обратным вызовом.

Демо

Модифицированная версия кода, представленная в этой статье

class Binder {

  constructor(selector) {
    const elements = document.querySelectorAll(selector);
    this.length = elements.length;
    Object.assign(this, elements);
  }

  each(callback) {
    for (let node of Array.from(this)) {
      callback.call(node);
    }
    return this;
  }

  bind(event, callback) {
    return this.each(function() {
      this.addEventListener(event, callback, false);
    });
  }
};


const eH = selector => new Binder(selector);
const eL = element => new Binder(element);

let count = 0;

const clickCount = e => {
  const eTgt = e.currentTarget.children[0];
  count++;
  eTgt.textContent = count;
};

const colorRed = e => {
  e.target.style.color = 'red';
};

eH('.node').bind('click', clickCount);

eL('.tag').bind('click', colorRed);

.node,
.tag {
  display: inline-block;
  width: 110px;
  height: 54px;
  padding: 8px;
  border: 1px solid #000;
  text-align: center;
  font-size: 48px;
  cursor: pointer;
}

*:focus {
  outline: none;
}

<div class='node'><b>0</b></div>

<div class='tag'>TAG</div>

<div class='tag node'><b>TAG</b></div>

Answer 2

Воспользуйтесь преимуществом закрытия:

createOnClickHandler(event) {
    return function onClick() {
         console.log(event);
    }
}

bind(event,action) {
    this.ref.addEventListener(event, createOnClickHandler(event));
}