Event Driven JavaScript - os0x.blog
document.createEventとdispatchEvent、addEventListenerを使ってイベントドリブンに書いたJavaScriptがオレブーム(ただし、IE非対応*1 )なので、軽く紹介してみたいと思います。 具体的には、AutoPatchWork (Google Chrome Dev用のextension)をイベントドリブンで実装しています。 AutoPatchWork.jsが2009/06/11 21:00時点のソース(id:nanto_viのコメントをうけて#を.に変更済み)。シンプルさを重視しているので、324行と短めです(CSSは別ファイルですが)。 window.addEventListener('scroll', check_scroll, false); window.addEventListener('AutoPatchWork.request',
Progress Listenersでロケーションバーのurl変更されたときに何かする - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20100301.html
JavaScriptテク、setTimeout()のかわりにpostMessage()を使う | エンタープライズ | マイコミジャーナル
Firefox web browser - Faster, more secure & customizable JavaScriptのタイムアウト処理「setTimeout」で処理できる最短の時間はブラウザごとに違っている。これはsetTimeoutで極端に短い時間が繰り返し使われた場合にブラウザのほかの処理に影響がでるのを避けるためのもので、主要なブラウザではだいたい10msが最短値に設定されている。Chromeではこの制限は緩く2msほどとされている。つまり、引数に0を指定しても0msとしては処理されず、10msなり2msなりで処理が実施されることになる。 しかしほかの処理はさておき、ともかく処理時間の短縮を実現したいというケースもある。そうした場合に利用できるテクニックをDavid Baron氏がDavid Baron's weblog: setTimeout with a sho
【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (6) クロスドキュメントメッセージング | エンタープライズ | マイコミジャーナル
HTML5から、ウィンドウ(フレーム)間でメッセージの送受信を行うための仕組みが用意された。この仕組みを用いると、対象となるウィンドウのインスタンスさえ手に入れば、同じオリジン(プロトコル+ドメイン + ポート番号)のWebページはもちろん、違うオリジンのWebページとも通信を行うことが可能だ。 まず、他のウィンドウから送られてきたメッセージを受信するには、windowオブジェクトのmessageイベントを監視する必要がある。 // messageイベントの監視 window.addEventListener("message", function() {...}, false); 他のウィンドウに対してメッセージを送信する場合は、window.postMessage()メソッドを使用する。 postMessage(data, "targetOrigin"); postMessage()
Comparison of Event Targets - Web APIs | MDN
EventConstructorEvent()Instance propertiesbubblescancelablecancelBubble Deprecated composedcurrentTargetdefaultPreventedeventPhaseexplicitOriginalTarget Non-standard isTrustedoriginalTarget Non-standard returnValue Deprecated srcElement Deprecated targettimeStamptypeInstance methodscomposedPath()initEvent() Deprecated preventDefault()stopImmediatePropagation()stopPropagation() It's easy to get con
id:otsune さんと id:otsnue さんを間違えないようにする Greasemonkey - IT戦記
最近、はてなユーザーも多様化してきて 似た名前のユーザーって多いですよね＞＜！ たとえば、以下のように名前を間違えるというようなこともままあります。 id:otsune id:kajuntkさん。そのidは私じゃありません。 2009/01/12 id:kajuntk id:otsune その辺は考慮して書いてると思うよ/ホントだ！今気がついた。 2009/01/12 id:otsnue amachangはアイドルであり身内だからな。身内が叩かれるとプッツンしてさらに過激にdis返しをするのが奴らの恒例行事。トコロテンさんが気の毒です。 2009/01/12 はてなブックマーク - なんかブコメで叩かれまくってる - Automatons Hacking Guide これは困ってしまいました＞＜ なんと、かの id:TAKESAKO 氏ですら見間違えてしまうほどです！ というわけで 間違え
Document Object Model Events
1. Document Object Model Events Editors: Björn Höhrmann Philippe Le Hégaret, W3C (until November 2003) Tom Pixley, Netscape Communications Corporation (until July 2002) 1.1 Introduction DOM Events is designed with two main goals. The first goal is the design of an event system which allows registration of event listeners and describes event flow through a tree structure. Additionally, the specific
addEventListener の順番 - m2
(function(){ function a() {alert('a')} function b() {alert('b')} function c() {alert('c')} window.addEventListener('click', a, false); window.addEventListener('click', b, false); window.addEventListener('click', c, false); window.addEventListener('click', a, false); })() opera -> b, c, a; firefox -> a, b, c;
handleEvent、addEventListener - 素人がプログラミングを勉強していたブログ
addEventListenerの第二引数は、関数以外にも、handleEventをメソッドとして持ったオブジェクトも渡すことが出来る。 window.addEventListener("click", { handleEvent: function (e) { console.log(e); } }, false); また、この仕様を利用すると、 ({ run: function () { window.addEventListener("click", this, false); this.counter = 0; }, handleEvent: function () { this.counter++ if (this.counter < 3) alert(this.counter + "clicked!"); else this.destroy(); }, destroy: fun
amachangのブックマーク / 2007年5月19日 - はてなブックマーク
Firefox 1.5 uses in-memory caching for entire Web pages, including their JavaScript states, for a single browser session. Going backward and forward between visited pages requires no page loading and the JavaScript states are preserved. This feature, referred to by some as bfcache (for "Back-Forward Cache"), makes page navigation very fast. This caching state is preserved until the user closes the
Using Firefox 1.5 caching - Mozilla | MDN
Firefox 1.5 ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザーセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は bfcache（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザーがブラウザーを閉じるまで保存されます。 Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。 ページが unload ハンドラを使用している ページが "cache-control: no-store" をセットしている ページが "cache-co
Dean Edwards: The window.onload Problem – Solved!
Well, when I say solved I mean solved for the two most important browsers – Internet Explorer and Mozilla/Firefox. Still that’s good enough isn’t it? First, let me define the problem. The window.onload event is used by programmers to kick-start their web applications. This could be something trivial like animating a menu or something complex like initialising a mail application. The problem is tha
Collection & Copy - ドキュメントのロード完了に合わせて関数を実行する
JavaScriptページロード時にプログラムを実行するためにwindow.onloadやbody.onloadがしばしば使われる。しかし、ページ内に大きな画像が存在する場合などは、画像のロードを待つため、実行が遅れてしまう。「ドキュメントのロードが終わっていて、かつ、イメージのロードが完了する前」に関数を実行する方法のリンク2つの要点をコピー。 script要素defer、DOMContentLoadedイベントを利用する方法The window.onload Problem - Solved! Firefoxの場合非公式のイベントハンドラ、DOMContentLoadedを利用する。 // for Mozilla browsersif (document.addEventListener) { document.addEventListener("DOMContentLoaded",
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DOM Event の target
hogehoge - addEventListener の第三引数について