【jQuery】クリックなどでイベントを発生させるトリガー７選

この記事では、JavaScript のライブラリである jQuery でよく使うイベントトリガーをまとめています。

イベントトリガーとは、動かす内容（ソースコード）をいつ動かすのかということです。

詳細はこれから紹介しますが、要素をクリックすることや画面をスクロールすることなどがイベントトリガーとして挙げられます。

クリックされたときにイベントを実行するイベントトリガー

以下のコードが特定の要素や class 名、ID 名のある要素がクリックされたときにイベントを実行するイベントトリガーです。

「class」には要素や class 名、ID 名を入れます。

ボタン要素や開閉式のメニューによく使われるイベントトリガーです。

$('class').on('click',function(){
  //クリックしたら動かしたいソースコードを記述
})

スクロールされたときにイベントを実行するイベントトリガー

以下のコードが画面がスクロールされたときにイベントを実行するイベントトリガーです。

$(window).on('scroll',function(){
  //画面がスクロールされた時に動かしたいソースコードを記述
})

画面を読み込むときにイベントを実行するイベントトリガー

以下のコードが画面を読み込むときにときにイベントを実行するイベントトリガーです。

ローディングアニメーションなどによく使われるイベントトリガーです。

$(function(){
  //画面読み込み時に動かしたいソースコード
})

画面が読み込まれた後にイベントを実行するイベントトリガー

画面が読み込まれた後にイベントを実行するイベントトリガーです。

読み込み後の画面表示のアニメーションや、ヘッダーやファーストビューの表示によく使われるイベントトリガーです。

$(window).on('load',function(){
  //画面が読み込まれた後に動かしたいソースコード
})

マウスオーバーされたときにイベントを実行するイベントトリガー

以下のが特定の要素や class 名、ID 名のある要素にマウスが乗ったとき、そして外れたときにイベントを実行するイベントトリガーです。

「class」には要素や class 名、ID 名を入れます。

簡単なアニメーションであれば、CSS の hover と疑似要素の組み合わせで対応できます。

より複雑な CSS では実装できないホバーアニメーションの実装時に使われるイベントトリガーです。

$('class').on('mouseenter',function() {
  //ホバー開始時（マウスが乗ったとき）に動かしたいソースコード
})
$('class').on('mouseleave', function() {
  //ホバー終了時（マウスが外れたとき）に動かしたいソースコード
})

また、スマホなどのタッチデバイスでタッチ操作が行われた場合は以下のコードで処理します。

$('class').on('mouseenter touchstart',function() {
  //マウスが乗ったら動かしたいソースコード
})
$('class').on('mouseleave touchend', function() {
  //マウスが外れたら動かしたいソースコード
})

マウスが移動したときにイベントを実行するイベントトリガー

マウスが移動したときにイベントを実行するイベントトリガーです。

おしゃれなサイトによくある、マウスにサークルが追従してくる機能を実装するときに使われます。

$(window).on('mousemove', function(){
  //マウスが移動したら動かしたいソースコード
});

時間を遅らせてイベントを実行するイベントトリガー

指定の時間経過後にイベントを実行するイベントトリガーです。

あるアニメーションが実行された１秒後、ある要素が表示された２秒後など、動きをデザインする場合に使用されます。

setTimeout(function(){
  //時間を送らせて動かしたいソースコード
}, 1000);//1秒後

終わりに

今回紹介した、jQuery のイベントトリガー７つをまとめておきます。

$(function(){
  //画面読み込み時に動かしたいソースコード
})

$(window).on('load',function(){
  //画面が読み込まれた後に動かしたいソースコード
})

$(window).on('scroll',function(){
  //画面がスクロールされた時に動かしたいソースコード
})

//「class」には動かしたい要素・クラス名・ID名を指定
$('class').on('click',function(){
  //クリックしたら動かしたいソースコード
})

//hoverでは実装できない複雑なアニメーションのホバーイベント
$('class').on('mouseenter',function() {
  //マウスが乗ったら動かしたいソースコード
})
$('class').on('mouseleave', function() {
  //マウスが外れたら動かしたいソースコード
})

//スマホのタッチ時の表示にも対応
$('class').on('mouseenter touchstart',function() {
  //マウスが乗ったら動かしたいソースコード
})
$('class').on('mouseleave touchend', function() {
  //マウスが外れたら動かしたいソースコード
})

//スマホのタッチ時のイベント
$('class').on('touchstart',function() {
  //タッチしたときに動かしたいソースコード
});
$('class').on('touchend', function() {
  //タッチして指が離れた時に動かしたいソースコード
});

$(window).on('mousemove', function(){
  //マウスが移動したら動かしたいソースコード
});

setTimeout(function(){
  //時間を送らせて動かしたいソースコード
}, 1000);//1秒後

紹介した使用用途以外にもアイデアと工夫で様々な使い方があります。

まだまだ、jQuery 初心者なこともあり未知との遭遇ばかりですが楽しく実装していきたいと思います。