#addEventListenerの使い方
getElementByIdなどで要素（ターゲット）を取得し、その要素にイベント発生時の処理を書きます。
<div id="js-target">click</div>
上記のようなHTMLのclickと書かれた要素がクリックされた時の処理を書いてみます。
let target = document.getElementById('js-target');
```
```
target.addEventListener('click', function() {
// クリックされた時の処理を書く
console.log('click');
});
```
定義された関数を実行するには、以下の様に書きます。
```
let target = document.getElementById('js-target');
target.addEventListener('click', eventFunc);
function eventFunc(){
// クリックされた時の処理を書く
console.log('click');
}
```
##主なイベント一覧
| 引数 | イベント発火のタイミング|
|:-:|:-:|
| click | クリック時 |
| mousedown | マウスのボタンが押下された時 |
| mouseup | マウスのボタンを離した時 |
| mouseover | カーソルがターゲットに侵入した時 |
| mousemove | カーソルがターゲット内を動いている時 |
| mouseout | カーソルがターゲットの外に出た時 |
| load | ページの読み込みが完了した時 |
| scroll | スクロールされた時 |
| resize | ブラウザのウィンドウ等のサイズが変更された時
|
##関数に引数を渡す
```
let target = document.getElementById('js-target');
target.addEventListener('click', function(e) {
console.log(e.target); // クリックされた要素
console.log(e.clientX); // ブラウザ内の左上からのX座標
console.log(e.clientY); // ブラウザ内の左上からのY座標
console.log(e.pageX); // HTML全体の左上からのX座標
console.log(e.pageY); // HTML全体の左上からのy座標
console.log(e.offsetX); // クリックターゲットの要素左上からのX座標
console.log(e.offsetY); // クリックターゲットの要素左上からのy座標
});
```
以下のような書き方もある。
```
let target = document.getElementById('js-target');
target.addEventListener('click', eventFunc);
function eventFunc(e) {
console.log(e.target); // クリックされた要素
console.log(e.clientX); // ブラウザ内の左上からのX座標
console.log(e.clientY); // ブラウザ内の左上からのY座標
console.log(e.pageX); // HTML全体の左上からのX座標
console.log(e.pageY); // HTML全体の左上からのy座標
console.log(e.offsetX); // クリックターゲットの要素左上からのX座標
console.log(e.offsetY); // クリックターゲットの要素左上からのy座標
}
```