jqueryイベント汎用操作まとめです。
click/dblclick クリックイベント
準備
<body>
<h1>クリックイベントタイトル</h1>
<p>こちらをクリックしてください</p>
</body>
$(function() {
// h1のクリックに処理を設定
$("h1").click(function() {
console.log("h1 タイトルをクリック");
});
// pのクリック用の処理
var pClick = function() {
console.log("p 本文をクリック");
};
var pWClick = function() {
console.log("p 本文をダブルクリック");
};
// pのクリック、ダブルクリックに処理を設定
$("p").click(pClick);
$("p").dblclick(pWClick);
});
実行結果
解説
クリックイベント/ダブルクリックイベントで
それぞれコンソールにテキストを出力しています
change submit serialize フォーム/シリアライズ系イベント
準備
<body>
<form id="f">
名前:<input type="text" name="name"><br>
性別
<label><input type="radio" name="sex" value="m">男</label>
<label><input type="radio" name="sex" value="f">女</label>
<br>
<label>
<input type="checkbox" name="tos" value="ok">
利用規約の確認
</label>
<br>
<input type="submit">
</form>
</body>
実行結果
解説
.change() 変更を検出する
ラジオボタンを変更した時に情報をコンソールに出力します
$(":radio").change(function() {
let name = $(this).attr("name");
let val = $(this).val();
console.log(name, val);
});
.changeメソッドで値の変化を検出する関数を作成します
.attr()メソッドは選択したフォームのname属性を取得します（ここではsex）
.val()メソッドはvalueの値を取得します（ここではm/f）
結果
同様にチェックボックスと入力欄の変更を検出する関数を作る場合は以下です。
// チェックボックスの値変更
$(":checkbox").change(function() {
let name = $(this).attr("name");
let isChecked = $(this).prop("checked");
console.log(name, isChecked);
});
// 入力欄の値変更
$(":text").change(function() {
var name = $(this).attr("name");
var val = $(this).val();
console.log(name, val);
});
.prop(条件)メソッドは条件を判定してtrue/falseを返します（ここでは"checked"の有無）
.submit .serialize() .serializeArray() データを送信する/送信したデータを取得する
// submitの処理
$("#f").submit(function() {
console.log(this);
// フォームデータのシリアライズ
console.log($(this).serialize());
console.log($(this).serializeArray());
// イベントを停止
return false;
});
実行結果
解説
.submit()メソッドはsubmitボタンではなくフォーム全体を指定します（コンソール１行目）
.serialize()メソッドではデータとして送信する値を取得できます（コンソール２行目）
.serialiezeArray()メソッドではデータとして送信する値を配列にして取得します(コンソール３行目）
最後にreturn falseとしているのはイベントの伝搬を停止するために記述しています
resize/scroll ウィンドウ変化系イベント
準備
<body>
<h1>サイズ変更タイトル</h1>
<p>サイズ変更本文です</p>
</body>
$(function() {
// ウィンドウサイズ変更
$(window).resize(function() {
var w = $(window).width();
var h = $(window).height();
console.log(w, h);
});
// 行を増やす
for (var i = 0; i < 5; i ++) {
var p = $("p").clone();
$("body").append(p);
}
// スクロールの処理
$(window).scroll(function() {
var top = $(window).scrollTop();
console.log(top + "px");
});
});
実行結果
解説
.resize()メソッドではwindow(ブラウザ)のサイズ変化を検出し
幅と高さをコンソールへ出力しています
.scroll()メソッドではまずfor文でp要素を.clone()メソッドにて複製し
.append()メソッドでbodyの末尾に挿入しています
スクロールできる状態ができたのでwindowをターゲットに
.scrollTop()メソッドで上からの位置を取得してコンソールへ出力しています
focus/blur/focusin/focusout フォーカス系イベント
準備
<body>
<div id="out" style="background: #faa; padding: 2em;">
<input type="text" id="text1">
</div>
<input type="text" id="text2">
</body>
$(function() {
// フォーカス
$("#out, #text2").focus(function() {
var id = $(this).attr("id");
console.log("focus", id);
});
// ブラー
$("#out, #text2").blur(function() {
var id = $(this).attr("id");
console.log("blur", id);
});
// フォーカス イン（子要素も対象）
$("#out, #text2").focusin(function(e) {
var id = $(this).attr("id");
var idTrgt = $(e.target).attr("id");
console.log("focusin", id, idTrgt);
});
// フォーカス アウト（子要素も対象）
$("#out, #text2").focusout(function(e) {
var id = $(this).attr("id");
var idTrgt = $(e.target).attr("id");
console.log("focusout", id, idTrgt);
});
});
実行結果
解説
上段のテキストボックスはdivで囲まれたid=outに対してfucusイベントを設定しています。
そのため子要素を判定しないfocus/blurメソッドではid＝text1にフォーカスをしてもイベントは検知されません
子要素も検知対象とするfocusin/focusoutメソッドではthisのidとしてoutがイベントターゲット（e）のidとしてtext1が検出されます
直接id=text2に各メソッドを当てた場合はいずれもイベントが検出されます。