ソースは15分程の走り書きですが。
以前CSSについて書いた際
同様に以下を用います。
<html>
<head>
</head>
<body>
イベントサンプル
<div class="divBox" id="box1">Box1</div>
<div class="divBox" id="box2">Box2</div>
</body>
</html>
※余談ですが、以下の読み込みだとNGで、エラーもはかないんですね。。。
出力結果:
イベントサンプル
Box1
Box2
これらの要素をクリックした際に、以下で挙動を付けていきます。
js/main.js
$(document).ready(function(){
// クリックイベント
$(".divBox").on("click",function(){
if($(this).hasClass("colored")){
$(this).removeClass("colored");
}else{
$(this).addClass("colored");
}
});
// ダブルクリックイベント
$("#box1").on("dblClick",function(){
console.log("test");
});
});
$(document).ready(function(){
DOMの読み込みが完了したタイミングを指定しています。
ちなみに以下はそれよりも遅いタイミングで、
画像などのデータが全て読み込まれた後です。
$(window).load(function(){
$(".divBox")
$("#box1")
セレクターで要素を指定します。
前者がクラスでの指定、後者がIDでの指定です。
今回のサンプルでは両ボックスとも同じクラスを指定しているので、
どちらにもクリックイベントが実装されます。
また、box1クラスは上のボックスのみが持つ値のため、ダブルクリックイベントは上のボックスのみに実装されます。実装できていません。原因がわからず。。。
その他、クリック時にクラスを付与/没収し、色を変えています。
クリックした際の実行結果がこちら。
上、下、上の順にクリック
イベントサンプル
Box1
Box2
イベントサンプル
Box1
Box2
イベントサンプル
Box1
Box2
今回はここまで。他のイベントはそのうち。。。
追記
スマホから見るとインデントもそうですがページ全体のバランスががが‥
はてブのレスポンシブ対応があるそうなので後で考えてみます。
