Javascript dom events

three types of dom events of javascript

by shohan4556

HTML

<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>

CSS

body {
  background: #EAE3CB;
}

ul {
  margin: 0 auto;
  margin-top:50px;
  padding: 0;
  width: 320px;
}

ul li {
  list-style: none;
  display: inline-block;
}

JavaScript

// 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')
  }