動作する許可をくれてやる。
では、イベントバインドについてのお話になります。
基本的にJSでやったイベントは全て使えます。
イベントの設定方法
イベントの設定方法は主に2パターンですが、新しいjQueryバージョンを使用する場合は
1パターンさえあればよいです。
bind
既存存在しているセレクタに対してバインドを行います。
$(fucntion() { /************************* * 第一引数 * EventName * 第二引数 * イベント発火時の実行処理 *************************/ $('a.linkBind').bind('click',function() { alert('リンククリックされたっぽい!'); }); })
unbind
bindしたイベントを破棄します。
複数のイベントがあって、指定イベントを破棄したい場合は
引数にイベント名を指定します
イベント名の指定がない場合は全てのイベントを破棄します。
$(fucntion() { /************************* * 第一引数 * EventName * 第二引数 * イベント発火時の実行処理 *************************/ $('a.linkBind').bind('click',function() { alert('リンククリックされたっぽい!'); $('a.linkBind').unbind(); }); })
live
これもイベントバインド関数ですが、将来的に追加される要素に対しても
イベントバインドすることができます。
$(fucntion() { /************************* * 第一引数 * EventName * 第二引数 * イベント発火時の実行処理 *************************/ $('a.linkBind').live('click',function() { alert('リンククリックされたっぽい!'); $('a.linkBind').unbind(); }); $('body').append('<a href="javascript:void(0);" class="linkBind">クリックしてみろやオラァ2</a>'); // ↑で追加されたやつもイベントバインドされる })
die
liveでバインドされたイベントはdieで破棄することができます。
破棄ルールはbindと同じです。指定なければ全イベント破棄されます。
後追加された要素に関してもイベントは破棄されます
$(fucntion() { /************************* * 第一引数 * EventName * 第二引数 * イベント発火時の実行処理 *************************/ $('a.linkBind').live('click',function() { alert('リンククリックされたっぽい!'); $('a.linkBind').die('mouseover'); }); $('body').append('<a href="javascript:void(0);" class="linkBind">クリックしてみろやオラァ2</a>'); // ↑で追加されたやつもイベントバインドされる })
on
jQuery1.7以上を使う場合は、この関数のみを使うようにしましょう。
記述は若干違いますが、bindとliveの動きはここでも設定できます。
ちなみに、onを使うようにするのはですね
jQuery1.9で live/die が廃止されたからなのです(;´Д`)<ジーザス
ちなみに bindとliveの他に delegate というイベントもありますが、混乱のもとなので省きます。
$(fucntion() { /************************* * 第一引数 * EventName * 第二引数 * イベント発火時の実行処理 * * bindと同じ感覚で使う場合 * *************************/ $('a.linkBind').on('click',function() { alert('リンククリックされたっぽい!'); }); /************************* * 第一引数 * EventName * 第二引数 * イベントを付与するセレクタ * 第三引数 * イベント発火時の実行処理 * * liveと同じ感覚で使う場合 * *************************/ $(document).on('click','a.linkBind',function() { alert('リンククリックされたっぽい!'); }); })
off
on関数で設定したイベントはoffで破棄することができます。
これもバインド等と同様の破棄ルールがあります。
$(fucntion() { /************************* * 第一引数 * EventName * 第二引数 * イベント発火時の実行処理 * * bindと同じ感覚で使う場合 * *************************/ $('a.linkBind').on('click',function() { alert('リンククリックされたっぽい!'); $('a.linkBind').off(); }); })
複数のイベントを一度に付与させる
イベントは複数タイプを付与することができます。
bind live on共通で複数パターンを設定する場合は以下のように記述します。
$(fucntion() { /************************* * 第一引数 * 各イベント名と発火時処理のオブジェクト * 第二引数 * liveのようにする場合はここにセレクタ *************************/ $('a.linkBind').[eventBindFucntionName]( { 'click':function() { alert('リンククリックされたっぽい!'); $('a.linkBind').off(); }, 'click':function() { alert('リンククリックされたっぽい!'); $('a.linkBind').off(); } } $(document).[eventBindFucntionName]( { 'click':function() { alert('リンククリックされたっぽい!'); $('a.linkBind').off(); }, 'mouseover':function() { alert('マウスのっけられたかも!'); $('a.linkBind').off(); } },'a.linkBind'); })
このようにオブジェクト形式での指定を行います。
複数イベントで同一の処理を使う
上記はイベントも処理も違う場合の書き方になります。
で、何しても同じ処理を実行させたい場合は、イベント名を半角スペースで区切ります。
$(fucntion() { $('a.linkBind').on('click mouseover',function() { alert('何かされたっぽい!'); $('a.linkBind').off(); } })
イベントについて
正直イベント自体はJSでやっているので改めて記述はしません。
イベントバインドでのイベント名はリファレンスでもみて暗記してとしか言えません。暗記しましょう。ある程度は!
ですがjQueryのイベントとして必要なものを抜粋していきます。
mouseenter
マウスオンの動作ですが、子要素は反応しないものとなります。
mouseoverは子要素に対してもイベントが発生します。
適時使い分けていきましょう。
$(fucntion() { $('a.linkBind').on('mouseenter',function() { alert('何かされたっぽい!'); } })
mouseleave
マウスアウトの動作ですが
mouseenterと同じく、子要素は反応しないタイプです。
$(fucntion() { $('a.linkBind').on('mouseleave',function() { alert('何かされたっぽい!'); } })
resize
windowオブジェクトに対して設定します。
ウインドウサイズを変える度に実行されます。
なので、処理実行回数は多いイベントとなります。
$(fucntion() { $(window).on('resize',function() { alert('何かされたっぽい!'); } })
scroll
スクロールバーが動作した時点で発火します。
どの要素にも設定を行うことができます。
rezieと同様処理実行回数は多いイベントとなります。
$(fucntion() { $(body,html).on('scroll',function() { alert('何かされたっぽい!'); } })
hover
mouseenterとmouseleaveを一度に設定することができます。
記述方法が若干変わります。
$(fucntion() { /************************* * 第一引数 * mouseenter処理 * 第二引数 * mouseleave処理 *************************/ $(body,html).hover(function { // mouseenter処理 }, function() { // mouseleave処理 } })