JavaScript
addEventListenerとattachEventを両立するよくある話。 前回書いたのがいまいちに思えるので 理想 なるべくaddEventListenerと同じ順で書きたい(けどaddEventListenerってそもそも長い！) 複数の要素相手にforループもいちいち面倒なので省略したい 複数のイ…
preタグの中を全選択したい時がある人向け。 ＊IE9以上 追記: GoogleChrome(webkit)ではボタンのテキストも選択されてしまうので修正 @ 2013/07/24 これの利点 はてなに限ればGistなどの貼り付けで良いが、userscriptとして使えばMDNなど他のサイトでも使え…
document.createEventで作ったイベントがGoogleChromeだけ異なる動きをする。 対処 createEventは実行する関数の中で作るようにする。 関数の外で作ると GChrome - 動かない（一回だけ動く？） IE, Firefox - 動く 確認コード documentをどこでもいいのでク…
thisがwindowにならない時 Firefoxで開発者ツール使用時 スクラッチパッド、コンソールなどを使用しているとfalseになる。 IE, GChromeではtrueになる strict mode時 undefinedになる
pjax サンプル で検索するといくつかpushStateを利用したページが出てきますが、どれもその対策をしていない。。。 大抵リンククリックでpushStateしていますが、同じリンクを続けてクリックするとその分だけ同じ履歴が追加されます。意図していないなら直す…
var a = 0 || false var b = false || 0 alert(a) // false alert(b) // 0 これ自体はそれほど重要ではないと思われるが、例えば 0.a = "a" はエラーになるが、 false.a = "a" はエラーにならない
1.history.pushStateが使える場合 それで解決。IE10以上のすべてで使える。 *移動後に location.replace("#" + target.id) でハッシュを活性化?しないとtarget疑似クラスが有効にならないのでそれだけ注意。 location.hash = target.idだとGChromeで:target…
element.scrollTopMaxは現在Firefoxだけにあるプロパティで、要素の最大スクロール可能量を返す。読み取り専用。window.scrollMaxYのelement版。 これは他のブラウザなら element.scrollHeight - element.clientHeight で求められると思っていたが違った。 …
var timer = setInterval(fn, 100)のtimerは何なのかと思ったら数字だった。この数字はsetInterval/setTimeoutが実行されるとインクリメントされ、スコープに関わらずwindowで共通。 以下のコードで確認できる。 (function(){ var timer = setTimeout(functi…
Firefoxには標準でjs-beautifyと同じ整形機能がついている。 F2で開発者ツールバーを開き、「jsb」と入力すればあとは案内に従うだけ。 特徴として、オンライン上のファイルでも、ローカルファイルでもURL/パスを指定すればで整形できることがある。 使い方 …
document.getElementsByTagNameとか配列（風）のもの全てになにかしたい時にi
requestAnimationFrameの代わりに書かれていることがありますが、単純に16と書いたら良いと思います。 JavaScriptでぴったりの時間で処理はできないのでこだわるポイントではありませんが(';') ちなみにscrollTo(0, 1.9)だと小数点切り下げでpageYOffsetは1…
html, bodyはページサイズ・ウィンドウサイズを決定する要素です。 これらにoverflow, height:100%などサイズに関わるスタイルを指定するとJavaScriptによる位置やサイズ取得に支障が出ることがあります。よほどの理由がない限りしてはいけません。 スタイル…
HTMLCollection, NodeListは該当する要素がなくても常に戻り値があるので注意がいる null (ID) document.getElementById("hoge") document.querySelector("#hoge") HTMLCollection (querySelectorAll以外の複数) document.links, forms, etc document.getEle…
ページを開いたとき document readystatechange (interractive) document DOMContentLoaded ここで構築完了 document readystatechange (complete) window load window pageshow ページを閉じたとき window beforeunload これ以降は閉じた後 window pagehide…
かなり無理やり pushStateが使えない環境での話 スムーズスクロールの戻る/進むを正常化するだけなら スムーズスクロールについて無駄に考えてみたメモ のTest4, Test5を参照してください。ここに書いてある方法は無理やりです。
popstateも起きるので追加しないと・・・ location.hashでハッシュを付与したとき onhashchange, onscroll片方のみ起きる、両方起きる、両方起きないの４パターン 現在のハッシュと代入するハッシュが 異なる … ハッシュが変わり(onhashchange)、履歴が追加…
スムーズスクロールにイージング処理をつけたかったので調べた。 ease outとかease inとか。 読み込むファイルが増えるのは面倒なのでライブラリは使用しない。位置の移動や戻す処理を入れるならライブラリを使ったほうがよさそうだけど。 コード // 1 イー…
なんだかいまいちに思えるので書き直した http://7cc.hatenadiary.jp/entry/addEvent2
keydownやclickはdocument以下のノード・要素に設定する。 追記： イベントのバブリングがわかる人向けの説明。 IE8まではイベントのバブリングがdocumentまでなので、windowに設定してもイベントがキャッチされません。 input.parentNode.parentNode...とpa…
