GeckoのDOMイベント処理の実装 (Gecko Inside ver.)

中野雅之

•肩書き

•正式: Mozilla Japan 国際化担当マネージャ

•非公式: Mozilla Japan 大阪支部長

•大阪の自宅で、自宅警備しながら仕事してます

中野雅之

•色んなアカウント

•メールアドレス: [email protected]

• Skype: masayuki-nakano

• Twitter: @d_toybox

• Blog: 「もずはっく日記」で検索

mailto:[email protected]

https://twitter.com/d_toybox

http://www.d-toybox.com/studio/weblog/show.php

アジェンダ

•簡単な用語解説

• DOMイベントの基礎知識

• Geckoのイベント処理の実装

•イベントとe10s

簡単な用語解説

• D3E

• DOM Level 3 Events の略

• DOM Level 4 Events にあたる仕様案の名前だった、”UI

Events” に改名され、マージされた

• DOM Level 3 KeyboardEvent key Values

• KeyboardEvent.keyの値を定義した仕様

• 元々は D3E で定義されていたものの分割された

• DOM Level 3 KeyboardEvent code Values

• KeyboardEvent.codeの値を定義した仕様

• 元々は UI Events で定義されていたものが分割された

https://w3c.github.io/uievents/

https://w3c.github.io/DOM-Level-3-Events-key/

https://w3c.github.io/DOM-Level-3-Events-code/


• Edit Events

• UI Events からinputイベントとbeforeinputイベントを分離した仕様

• しかし、迷走中

• inputイベントとbeforeinputイベントはそれぞれ、editとbeforeeditイベントに改名され、従来のinputイベントとの後方互換性も無い


• PresShell

• “Presentation Shell”の略

• DOM document (window?)ひとつに対して、一つ生成される

• nsPresShell.cpp で PresShellとして実装され、nsIPresShell抽象クラスでインターフェースが定義されている

• ESM

• イベントの前処理や後処理、イベントによって変化するコンテンツの状態管理(:hover状態等)を管理している、EventStateManagerの略

• PresShellに生成され、破棄される


• PresContext

• “Presentation Context”の略

• PresShellに生成され、破棄される

• RefCountable ではないので、クラスのメンバとして保存する時は nsCOMPtr<nsIPresShell>を保存しておき、GetPresContext()で取得する方が安全


• dispatch、fire

•共にイベントを発火する意味で違いは無い

• default action

•イベントが発生した際にブラウザが行う動作、例えば、wheelイベントに対する、スクロールやズーム処理がwheelイベントのdefault action

• consumed

• Event.preventDefault()が呼び出され、default action

がキャンセルされている状態

DOM イベントの基礎

• フェイズと、プロパゲーション

• イベントを捕まえる

• イベントの伝播を抑制する

• ブラウザのイベント処理を妨害する

• Gecko独自のイベントグループ

capturing フェイズ

1. 最初はwindow

2. 次にdocument

3. rootからtargetの親

• targetの決定は、イベント依存

• フォーカス• 発生位置• ……等々

target フェイズ

• targetフェイズは、capturingフェイズの一部でもあり、bubblingフェイズの一部でもある。

• windowやdocumentがtargetの場合も

bubbling フェイズ

1. target の親からroot

2. 次にdocument

3. 最後にwindow

• Event.bubblesが falseの場合、bubblingは発生しない

イベントを捕まえる

• 書式:

• EventTarget.addEventListener(イベント名, ハンドラ, Capture?);

• EventTarget.removeEventListener(イベント名, ハンドラ, Capture?);

• イベント名: イベントの名前 "click" とか、 "keydown"

• ハンドラ: function foo(aEvent) { /* something */ }がお手軽で十分

• Capture?: trueなら、capturing フェイズと、target フェイズ、falseなら、target フェイズと、bubbling フェイズ


• 単純な例1:

• 全ての要素で発生するkeydownイベントを知りたい

• イベントターゲットより先に知りたい

• removeする必要はない

document.addEventListener("keydown",function (aEvent) { /* something */ },true);


• 単純な例2:

• 全ての要素で発生するkeydownイベントを知りたい

• イベントターゲットより後に知りたい

• removeする必要がある

function keydownHandler(aEvent) {/* something */

}

document.addEventListener("keydown", keydownHandler, false);

…

document.removeEventListener("keydown", keydownHandler, false);

イベントの伝播を抑制する

• 複数のイベントリスナを登録している場合、あるイベントハンドラで処理済みのイベントを他のイベントハンドラでは無視したい場合が考えられる

• Event.stopPropagation()か、Event.stopImmediatePropagation()を呼ぶと、それ以降のイベント発生を中止できる

• Event.stopPropagation()では、次のEventTarget以降でのイベントハンドラの実行を中止できる

• Event.stopImmediatePropagation()では、同じEventTargetに登録されている未処理のイベントハンドラも含めて、イベントハンドラの実行を中止できる

ブラウザのイベント処理を妨害する

• ブラウザにdefault actionを実行してもらいたくない場合が考えられる

• Event.preventDefault()を呼び出すと、Event.defaultPrevented属性値がtrueになる

• defaultPrevented属性がtrueなら、ブラウザはdefault action

を実行しない(ただし、タブの切替等、セキュリティ上、無視することはある)

• Webアプリは Event.defaultPreventedの値を、処理前に確認することで、Event.stopPropagation()の代用としても使える

Gecko独自のイベントグループ

• GeckoはDOMイベントを捕まえることでデフォルトアクションを実装することがある

• WebコンテンツがEvent.stopPropagation()を呼び出したものの、Event.peventDefault()を呼び出していない場合にdefault

actionを実行する必要がある

• Webコンテンツと同じ様にイベントリスナを登録していると、Event.stopPropagation()の呼び出しだけでdefault actionの実行が抑制されてしまう

• 実はこのバグは多く、私自身も発見しては修正している


• GeckoはWebコンテンツの登録するイベントリスナをdefault

event groupに登録する

• Gecko内部や、UIはイベントリスナをSystem Event Groupに登録する(べき)

• 最初にdefault event groupに登録されたリスナが実行され、その後、system event groupに登録されたリスナが実行される、つまり……


1. default event groupのcapturing phase

2. default event groupのtarget

3. default event groupのbubbling phase

4. system event groupのcapturing phase

5. system event groupのtarget

6. system event groupのbubbling phase

という順序で実行される


• Event.stopPropagation()やEvent.stopImmediatePropagation()は各event group内での伝播を止めるのみ

• default event groupで呼び出していても、system event

groupでの実行は保証されている

• system event group内で呼び出した場合にはdefault event

groupと同様にそれ以降のイベントリスナは呼び出されないのでsystem event groupに登録しているイベントリスナ全てが実行を保証されている訳ではない

Geckoのイベント処理の実装

• OSネイティブなイベントをDOMイベントとしてWebアプリに通知するケースを解説

•図にすると、次のように……

Geckoのイベント処理の実装nsDocument

PresShell

widget EventDispatcher

EventStateManager

Widget*Eventdom::*Event

PreHandleEvent() PostHandleEvent()

Dispatch()

CreateEvent()

2

3

4

5

6

EventTargetChainItem

nsINode

EventListenerManager

HandleEvent() handler2handler1

nsINode



7

810

1

9


• イベントターゲットで、最初にイベントリスナが登録された時に、インスタンスが生成され、そのノードに保存される

• そのノードに登録された全てのイベントリスナを管理する

• HandleEvent()が呼び出されると、イベントの名前とフェーズ、イベントリスナのグループがマッチするものを探し、マッチした場合に登録されているハンドラを実行する

• stopImmediatePropagation()が呼び出されたら、中断する