さらなるjsの深みへ#3

659 views
623 views

Published on

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

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
659
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

さらなるjsの深みへ#3

  1. 1. さらなるjsの深みへ#3〜return false;じゃない、e.preventDefault()だ!〜2012/11/08 れこ
  2. 2. ちょっと長いかも。 前回の補足(クロージャについて) Event.preventDefault()とは Event.stopPropagation()とは 次回の予定
  3. 3. クロージャのメリット グローバル空間を汚染しない  名前の衝突がなくなる  関数の中からしか変数を参照できない 情報隠蔽  外部から、オブジェクトの内部変数にアクセスできなくする  不正、不用意な書き換えを阻止する
  4. 4. サンプル(見えるかな
  5. 5. Event.preventDefault() ネタバレ  ブラウザの挙動をキャンセルする ページ内でイベントが発生した時に、ブラウザ本来の挙動を キャンセルする  aタグのページ遷移をキャンセル  aタグのページ内アンカーをキャンセル  フォームの送信をキャンセル などなど
  6. 6. こんなHTML書いてませんか? formの送信キャンセル(この後Ajaxか何かの処理が走る想定)  hoge()でreturn false;すればキャンセルされる  けどHTMLに無駄なものが!!!(個人的に大嫌い)
  7. 7. こう書けます。HTMLがすっきり。
  8. 8. 大人の都合で・・・。省きます。
  9. 9. stopPropagation()についてはお預け まとめ  preventDefaultを有効に使うとHTMLがスマートに。  jsでの思い通りの動作を手中に収めたも同然(ではない return false;とpreventDefault()は何が違うのか  preventDefault()  ブラウザが従来行うはずの挙動を止める  return false;  ブラウザ挙動とついでにイベントバブリングも止める イベントバブリングは又の機会に。(あまり使わない気が。
  10. 10. 次回予告 第4話:jsの高みへ  jsの関数呼び出しパターン4つについて調べてみた  「this」について – カスケードを当たり前に使えるようになる
  11. 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

×