eSPAシステム班LT３回目の資料。jsのクロージャとevent.preventDefaultについて調べてみました。

1. さらなるjsの深みへ＃３
〜return false;じゃない、e.preventDefault()だ！〜
2012/11/08 れこ

2. ちょっと長いかも。
 前回の補足（クロージャについて）
 Event.preventDefault()とは
 Event.stopPropagation()とは
 次回の予定

3. クロージャのメリット
 グローバル空間を汚染しない
 名前の衝突がなくなる
 関数の中からしか変数を参照できない
 情報隠蔽
 外部から、オブジェクトの内部変数にアクセスできなくする
 不正、不用意な書き換えを阻止する

4. サンプル（見えるかな

5. Event.preventDefault()
 ネタバレ
 ブラウザの挙動をキャンセルする
 ページ内でイベントが発生した時に、ブラウザ本来の挙動を
キャンセルする
 aタグのページ遷移をキャンセル
 aタグのページ内アンカーをキャンセル
 フォームの送信をキャンセル などなど

6. こんなHTML書いてませんか？
 formの送信キャンセル（この後Ajaxか何かの処理が走る想定）
 hoge()でreturn false;すればキャンセルされる
 けどHTMLに無駄なものが！！！（個人的に大嫌い）

7. こう書けます。
HTMLがすっきり。

8. 大人の都合で・・・。省きます。

9. stopPropagation()についてはお預け
 まとめ
 preventDefaultを有効に使うとHTMLがスマートに。
 jsでの思い通りの動作を手中に収めたも同然（ではない
 return false;とpreventDefault()は何が違うのか
 preventDefault()
 ブラウザが従来行うはずの挙動を止める
 return false;
 ブラウザ挙動とついでにイベントバブリングも止める
 イベントバブリングは又の機会に。（あまり使わない気が。

10. 次回予告
 第４話：jsの高みへ
 jsの関数呼び出しパターン４つについて調べてみた
 「this」について – カスケードを当たり前に使えるようになる

11. 参考リンク
 event.preventDefault() と event.stopPropagation() の違い -
刺身☆ブーメランのはてなダイアリー
http://d.hatena.ne.jp/a666666/20100916/1284569967
 preventDefault() と stopPropagation() | jmblog.jp
http://jmblog.jp/archives/169
 return false, preventDefault, and stopPropagation in jQuery - Jon
Vines' Blog
http://blog.webvines.co.uk/post/3743395029/return-false-
preventdefault-and-stoppropagation-in
 JavaScriptをまじめに考えました+
http://www.slideshare.net/taikiken/javascript-14882630