1:HTML属性を使う方法(埋め込む)

<div class="btn" onclick="alert('サンプル')"></div>

2:イベントプロパティを使う方法：要素.イベントハンドラ:イベントの追加登録は不可

ex: document.getElementById('hoge').onclick();

3:EventTarget.addEventListener('イベント',実行関数,false);イベント追加登録が可能

//CODE
  element.addEventListener('click', myClickHandler, {
    once: true,//一度だけ
    passive: true,//スマホ対応
    capture: true
  });

単にtrue、flaseの場合は、capture
true　＝　キャプチャリング　→　下の要素ににクリックイベントが伝播
バブリング　→　上の要素ににクリックイベントが伝播

EventTarget.addEventListener('イベント',実行関数,false);

//イベントだけ渡す
  function listener(e){
    console.log(e.target);
  }
//イベント以外にも値を渡す
  function listener(color){
    return function(e){
      e.target.style.backgroundColor = color;
    }
  }
EventTarget.addEventListener('click',listener("red"),false);

• -> EventTarget.addEventListener()
• -> Eventオブジェクト
• ->

注意）イベントターゲットで使えるハンドラが違う

例えば、selectionchange イベントは、documentにはあるけど、Elementにはない！
またElementには、selectイベントはあるが、inputやtextareaのみ発生。contenteditableなエリアでは拾えない。

• -> JavaScriptのイベント一覧

//CODE
//イベント一覧
click 	マウスがクリックされた場合
keydown　 	キーボードが押された場合
keyup　 	キーボードが離された場合
mousedown　 	マウスボタンが押された場合
mouseup 	マウスボタンが離された場合
mousemove 	マウスカーソルが移動した場合
mouseover 	マウスカーソルがオブジェクトに重なった場合
mouseout 	マウスカーソルがオブジェクトから離れた場合
onLoad 	ページが読み込まれた場合
onUnload 	他のページに移動する場合
-------------
focus 	選択された状態になった場合
blur 	フォーカスを失った場合
-------------
submit 	フォームがサブミットされた場合
reset 	フォームがリセットされた場合
change 	フォームの内容が変更された場合
-------------
resize 	ウインドウがリサイズされた場合
abort 	イメージの読み込みが中断された場合
error 	読み込みが失敗した場合
load 	Webページの読み込みが完了した時に発動（画像などのリソースすべて含む）
-------------
以下、実験的な機能
paste
cut
copy
-------------

  
  

• -> EventTarget.removeEventListener
• ->
• ->
• ->

  //登録
  element.addEventListener("mousedown", handleMouseDown, true);
//削除
  element.removeEventListener("mousedown", handleMouseDown, false);     // 失敗
  element.removeEventListener("mousedown", handleMouseDown, true);      // 成功


  
  

参考：

  window.addEventListener('click', function() { console.log(1); }, false);
  window.addEventListener('click', function() { console.log(2); }, false);

  var handler = (function(){
      var events = {},
          key = 0;

      return {
          addListener: function(target, type, listener, capture) {
              target.addEventListener(type, listener, capture);
              events[key] = {
                  target: target,
                  type: type,
                  listener: listener,
                  capture: capture
              };
              return key++;
          },
          removeListener: function(key) {
              if(key in events) {
                  var e = events[key];
                  e.target.removeEventListener(e.type, e.listener, e.capture);
              }
          }
      };
  }());

  var key = handler.addListener(window, 'click', (function(x) {
      return function() { console.log(x); }
  })(1), false);