javascriptでHTML属性を使わず要素にイベントを割り当てる方法/addEventListenerメソッドの使い方

平たく言えば関数を動かすメソッドです。
JavaScriptでイベントに対してなんらかの反応を返させる際、ひとつのイベントにふたつの関数を設定すると前に書いたほうの関数は上書きされて実行されません。
ひとつのイベントに複数の関数を設定したい場合にもこのメソッドを使用します。

addEventListenerの使い方

addEventListenerの使い方

サンプル

イベントの対象オブジェクトに対して指定します。

イベントリスナー追加
オブジェクト.addEventListener(イベントの種類,実行する関数,オプション);
※オプションは省略可能

IDが「clk」のボタンを作ってみます。

<input type = "button" value = "click me!" id = "clk" />

このボタンに対して、JavaScriptで要素を取得します。

const elementOfClk = document.getElementByID("clk");

要素（オブジェクト）に対して、addEventListenerで実行されるイベントを流し込みます。

target.addEventListener('click', function() {
  alert("イベントが実行されました");
});

イベント「click」が最初に指定され、その後に実行される関数（イベントリスナー）が指定されました。このjsは要素がクリックされた時点で自動的にイベントハンドラとして動き、関数を実行します。
実装するとこんな感じになります。

関数の実行内容を直接指定せず、次のようにしても動きます。

target.addEventListener('click',eventClk);

function eventClk(){
  alert("イベントが実行されました");
}

こっちのほうがすっきりしてますね。eventClkに引数がないことに注意してください。引数を渡したい場合は、無名関数function()の中に埋め込むとよいそうです。
ES6から導入されたアロー関数で書くこともできます（pushは今適当に作った架空の引数）。

target.addEventListener('click', () => {evnetClk("push");});

イベントの種類

イベントである「Click」はどこから出てきたのかという話ですが、これはデフォルトで使える引数が決まっています。ほぼHTMLのイベントハンドラ（onclickなど）からonを抜いたものになります。

例1:このdivにマウスカーソルが侵入した回数:

let num = 0;
let target2 = document.getElementById('ovr');
target2.addEventListener("mouseover", function() {
num ++;
  target2.innerHTML = "このdivにマウスが進入した回数:" + num + "回";
});

スクロールするとメニューが表示……みたいなのは、ひとつの手段としてscrollを使うことで作ることが可能です。
これは上のコードのmouseoverをscrollに差し替えても動きません。scrollイベントを使う時はオブジェクトをwindowにします。イベントで使うオブジェクトは、基本elementかdocumentかwindowらしいです。

例2:スクロールした回数:

let numb = 0;
let target3 = document.getElementById('scr');
window.addEventListener("scroll", function() {
numb ++;
  target3.innerHTML = "例2:スクロールした回数:" + numb + "回";
});

イベント一覧

主なイベントには次のようなものがあるそうです（全部は試してない）。

click	マウスをクリックした時
dblclick	マウスをダブルクリックした時
contextmenu	マウスを右クリックしてメニューを開いた時
mousedown	マウスボタンを押した時
mouseup	マウスボタンを離した時
mousemove	マウスでカーソル移動した時
mouseover	マウスカーソルが範囲に侵入した時
mouseover	マウスカーソルが範囲から離脱した時
keydown	キーボードでキー押下時
keyup	キーボードキーを離した時
keypress	キーボードのキーを押し続けている間
touchstart	タッチ開始時（モバイル）
touchmove	画面上で指を動かした時
touchend	指を画面から離したとき
input	内容を入力した時
change	状態変更確定時
submit	submitボタン押下時
load	Webページの読み込みが完全に完了した時
DOMContentLoaded	ページの読み込みが（DOM操作をして問題ないところまで）完了時
resize	画面サイズ変更時
scroll	画面をスクロールした時