JavaScript DOM events

events.js

/** attach event diretly to DOM element */
var myelement = document.getElementById('my-div');
myelement.onclick = function() {
  alert('Ouch!');
}

/** add event listener */
var mypara = document.getElementById('my-div');
mypara.addEventListener('click',
  function() {alert('Boo!')},
  false
);

/**
 * old IE compatible attaching 
 * @param {object} el - DOM element to attach event
 * @param {string} type - click, mouseover, etc...
 * @param {function} handler - function to execute
 **/
function addEvent(el, type, handler) {
  if (el.addEventListener) {
    el.addEventListener(type, handler);
  } else {
    el.attachEvent(`on${type}`, handler);
  }
};

main.html

<!-- attach event directly in HTML -->
<div onclick="alert('Ouch!')">click</div>