主にイベントハンドラについて扱います。
いくつかピックアップして見てみます。
1. click(そもそもクリックイベントって括りがよくなかった..)
$(".divBox").click(function () {
//処理
});
$(".divBox").on("click",function () {
//処理
});
両方とも同じ挙動、要素(ここではdiv要素)にイベントハンドラを渡しています。
clickはmousedownとmouseupの組み合わせなので、以下のように処理を分けることも。
$(".divBox").on("mousedown",function () {
console.log("押し込んだよ");
}).on("mouseup",function(){
console.log("押し戻したよ")
});
2. one
$(".divBox").one("click", function () {
//処理
});
一度だけ有効なイベントのハンドラ
3. hover
$(".divBox").hover(function () {
//処理
});
要素にマウスカーソルを当てた際 / マウスカーソルを外した際にイベントが着火します。
4. keydown
$("body").keydown(function () {
// 処理
});
キー入力した際にイベントが着火します。
ちょっとした実験をしてみます。
何も面白くない例ですが。
ソース
$(document).ready(function () {
$(".divBox").click(function () {
// 指定した要素の直後に追加する
$(this).after("<div class='divBox'>追加DIV</div>");
});
// キーダウンイベント
$("body").keydown(function (element) {
// キーコードを取得
console.log(element.keyCode);
$(".divBox").text(element.keyCode);
});
});
ロジック
・1個目の要素をクリックで要素(追加DIVと記載)を追加
・キー入力で全要素にキーコードを表示
0.初め
いつも通りです。
1.1つ目の要素をクリックする
要素が追加されました。afterメソッドで直後に要素を挿入しています。
2.キー入力
適当なキーを入力。全ての要素が書き換わっています。
3.1つ目の要素をクリックする
要素が追加されました。afterメソッドで直後に要素を挿入しています。
2番目に挿入される理由は
$(this).after("<div class='divBox'>追加DIV</div>");
4.キー入力
問題.
2番目の要素をクリックした際、想定される結果は次のうちどれでしょうか。
・全ての要素が、クリックに対応するキーコードに置き換わる
・追加DIVと記載の要素が2番目に挿入される
・何も起こらない
復習用に問題を置いておきます。コード読めますかって話でしかありませんが。
ところでソース転記した途端にインデントが崩れるの、どうにかなりませんかね...