イベントハンドラとイベントリスナ

onClick のほうはイベントハンドラ
addEventListener のほうはイベントリスナ

イベントハンドラは、イベントが発生したときに登録されたある1つの関数しか実行しない。
つまり1度イベントハンドラに設定した関数をそのあとで違うものに設定すると、あとから設定したほうしか実行されない

イベントリスナというものは、イベントが発生したときに実行する関数を 1 つ以上設定できる

コンソールログを実行するよ！
コンソールログを実行するよ！

var test1 = document.getElementById("hoge1");

test1.onclick = function() {
  console.log('イベントハンドラ1');
};

test1.onclick = function() {
  console.log('イベントハンドラ2');
};
//イベントハンドラ2しか出ない


var test2 = document.getElementById("hoge2");

test2.addEventListener("click",function(){
  console.log('イベントリスナ1');
});

test2.addEventListener("click",function(){
  console.log('イベントリスナ2');
});
//イベントリスナ1とイベントリスナ2が出る