2014/04/15

【jQuery】 ウェブサイト作成の際に使用頻度の高いイベント まとめ

前回は【JavaScript】ウェブサイト制作の際によく使うイベントまとめということでjQueryを使用しない場合のイベント設定方法を紹介しました.しかしウェブサイトを作成する際にjQueryを利用する場合が多いと思うので,今回は使用頻度の高いイベントの設定方法をまとめました.

目次

イベントとサンプルコード

要素がクリックされた場合

$("要素").click(function(event){
//処理の内容
});

ダブルクリックの場合は"dbclick"と指定します.

いずれかのキーが押された場合

$(window).keydown(function(event){
//処理の内容
});

キーの押下中はkeypressを,キーを離した場合はkeyupを指定します.

要素にマウスカーソルが乗った場合

$("要素").mouseover(function(event){
//処理の内容
});

子要素でのイベントを発生させたくない場合はmouseenterを指定してください.

要素からマウスカーソルが外れた場合

$("要素").mouseout(function(event){
//処理の内容
});

子要素でのイベントを発生させたくない場合はmouseleaveを指定してください.

マウスカーソルが乗った場合と外れた場合の処理はhoverを使用してこのように記述することも出来ます.

$("要素").hover(function(event){
//マウスカーソルが乗った場合の処理
},function(){
//マウスカーソルが外れた場合の処理
});

要素がフォーカスされた場合

$("要素").focus(function(event){
//処理の内容
});

フォーカスが外れた場合は"blur"を指定します.

右クリックされた場合

$("要素").contextmenu(function(event){
//処理の内容
});

要素がカット/コピー/ペーストされた場合

$("要素").on("cut",function(event){
//処理の内容
});

カットの場合は"cut",コピーの場合は"copy",ペーストの場合は"paste"とそれぞれ指定します.

ウインドウをリサイズした場合

$(window).resize(function(event){
//処理の内容
});

ページの読込が完了した場合

$(window).load(function(event){
//処理の内容
});

DOMの構築が完了した場合

$(document).ready(function(event){
//処理の内容
});

ページがスクロールされた場合

$(window).scroll(function(event){
//処理の内容
});

要素の値が変化した場合

$("要素").change(function(event){
//処理の内容
});

フォームの内容を送信した場合

$("要素").submit(function(event){
//処理の内容
});

ページがアンロードされる場合

$(window).unload(function(event){
//処理の内容
});

ページ内のテキストを選択した場合

$(document).select(function(event){
//処理の内容
});

まとめ

基本的なイベントが多いですが,これらは使用頻度が高く,どのウェブサイトでも使用していると言っても過言ではないので,是非覚えておいてください.