Event Listeners

by LyndseyB

HTML

<button id="btn">
Click Me
</button>

<button id="remove">
Remove Event Listener
</button>

Babel + JSX

const events = (() => {
	const removeListener = (el, fn, callback) => {
    el.removeEventListener('click', fn);
    
    return callback();
  };
  
  const addListener = (el, fn) => {
  	el.addEventListener('click', fn);    
    
    return {
    	removeListener: removeListener.bind(null, el, fn)
    };
  };

  return {
  	addListener
  };
})();

const listener = events.addListener(document.getElementById('btn'), () => {
	console.log('clicked!');
});

const remove = document.getElementById('remove');

events.addListener(remove, () => {
  listener.removeListener(() => {
    console.log('listener removed!');
  });
});