この記事では、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初心者なこともあり未知との遭遇ばかりですが楽しく実装していきたいと思います。
Coment