どうもこんばんは！HYPのこうじです。
イベントリスナー、色々ありますよね。よく使います。
にも関わらず、毎回忘れて調べるハメになるのでまとめました！

この記事の内容

• イベントリスナー使用時の注意
• 1. 関数に引数を付けない
• 1. 動的に何かする場合は関数を用意して利用
• よく使う作動条件
• ページが読み込まれたらごにょごにょしたい！
• Vanilla JS
• jQuery
• ページが完全に読み込まれたらごにょごにょしたい！
• Vanilla JS
• jQuery
• クリックされた時にごにょごにょしたい！
• Vanilla JS
• jQuery
• ページがスクロールされた時にごにょごにょしたい！
• Vanilla JS
• jQuery
• ページがリサイズされた時にごにょごにょしたい！
• Vanilla JS
• jQuery
• おわり

イベントリスナー使用時の注意

1. 関数に引数を付けない

ブラウザによってはつけてもちゃんと動作しますが、しない場合もあります。
するかしないか分からないものは、指定しない方が無難です。

[js]
// いいね！
dosument.addEventListener(‘DOMContentLoaded’, GetBird);

// よくないね！
dosument.addEventListener(‘DOMContentLoaded’, GetBird(‘コザクラインコ’));

// よくないね！
dosument.addEventListener(‘DOMContentLoaded’, GetBird());
[/js]

1. 動的に何かする場合は関数を用意して利用

後でイベントを削除したいとか、また追加したいとかある場合は関数を用意してセットするのが良いです。
ただそう言った事の無い、今回だけよ。みたいなものは無名関数がラクです。

[js]
// あとで消したり足したりできないパターン。
dosument.addEventListener(‘DOMContentLoaded’, function()
{
// オカメインコが飼いたくなる処理。
});

// あとで消したり足したり汎用性がある。
// 他でも使いまわし可能。
dosument.addEventListener(‘DOMContentLoaded’, GetBird);
function GetBird()
{
// オカメインコがパニックにならない処理。
}
[/js]

よく使う作動条件

ページが読み込まれたらごにょごにょしたい！

めちゃくちゃ多いパターンだと思います。
ただ、大した重くないスクリプトなら</body>直前に書いた方がラクかもしれません。

DOM構築後に処理開始したい場合は、documentに対して『DOMContentLoaded』を指定します。

Vanilla JS

[js]
document.addEventListener(‘DOMContentLoaded’, function()
{
// ここでごにょごにょする。
});
[/js]

jQuery

[js]
$(function()
{
// ここでごにょごにょする。
});
[/js]

こちらの記事でも紹介しています。

ページが完全に読み込まれたらごにょごにょしたい！

上記のパターンでは、DOMが読み込まれたら(htmlタグが読み込まれたら)動作を開始します。
画像の高さや他のスクリプト等、ページが完全に読み込まれた後に開始したい場合はこちらを使用します。
windowに対して『load』を指定します。

注意する事は、“DOMContentLoaded”の方は”document”にセットするのに対し、こちらは“window”にセットします。

最初これの違いにハマッた事あります。あるよね！？

Vanilla JS

[js]
window.addEventListener(‘load’, function()
{
// ここでごにょごにょする。
});
[/js]

jQuery

[js]
$(window).load(function()
{
// ここでごにょごにょする。
});
[/js]

こちらの記事でも紹介しています。

クリックされた時にごにょごにょしたい！

ありますね。正直マウス考えた人は神だと思います。
アクションさせたい要素に対して『click』を指定します。

Vanilla JS

[js]
document.getElementById(‘bird’).addEventListener(‘click’, function()
{
// ここでごにょごにょする。
});
[/js]

jQuery

[js]
$(‘#bird’).click(function()
{
// ここでごにょごにょする。
});
[/js]

ページがスクロールされた時にごにょごにょしたい！

あるある！あるでしょ！
windowに対して『scroll』を指定します。

Vanilla JS

[js]
window.addEventListener(‘scroll’, function()
{
// ここでごにょごにょする。
});
[/js]

jQuery

[js]
$(window).scroll(function()
{
// ここでごにょごにょする。
});
[/js]

ページがリサイズされた時にごにょごにょしたい！

ある！いやーもうありすぎて困る！たはー！
○○px以下になったら、要素を移動するとか見えなくするとか、レスポンシブな動きもこれで対応出来ますね。
windowに対して『resize』を指定します。

え？スタイルシートでやれって？ごめんちょっと聞こえない^^

Vanilla JS

[js]
window.addEventListener(‘resize’, function()
{
// ここでごにょごにょする。
});
[/js]

jQuery

[js]
$(window).resize(function()
{
// ここでごにょごにょする。
});
[/js]

おわり

大体よく使うハンドラ一覧でした！
他にも制作時によく使うのが増えてきたらご紹介します。