JavaScript addEventListener

by hsablonniere

HTML

<button id="addEventListenerBtn">Prevent defaults for links</button>
<button id="removeEventListenerBtn">Allow defaults for links</button>
<ul id="actors">
  <li id="connery" class="actor"><a href="http://www.imdb.com/name/nm0000125/">Sean Connery</a></li>
  <li id="lazenby" class="actor"><a href="http://www.imdb.com/name/nm0493872/">George Lazenby</a></li>
  <li id="moore" class="actor"><a href="http://www.imdb.com/name/nm0000549/">Roger Moore</a></li>
  <li id="dalton" class="actor"><a href="http://www.imdb.com/name/nm0001096/">Timothy Dalton</a></li>
  <li id="brosnan" class="actor"><a href="http://www.imdb.com/name/nm0000112/">Pierce Brosnan</a></li>
  <li id="craig" class="actor"><a href="http://www.imdb.com/name/nm0185819/">Daniel Craig</a></li>
</ul>
<div id="log"></div>

CSS

body {
  font-family: Arial, sans-serif;
  margin-bottom: 2em;
}

#actors {
  border: 1px solid #AAA;
  border-radius: 5px;
  list-style-type: none;
  margin: 10px 0;
  padding: 1%;
  overflow: hidden;
  width: 98%;
}

.actor {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  float: left;
  height: 130px;
  margin: 1%;
  position: relative;
  width: 14.66%;
}

.actor a {
  background: #EEE;
  bottom: 0;
  display: block;
  position: absolute;
  text-align: center;
  width: 100%;
}

#connery {
  background-image: url(http://images.hollywood.com/site/Sean_Connery_007.jpg);
}

#lazenby {
  background-image: url(http://joehumphrey.com/journal/wp-content/uploads/2011/05/George-lazenby-35.jpg);
}

#moore {
  background-image: url(http://t3.gstatic.com/images?q=tbn:ANd9GcR8_xUf8HTIC6Oi-LCeqJOy-Ru7s32pQF-MAmfAUVEL5qzonSS1tRzNus6q);
}

#dalton {
  background-image: url(http://a4.idata.over-blog.com/342x425/4/06/62/92/articles/Cine/james-bond/Timothy-Dalton.jpg);
}

#brosnan {
  background-image: url(http://www.pop-culture.net/P/pics/pierce-brosnan-james-bond.jpg);
}

#craig {
  background-image: url(http://www.highlighthollywood.com/wp-content/uploads/2012/04/james-bond-daniel-craig.jpg);
}

#log {
  background: #666;
  bottom: 0;
  color: white;
  left: 0;
  line-height: 1em;
  height: 1em;
  padding: 5px 10px;
  position: fixed;
  right: 0;
}

#log a {
  color: #FFA;
}

JavaScript

(function(){
  var aelBtn = document.getElementById('addEventListenerBtn');
  var relBtn = document.getElementById('removeEventListenerBtn');
  var log = document.getElementById('log');
  var actors = document.getElementById('actors');
  
  var clickLinkListeners = function(ev) {
    if (ev.target.nodeName === 'A') {
      ev.preventDefault();
      log.innerHTML = ev.target.innerHTML + ' : ';
      var a = ev.target.cloneNode();
      a.innerHTML = a.getAttribute('href');
      log.appendChild(a);
    }
  };
  
  aelBtn.addEventListener('click', function(ev) {
      actors.addEventListener('click', clickLinkListeners, false);
  }, false);
  
  relBtn.addEventListener('click', function(ev) {
      actors.removeEventListener('click', clickLinkListeners, false);
  }, false);a
})();