プログラミング初心者のJavaScript備忘録-イベント編



##クリック時に処理
###関数名なし
```
var elm = document.getElementById("対象");
elm.addEventListener("click", function(e){
	//処理
});
```

###関数名あり

```
var elm = document.getElementById("対象");
elm.addEventListener("click", clickElm);
function clickElm(e){
	//読み込み後の処理
}
```

###イベントオブジェクトが持つプロパティ
function(e)の"e"にはいろんなプロパティが入っていて利用できる。イベントが起こった要素を調べるtarget、イベントリスナー関数を設定した要素を調べるcurrentTargetなどはよく使う。

####例）クリックされた画像を親要素のリストごと削除するサンプル

```
<script>
	var container = document.querySelector(".grid");
	container.addEventListener("click",removeElement);
	function removeElement(e){
		var target = e.target;
		if(target.tagName === "IMG"){
			var removeNode = target.parentNode;
			eventObject.currentTarget.removeChild(removeNode);
		}
	}
</script>

///////////////////////

<ul class="grid">
	<li><img ~ ></li>
	<li><img ~ ></li>
	<li><img ~ ></li>
	<li><img ~ ></li>
	<li><img ~ ></li>
</ul>
```

###イベントの伝わる流れ設定と配信中止
function(e)の"e"にはいろんなプロパティが入っていて利用できる。イベントの伝わる流れには、バブリング（子から親へ）とキャプチャ（親から子へ）があり、stopPropagation()メソッドで配信が止められる。イベントリスナー関数の第3引数にtrueを設定したらキャプチャ、falseでバブリング（デフォルト）。
####例）キャプチャに設定

```
var oya = document.getElementById("親");
oya.addEventListener("click", function(e){
	//処理
},true);//キャプチャに設定
var kodomo = document.getElementById("子");
kodomo.addEventListener("click", function(e){
	//処理
});
```
####例）配信中止

```
var oya = document.getElementById("親");
oya.addEventListener("click", function(e){
	//処理
});//第3引数を設定してないのでバブリング（デフォルト）
var kodomo = document.getElementById("子");
kodomo.addEventListener("click", function(e){
	e.stopPropagation();//親要素のイベントは発生しない
	//処理
});
```

###preventDefault()メソッドでデフォルトの動きを止める

同じくfunction(e)の"e"に入っている。アンカーをクリックしても遷移させない（リンクとしての処理を抑える）など、イベントにともなう規定の動きを止めることができる。


```
var elm = document.getElementById("対象");
elm.addEventListener("click", function(e){
	e.preventDefault();
	//処理
});
```

##マウスオーバー、マウスアウト、マウスムーブ時に処理
###関数名なし

```
var elm = document.getElementById("対象");
elm.addEventListener("mouseover", function(e){
	//マウスオーバー時の処理
});
elm.addEventListener("mouseout", function(e){
	//マウスアウト時の処理
});
elm.addEventListener("mousemove", function(e){
	//マウスムーブ時の処理
});
```

###関数名あり

```
var elm = document.getElementById("対象");
elm.addEventListener("mouseover", handlemouseover);
elm.addEventListener("mouseout", handlemouseout);
elm.addEventListener("mousemove", handlemousemove);
function handlemouseover(e){
	//マウスオーバー時の処理
}
function handlemouseout(e){
	//マウスアウト時の処理
}
function handlemousemove(e){
	//マウスムーブ時の処理
}
```

###イベントリスナーの削除（クリア）

```
対象.removeEventListener("動作", handlemouseover);
```

マウスオーバーのイベントハンドラー内でマウスアウトのイベントリスナーを登録したときなど、動的に加えた要素を除き、処理が済んだイベントリスナーを削除したいときがある。

####例）リスナーを削除しないとエラーが出る
マウスオーバーのたびにマウスアウトのリスナーが登録され、2回目以降のマウスアウト時に対象のDOMがありませんとコンソールエラーが出る。

```
var elm = document.getElementById("対象");
elm.addEventListener("mouseover", handlemouseover);

function handlemouseover(e){
	//DOM作る処理
	〜.addEventListener("mouseout", handlemouseout);
}
function handlemouseout(e){
	//DOM消す処理
}
```

####例）マウスアウトハンドラーの中でマウスアウトリスナーをクリアしてリスナーの重複登録を防ぐ

```
var elm = document.getElementById("対象");
elm.addEventListener("mouseover", handlemouseover);

function handlemouseover(e){
	//DOM作る処理
	〜.addEventListener("mouseout", handlemouseout);
}
function handlemouseout(e){
	//DOM消す処理
	〜.removeEventListener("mouseout", handlemouseout);
}
```

##画像が読み込み後に処理
###関数名なし

```
var elm = document.getElementById("対象");
elm.addEventListener("load", function(e){
	//読み込み後の処理
});
```

###関数名あり

```
var elm = document.getElementById("対象");
elm.addEventListener("load", loadedImage);
function loadedImage(e){
	//読み込み後の処理
}
```

####例）ロードハンドラーの中でロードリスナーをクリアしてリスナーの重複登録を防ぐ
見た目では問題ないことが多いが、のちのちエラーになったり、またメモリの無駄が生じるという側面もあるので削除する方がよい。

```
var elm = document.getElementById("対象");
elm.addEventListener("load", loadedImage);

function handlemouseover(e){
	//読み込み後の処理
	elm.removeEventListener("load", loadedImage);
}
```


##ページ読み込み後に処理
###関数名なし

```
window.onload = function(){
	//読み込み後の処理
};
```

###関数名あり

```
window.onload = load;
function load(){
	//読み込み後の処理
}
```