JavaScript addEventListener

by hsablonniere

HTML

<ul id="actors">
  <li class="actor" id="connery" title="Sean Connery"></li>
  <li class="actor" id="lazenby" title="George Lazenby"></li>
  <li class="actor" id="moore" title="Roger Moore"></li>
  <li class="actor" id="dalton" title="Timothy Dalton"></li>
  <li class="actor" id="brosnan" title="Pierce Brosnan"></li>
  <li class="actor" id="craig" title="Daniel Craig"></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-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  float: left;
  height: 150px;
  margin: 1.5%;
  opacity: .3;
  -moz-transform: scale(.75);
  -ms-transform: scale(.75);
  -o-transform: scale(.75);
  -webkit-transform: scale(.75);
  transform: scale(.75);
  -moz-transition: all 300ms ease-in;
  -ms-transition: all 300ms ease-in;
  -o-transition: all 300ms ease-in;
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
  width: 30.33%;
}

.actor.favourite {
  opacity: 1;
}

.actor.big {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

#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;
}

JavaScript

(function() {
    var bonds = document.getElementById('actors');
    var log = document.getElementById('log');

    bonds.addEventListener('click', function(ev) {
        log.innerHTML = 'click on : ' + ev.target.nodeName + ' (' + ev.target.id + ') ';
        log.innerHTML += 'event phase : ' + ev.eventPhase;
        if (ev.target.nodeName === 'LI') {
            if (ev.ctrlKey) {
                ev.target.classList.toggle('big');
            } else {
                ev.target.classList.toggle('favourite');
            }
        }
    }, false);
})();