「自分だけが宙を泳いで通学する夢」をよく見ていました

仕事はIT系、趣味は音ゲー。オタクの日々をツラツラと書きます

イベントハンドラを弄ってみる【jQuery】

主にイベントハンドラについて扱います。

いくつかピックアップして見てみます。

 

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.初め

 

f:id:ga9chang:20180127181623p:plain

いつも通りです。

 

1.1つ目の要素をクリックする

f:id:ga9chang:20180127181451p:plain

要素が追加されました。afterメソッドで直後に要素を挿入しています。

 

2.キー入力

f:id:ga9chang:20180127181744p:plain

適当なキーを入力。全ての要素が書き換わっています。

 

3.1つ目の要素をクリックする

f:id:ga9chang:20180127181833p:plain

要素が追加されました。afterメソッドで直後に要素を挿入しています。

2番目に挿入される理由は

$(this).after("<div class='divBox'>追加DIV</div>");

 

4.キー入力

f:id:ga9chang:20180127182000p:plain

 

問題.

2番目の要素をクリックした際、想定される結果は次のうちどれでしょうか。

・全ての要素が、クリックに対応するキーコードに置き換わる

・追加DIVと記載の要素が2番目に挿入される

・何も起こらない

 

復習用に問題を置いておきます。コード読めますかって話でしかありませんが。

ところでソース転記した途端にインデントが崩れるの、どうにかなりませんかね...