Recommended
More Related Content
Similar to Miyazaki.js vol.2
Similar to Miyazaki.js vol.2 (20)
More from Takami Kazuya
More from Takami Kazuya (20)
Miyazaki.js vol.2
- 2. © aratana.inc 自己紹介 1 高見 和也（Takami Kazuya） Twitter@miiitaka Facebook@miiitaka 株式会社アラタナ フロントエンドエンジニア JavaScriptと友達です。
- 3. © aratana.inc 仕様 2 Question: h2タグにクリックイベントを追加（IDで指定） → クリックで次要素のulタグ表示 → 再度クリックでulタグが非表示 → 500ミリ秒で開閉する liタグにクリックのイベント追加 → クリックしたらalert()を表示 → alert()の内容はクリックした要素のテキストを表示
- 4. © aratana.inc 基本のコードはこちら 3 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click！</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html>
- 5. © aratana.inc 追記場所 4 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { // 記述ができるのはここだけ。ほかのコードは触らないで作りましょう (^o^) }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click！</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html>
- 6. © aratana.inc JavaScript だけ抜粋 5 $(function () { $("h2").click(function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
- 10. © aratana.inc 改善その１：要素をキャッシュする 9 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <style> #click_trigger { background: #ccc; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(function () { }); </script> </head> <body> <h1>Sample</h1> <h2 id="click_trigger">Click！</h2> <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> </ul> </body> </html> IDが設定されている
- 11. © aratana.inc 改善その１：要素をキャッシュする 10 $(function () { $("h2").click(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.click(function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); }); 変数に保持してそれを 使いまわします。
- 13. © aratana.inc 改善その２：イベントのバインド 12 jQuery1.7以上であれば、on(), off() でバインド（関連付け）しま しょう。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.click(function () { click_trigger.on("click", function () { $("#click_trigger + ul > li").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
- 14. © aratana.inc 改善その２：イベントのバインド 13 .click(fn)は、.on("click", fn)のショートカットメソッドなので、良い といえば良いが… 拡張性やメリットを考慮して .on(“click”, fn) を採用しましょう。
- 15. © aratana.inc 改善その２：イベントのバインド 14 メリット①：複数のイベントタイプが設定できます。 $("#hoge").on("touchstart click", function () { // 処理を書きます });
- 16. © aratana.inc 改善その２：イベントのバインド 15 メリット②：複数のイベントハンドラが設定できます。 $("#hoge").on({ "mouseenter": function () { }, "mouseleave": function () { } });
- 18. © aratana.inc 改善その２：イベントのバインド 17 メリット④：イベントに引数を渡すことができます。 .on( events [, selector ] [, data ], handler(eventObject) );
- 20. © aratana.inc 改善その3：キュー構造の理解 19 liが対象になると、slideToggle()メソッドがliの数分発生するので無 駄な処理が動作してしまいます。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $("#click_trigger + ul > li").slideToggle(500); $(this).next("ul").slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
- 28. © aratana.inc 改善その3：キュー構造の理解 27 キューのアニメーションを破棄してから次のアニメーションを動作 させます。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
- 33. © aratana.inc 改善その4：少ないアクセスで済ませる 32 liをクリックするとalert()を動作させたい。 liにイベントを設定しているが、この設定対象を変えます。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
- 34. © aratana.inc 改善その4：少ないアクセスで済ませる 33 liにアクセスするより、ID+ulセレクタにアクセスするほうが速い。 イベント設定対象が減る。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function () { $(this).next("ul").stop().slideToggle(500); }); click_trigger.next("ul").on("click", "li", function () { $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); });
- 36. © aratana.inc 改善その4：少ないアクセスで済ませる 35 window document h2h1 ul li $(window).on(“click”, fn) が発動！ $(document).on(“click”, fn) が発動！ $(“ul”).on(“click”, fn) が発動！
- 38. © aratana.inc 改善その4：少ないアクセスで済ませる 37 バブリングの発生を止めておきましょう。 $(function () { ”use strict”; var click_trigger = $(”#click_trigger”); click_trigger.on("click", function (e) { e.stopPropagation(); $(this).next("ul").stop().slideToggle(500); }); click_trigger.next("ul").on("click", "li", function (e) { e.stopPropagation(); alert($(this).text()); }); });
- 39. © aratana.inc 改善その4：少ないアクセスで済ませる 38 <ul> <li>メニュー01</li> <li>メニュー02</li> <li>メニュー03</li> <li>メニュー04</li> </ul> 要素を動的に増やすと しましょう。 $("button").on("click", function (e) { e.stopPropagation(); var objLi = $("<li>").text("メニュー04"); click_trigger.next("ul").append(objLi); });
- 40. © aratana.inc 改善その4：少ないアクセスで済ませる 39 .on() でバインドしてイベントデリゲートにしておくと、動的に追 加した要素にも自動的にイベントが設定されます。 click_trigger.next("ul").on("click", "li", function (e) { e.stopPropagation(); alert($(this).text()); }); $("#click_trigger + ul > li").on("click", function () { alert($(this).text()); }); ○拡張ある記述 ×拡張性がない