狠狠撸

狠狠撸Share a Scribd company logo
さらなるjsの深みへ#3

?return false;じゃない、e.preventDefault()だ!?

2012/11/08   れこ
ちょっと長いかも。

? 前回の補足(クロージャについて)

? Event.preventDefault()とは

? Event.stopPropagation()とは

? 次回の予定
クロージャのメリット

? グローバル空間を汚染しない
 ? 名前の衝突がなくなる
 ? 関数の中からしか変数を参照できない



? 情報隠蔽
 ? 外部から、オブジェクトの内部変数にアクセスできなくする
 ? 不正、不用意な書き換えを阻止する
サンプル(见えるかな
Event.preventDefault()

? ネタバレ
 ? ブラウザの挙動をキャンセルする



? ページ内でイベントが発生した時に、ブラウザ本来の挙動を
  キャンセルする
 ? aタグのページ遷移をキャンセル
 ? aタグのページ内アンカーをキャンセル
 ? フォームの送信をキャンセル などなど
こんなHTML書いてませんか?




? formの送信キャンセル(この後Ajaxか何かの処理が走る想定)
 ? hoge()でreturn false;すればキャンセルされる
 ? けどHTMLに無駄なものが!!!(個人的に大嫌い)
こう書けます。




HTMLがすっきり。
大人の都合で???。省きます。
stopPropagation()についてはお預け

? まとめ
  ? preventDefaultを有効に使うとHTMLがスマートに。
  ? jsでの思い通りの動作を手中に収めたも同然(ではない

? return false;とpreventDefault()は何が違うのか
  ? preventDefault()
     ? ブラウザが従来行うはずの挙動を止める
  ? return false;
     ? ブラウザ挙動とついでにイベントバブリングも止める

? イベントバブリングは又の機会に。(あまり使わない気が。
次回予告

? 第4話:jsの高みへ
 ? jsの関数呼び出しパターン4つについて調べてみた
 ? 「this」について – カスケードを当たり前に使えるようになる
参考リンク

? 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

More Related Content

さらなる箩蝉の深みへ#3