Edit in JSFiddle

JavaScript
HTML
Result

  // set id on the html tag
  var ctx = document.getElementById('type_two'); // geting the reference
  ctx.onclick = function clicked() {
    alert('type two event');
  }
	// grub id 
  document.getElementById('type_three').addEventListener('click',clickedGrey,false);

  function clickedGrey(){
    alert('type three event')
  }

<title>Javascript Events</title>

<body>
  <h2>Three Types of Events Of Javascript</h2>

  <ul>
    <li><img src="http://i.imgur.com/9Bp41Nq.gif" onclick = "alert('type one event')"></li>
    <li><img src="http://i.imgur.com/LDJ8rIw.gif" id="type_two"></li>
    <li><img src="http://i.imgur.com/PfBzcoV.gif" id="type_three"></li>
    <li><img src="http://i.imgur.com/PfBzcoV.gif"></li>
    <li><img src="http://i.imgur.com/9Bp41Nq.gif"></li>
    <li><img src="http://i.imgur.com/PfBzcoV.gif"></li>
    <li><img src="http://i.imgur.com/LDJ8rIw.gif"></li>
    <li><img src="http://i.imgur.com/9Bp41Nq.gif"></li>
    <li><img src="http://i.imgur.com/LDJ8rIw.gif"></li>
  </ul>
  
</body>