平たく言えば関数を動かすメソッドです。
JavaScriptでイベントに対してなんらかの反応を返させる際、ひとつのイベントにふたつの関数を設定すると前に書いたほうの関数は上書きされて実行されません。
ひとつのイベントに複数の関数を設定したい場合にもこのメソッドを使用します。
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を抜いたものになります。
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らしいです。
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 | 画面をスクロールした時 |
オプションについて
後日加筆予定。
コメント