SlideShare a Scribd company logo
Submit Search
Upload
Login
Signup
DOMイベントの基礎から深淵まで
Report
Masayuki Nakano
Follow
Software Engineer at 株式会社Birchill
Mar. 22, 2013
•
0 likes
•
8,556 views
1
of
50
DOMイベントの基礎から深淵まで
Mar. 22, 2013
•
0 likes
•
8,556 views
Download Now
Download to read offline
Report
Technology
DOMイベントの基礎から、細かい情報まで、最新のDOMイベントの仕様策定状況も含めて、解説しています。
Masayuki Nakano
Follow
Software Engineer at 株式会社Birchill
Recommended
Ajax 応用
Katsuyuki Seino
5.9K views
•
464 slides
Android Lecture #03 @PRO&BSC Inc.
Yuki Higuchi
664 views
•
16 slides
Boost9 session
freedom404
1.8K views
•
36 slides
goog.ui.Component のはぐれかた
Soichi Takamura
4.5K views
•
100 slides
OSC京都2011
haganemetal
2.5K views
•
66 slides
introduction to Marionette.js (jscafe14)
Ryuma Tsukano
28.4K views
•
52 slides
More Related Content
What's hot
Objective-C が好きになる Tips & Hack
Taketo Sano
38.6K views
•
55 slides
WebGL and Three.js
yomotsu
43K views
•
183 slides
Client Side Cache
Toru Yamaguchi
1.2K views
•
29 slides
Weeyble async 181009_tukky
shotaueda3
266 views
•
24 slides
ARコンテンツ作成勉強会:Myoを用いたVRコンテンツ開発
Takashi Yoshinaga
1.9K views
•
82 slides
㉕cocos2dを覚えよう!初級編③
Nishida Kansuke
5.3K views
•
78 slides
What's hot
(19)
Objective-C が好きになる Tips & Hack
Taketo Sano
•
38.6K views
WebGL and Three.js
yomotsu
•
43K views
Client Side Cache
Toru Yamaguchi
•
1.2K views
Weeyble async 181009_tukky
shotaueda3
•
266 views
ARコンテンツ作成勉強会:Myoを用いたVRコンテンツ開発
Takashi Yoshinaga
•
1.9K views
㉕cocos2dを覚えよう!初級編③
Nishida Kansuke
•
5.3K views
Arctic.js
chikathreesix
•
1.8K views
Unityクリエイターズ勉強会【2/2】【関西】発表資料
Masataka Motokurumada
•
2.4K views
大(中)規模Java script開発について
Yuki Tanaka
•
3.9K views
Html canvas shooting_and_performanceup
Yohei Munesada
•
14.9K views
shared_ptr & weak_ptr (ppt 初版, DL 専用)
Cryolite
•
1.4K views
ARコンテンツ作成勉強会:C#ではじめようOpenCV(カラートラッキング編)
Takashi Yoshinaga
•
13.4K views
Ecmascript2015とその周辺について
豊明 尾古
•
3.3K views
㉖cocos2dを覚えよう!
Nishida Kansuke
•
3.8K views
㉔cocos2dでゲームを作ろう!その2
Nishida Kansuke
•
4.6K views
Javascripでオブジェクト指向
1000 VICKY
•
713 views
Androidプログラミング初心者のためのゲームアプリ開発入門
Masahiko Mizuta
•
43.2K views
函館IKA ICS開発情報
Masahiro Wakame
•
2K views
Canvas de shooting 制作のポイント
Yohei Munesada
•
6.8K views
Similar to DOMイベントの基礎から深淵まで
GeckoのDOMイベント処理の実装
Masayuki Nakano
6.9K views
•
65 slides
GeckoのDOMイベント処理の実装 (Gecko Inside ver.)
Masayuki Nakano
2K views
•
64 slides
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
15.4K views
•
78 slides
JavaFXでマルチタッチプログラミング
Takashi Aoe
7.5K views
•
21 slides
EventSystemまわりの話@UnityFukuoka07
Keizo Nagamine
26.6K views
•
46 slides
wxPython入門(大阪Pythonユーザの集まり2014/03)
泰 増田
10.6K views
•
29 slides
Similar to DOMイベントの基礎から深淵まで
(20)
GeckoのDOMイベント処理の実装
Masayuki Nakano
•
6.9K views
GeckoのDOMイベント処理の実装 (Gecko Inside ver.)
Masayuki Nakano
•
2K views
イベント駆動プログラミングとI/O多重化
Gosuke Miyashita
•
15.4K views
JavaFXでマルチタッチプログラミング
Takashi Aoe
•
7.5K views
EventSystemまわりの話@UnityFukuoka07
Keizo Nagamine
•
26.6K views
wxPython入門(大阪Pythonユーザの集まり2014/03)
泰 増田
•
10.6K views
Windows スクリプトセミナー WMI編 VBScript&WMI
junichi anno
•
5.8K views
Titanium勉強会
洋平 前田
•
2.9K views
2時間で学ぶjQuery
Shumpei Shiraishi
•
7.5K views
HTML5&API総まくり
Shumpei Shiraishi
•
10.1K views
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
•
537 views
enchant.js勉強会
Hiroaki Murayama
•
3.1K views
Miyazaki.js vol.2
Takami Kazuya
•
1.2K views
QML を用いた YouTube クライアントの作成 - 関東 Qt 勉強会
Jumpei Ogawa
•
2.4K views
Sencha study
Shinsuke Sugita
•
3.5K views
Flight入門
Toshihiro Yagi
•
2K views
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
•
11.8K views
T90 きっと怖くないmvvm & mvpvm
伸男 伊藤
•
8.2K views
Tokyo GTUG Bootcamp2010
Takashi EGAWA
•
764 views
Acme minechan
takesako
•
5.4K views
Recently uploaded
インフラチームとCCoEの関係.pptx
ssuser5c7ee4
28 views
•
18 slides
CCoE実践者コミュニティ#1_CCoEが進めるセキュリティカイゼンの旅.pptx
Tomoaki Tada
69 views
•
20 slides
20230921_IoTLT_vol103_kitazaki_v1.pdf
Ayachika Kitazaki
170 views
•
16 slides
GraphQLはどんな時に使うか
Yutaka Tachibana
17 views
•
37 slides
拡散する画像生成.pdf
NTTDOCOMO-ServiceInnovation
45 views
•
38 slides
ヒアラブルデバイスにおける音漏れ信号を用いた空中ジェスチャ認識
sugiuralab
6 views
•
1 slide
Recently uploaded
(13)
インフラチームとCCoEの関係.pptx
ssuser5c7ee4
•
28 views
CCoE実践者コミュニティ#1_CCoEが進めるセキュリティカイゼンの旅.pptx
Tomoaki Tada
•
69 views
20230921_IoTLT_vol103_kitazaki_v1.pdf
Ayachika Kitazaki
•
170 views
GraphQLはどんな時に使うか
Yutaka Tachibana
•
17 views
拡散する画像生成.pdf
NTTDOCOMO-ServiceInnovation
•
45 views
ヒアラブルデバイスにおける音漏れ信号を用いた空中ジェスチャ認識
sugiuralab
•
6 views
磁石内臓イヤリングによる磁力変化を利用したジェスチャ識別
sugiuralab
•
7 views
遠隔お酌IoTLT2309.pptx
Yoshiaki Ito
•
149 views
遠征ドルヲタのための便利サイトを作ってみた
Kenta Fujimoto
•
11 views
CatBoost on GPU のひみつ
Takuji Tahara
•
780 views
画像生成AIの問題点
iPride Co., Ltd.
•
13 views
MLOps Course Slides_JP(配布用).pdf
Yuya Yamamoto
•
125 views
2023情報処理学会関西支部大会-G12.pdf
KoseiShimoda1
•
7 views
DOMイベントの基礎から深淵まで
2.
Text DOMイベントの基礎から深淵まで
3.
中野雅之 • 肩書き • 正式:
Mozilla Japan 国際化担当マネージャ • 半公式: Mozilla Japan ジョギング部大阪支部長 • 非公式: Mozilla Japan 大阪支部長 • 大阪の自宅で、自宅警備しながら仕事してます
4.
中野雅之 • 色んなアカウント • メールアドレス:
masayuki@d-toybox.com • Skype: masayuki-nakano • Twitter: @d_toybox • Facebook: masayuki.nakano.560 • Blog: 「もずはっく日記」で検索
5.
アジェンダ • DOM
イベントの仕様って? • DOM イベント処理の基礎 • DOM Level 4でのイベント生成 • 各入力イベントのふかーーーーーーいお話
6.
DOM イベントの仕様 • HTMLの特定の要素・状況で起きるようなイベント •
HTML5仕様書の各要素のページにあります • これは今日は扱いません
7.
DOM イベントの仕様 •
ユーザの入力や、他の仕様に左右されないイベント • Document Object Model (DOM) Level 2 Events Specification • W3C Recommendation 13 November, 2000 • Document Object Model (DOM) Level 3 Events Specification • W3C Editor's Draft 04 September 2012 • DOM4 Events • Unofficial Draft
8.
DOM イベント処理の基礎 • フェイズと、プロパゲーション •
addEventListener()と、removeEventListener() • 複数のイベントリスナ • stopPropagation()と、preventDefault() • trustedイベントと、untrustedイベント • init*Event() • event constructor
9.
フェイズとプロパゲーション • DOM
イベントには4つの状態がある フェイズ: イベントが、イベントターゲットに向け • Capture てルートから順に発生していく状態 フェイズ: イベントが、イベントターゲット上で発 • Target 生している瞬間 フェイズ: イベントが、イベントターゲットで発生 • Bubble した後、ルート要素まで順に遡ってイベントが再度発生 していく状態 • 状態無し: イベントをDispatchする前の状態や、ハンド ラで捕まえたイベントを変数に保存している状態
10.
Capture フェイズ
11.
Target フェイズ
12.
Bubble フェイズ
13.
addEventLister()と removeEventListener()
属性でもイベントはハンドリングできるけど、 • on* addEventListener()とremoveEventListener()の利用推 奨 • 一つのイベントターゲットに対して、複数のハンドラを登 録できる • Capture フェイズのイベントも捕まえられる • コードが、なんとなくカッコイイ。
14.
addEventLister()と removeEventListener() •
書式: • EventTarget.addEventListener( イベント名, ハンドラ, Capture?); • EventTarget.removeEventListener( イベント名, ハンドラ, Capture?); • イベント名: イベントの名前 "click" とか、 "keydown" • ハンドラ: function foo(aEvent) { /* something */ } がお手軽で十分 • Capture?: true なら、Capture フェイズと、Target フェイズ、false なら、Target フェイズと、Bubble フェイズ
15.
addEventLister()と removeEventListener() •
単純な例1: • 全ての要素で発生するkeydownイベントを知りたい • イベントターゲットより先に知りたい • removeする必要はない document.addEventListener("keydown", function (aEvent) { /* something */ }, true);
16.
addEventLister()と removeEventListener() •
単純な例2: • 全ての要素で発生するkeydownイベントを知りたい • イベントターゲットより後に知りたい • removeする必要がある function keydownHandler(aEvent) { /* something */ } document.addEventListener("keydown", keydownHandler, false); … document.removeEventListener("keydown", keydownHandler, false);
17.
複数のイベントリスナ • 一つのイベントターゲットに、複数のリスナを登録しちゃう とどうなる?
18.
複数のイベントリスナ • 先にaddEventListener()を利用して登録されたものが優 先される。 • もずはっく日記の実例でテストすると以下の結果に •
親要素のcaptureフェイズに最初に登録されたハンドラ • 親要素のcaptureフェイズに二番目に登録されたハンドラ • イベントターゲットのbubbleフェイズに最初に登録されたハンドラ (captureへの登録よ りも前) • イベントターゲットのbubbleフェイズに二番目に登録されたハンドラ (captureへの登録 よりも前) • イベントターゲットのcaptureフェイズに最初に登録されたハンドラ • イベントターゲットのcaptureフェイズに二番目に登録されたハンドラ • イベントターゲットのbubbleフェイズに三番目に登録されたハンドラ (captureへの登録 より後) • イベントターゲットのbubbleフェイズに四番目に登録されたハンドラ (captureへの登録 より後) • 親要素のbubbleフェイズに最初に登録されたハンドラ • 親要素のbubbleフェイズに二番目に登録されたハンドラ
19.
stopPropagation()と、preventDefault() • 複数のイベントリスナを、複数のイベントターゲットに登 録して処理していると、特定のハンドリングを行った後、 そのイベントを他のハンドラに処理されたくない場合が考 えられる • stopPropagation()と、stopImmediatePropagation()を
呼ぶと、それ以降のイベント発生を中止できる • stopPropagation()では、次のEventTargetから、発生 を抑制できる • stopImmediatePropagation()では、同じEventTarget に登録されている他の未処理のイベントハンドラの呼び 出しも抑制できる
20.
stopPropagation()と、preventDefault() • 特定のイベントを処理した後、ブラウザにデフォルトの 動作(default
action)を実行してもらいたいくない場合が 考えられる • preventDefault()を呼ぶことで、そのデフォルトの動作 を抑制できる(ただし、a11y上、ブラウザが無視するこ とはある) • preventDefault()を呼び出すと、defaultPrevented属 性値がtrueになる
21.
stopPropagation()と、preventDefault() • A要素と、B要素があり、BはAの子孫で、共にbubble
フェイズでイベントリスナが登録されている場合に、B のリスナが、Aのリスナに処理をして欲しくないと考え た場合、どうするのが適切か? • stopPropagation()を呼ぶのがお手軽。A以外にイベ ントリスナが登録されても、その動作もメンテナ無し に抑制できる • preventDefault()を呼び、Aのハンドラで defaultPreventedをチェックするのが理想的。ただし、 全ハンドラでdefaultPreventedを丁寧にチェックする 必要があるのでバグは産みやすいかも
22.
trustedイベントと、untrustedイベント
イベントとは、ユーザの入力や、要素の状態の • trusted 変化等で、自然に発生したイベントのこと。isTrusted属 性がtrue。preventDefault()を呼ばない限り、ブラウザの デフォルトアクションが必ず発生する イベントとは、Webアプリケーションが、 • untrusted document.createEvent()で作り出した、人工的なイベン ト。isTrusted属性はfalse。セキュリティ等の問題から、 trusted イベントでは発生する、ブラウザのデフォルトアク ションの発生は期待できない。発生するかは実装依存
23.
init*Event() • イベントを作って、それを特定の要素をターゲットに発生 させるには? var myEvent
= document.createEvent("MouseEvents"); /* ここで myEvent を初期化 */ document.getElementById("foo") .dispatchEvent(myEvent); •初期化にcreateEventで指定したイベントに適した、 init*Event()を利用するのが従来の方法。
24.
init*Event() interface Event {
void initEvent(DOMString typeArg, boolean canBubbleArg, boolean cancelableArg); }; interface UIEvent { void initUIEvent(DOMString typeArg, boolean canBubbleArg, boolean cancelableArg, AbstractView viewArg, long detailArg); };
25.
init*Event() interface MouseEvent {
void initMouseEvent(DOMString typeArg, boolean canBubbleArg, boolean cancelableArg, AbstractView viewArg, long detailArg, long screenXArg, long screenYArg, long clientXArg, long clientYArg, boolean ctrlKeyArg, boolean altKeyArg, boolean shiftKeyArg, boolean metaKeyArg, unsigned short buttonArg, EventTarget relatedTargetArg); };
26.
init*Event() • はい、もう無茶苦茶感が出てきましたね。他のインタ ーフェース紹介をやめて、 MouseEvent.initMouseEvent()の実例を見てみましょう。 myEvent.initMouseEvent("click", true,
true, null, 1, 300, 450, 200, 250, true, false, false false, 1, null); • 分かるかボケー、と思った方の感覚が普通です!
27.
event constructor
4 Events では、event constructorという初期化方 • DOM 法が提案されていて、実際、Geckoでは一部イベントで すでに利用可能 • JSON形式の初期化方法で、イベントが定義する、デフ ォルト値と違う属性だけを初期化すれば済む var myEvent = new MouseEvent("click", { bubbles: true, cancelable: true, detail: 1, button: 1, screenX: 300, screenY: 450, clientX: 200, clientY: 250, ctrlKey: true });
28.
DOM イベントマニアックス! • ここまで、言うても、基礎でしたので、暇してた方にはここ から本番です。ユーザ入力系のDOM
イベントを実際に 実装してる人間だからこそな内容をいってみましょう。
29.
Synthesized mousemove イベント •
Synthesized mousemove イベントとは? • 正式に仕様書等に出てくる用語ではなく、Geckoのソースコー ドから名付けました • 名前の通り、カーソルの動きに関係無く、生成された mousemove イベント • マウスカーソルがドキュメントの上に有る状態で、スクロール した後に、新しい要素の上で発生するmousemoveイベント • WebKitと、Operaで発生。Geckoは内部イベントとしては存在 するものの、Webアプリからは検知できず • WebKit、Opera共にモディファイアキーの状態は不適切なので 要注意
30.
"mouseenter", "mouseleave" • "mouseover"や、"mouseout"とは違い、あくまでも、そのイ ベントターゲットからカーソルが外へ出た場合に "mouseleave"イベントが、中へ入った場合に"mousenter" イベントが発生する •
つまり、マウスを動かす度に、要素の境界を移動したかど うか、大量の確認が必要になる • Webアプリの負荷増大に繋がるので、Geckoではこれら のイベントリスナが登録された場合にのみ、確認処理が 行われる • 同時に複数の要素から出た場合、"mouseleave"は子孫か ら、"mouseenter"は祖先から順に発生する
31.
"mouseenter", "mouseleave" Geckoでは、私がレビューしました
32.
マウスホイールのイベント • マウスホイールのイベント、実にカオスなのはご存知で すか? • どのぐらいカオスかというと、天下のGoogle様も、きちん とGeckoの独自イベントは理解できてなくて、処理に失 敗しています。 •
各ブラウザが独自案で実装した結果、メチャクチャでした が、D3Eでめでたく、WheelEventインターフェースが定 義され、"wheel"イベントとしてイベントが発生するように なりました。
33.
レガシーマウスホイールイベント •
"mousewheel" イベント • Gecko以外のエンジンでは採用されているレガシーイベント。 • wheelDelta 属性にスクロールの値が入っているものの、その 値については厳密な定義は見当たらず • Windows版、IEとChromeは、ネイティブイベントのデルタ値を 単純に設定してる模様 • Windows版、Operaは、1行スクロールするにあたり、40を設 定する模様 • Mac等では未調査 • WebKit以外では縦方向のホイールイベントしか発生しない • とにかく、定義不明で使いにくいのが問題
34.
レガシーマウイホイールイベント • "DOMMouseScroll"
イベント • Geckoのみが実装 • detail属性値が、スクロールする行数 • 高解像度スクロールが後にWindowsとMacで採用され てしまったため、これをpreventDefault()するだけでは、 スクロールを完全に抑制することができなくなっている
35.
レガシーマウイホイールイベント • "MozMousePixelScroll"
イベント • Geckoのみが実装 • detail属性値が、スクロールするピクセル数 • Geckoで、スクロールを完全に抑制するにはこちらのイ ベントでpreventDefault()を呼ばないと、1行未満のスク ロールがすり抜けてしまう。
36.
D3E "wheel" イベント
では、WheelEvent インターフェースの、"wheel" イベ • D3E ントが定義された • 現在、IEとGeckoが実装済み • 斜め方向へのスクロールも一つのイベントで表現できるよ うになった(ただし、ネイティブイベントの制約上、Macのみ) • deltaX、deltaY、deltaZがそれぞれの軸にそったスクロー ル量で、longではなく、double • deltaModeで、deltaX、deltaY、deltaZのスクロール量が、 ページ単位、行単位、ピクセル単位のどれであるかを表現
37.
D3E "wheel" イベント •
残念ながらWebKitでは実装が行われていない • Operaでも実装されていない • Geckoの場合、delta値が実際にデフォルトアクションでス クロールする量と必ずしも一致しない(あくまで、Webアプリ ケーションに対する、スクロールして欲しい量の目安と考え て) • Geckoの場合、ユーザ設定でスクロール量を増やすと、 delta値も増えるので、ゲームの主要な入力要素としては 使えない
38.
D3E "wheel" イベント
Geckoでは、私が実装しました
39.
MouseEvent.buttons • D3Eで追加された新しい属性 • GeckoとIEが対応。残念ながらWebKitはまだ。 •
ビットフラグで、そのマウスイベント発生時に押されてい たボタン全てのフラグが入っている • 1=左ボタン、2=右ボタン、4=中ボタン(ホイール)、8=4 番目のボタン、一般的には戻るボタン、16=5番目のボ タン、一般的には進むボタン • 実際にボタンを押していても、Windowsでは、マウスユ ーティリティの設定によっては、検知できない
40.
MouseEvent.buttons Geckoでは、私が実装しました!
41.
getModifierState() •
D3Eで、MouseEventと、KeyboardEvent、WheelEventに定義されて いるメソッド • IEとGeckoが対応。WebKitはまだ? • パラメータにモディファイアキー名を入力する • そのイベント生成時に押されていれば、true、押されていなければfalse • モディファイアキー名は、"Shift"、"Control"、"Alt"、"Meta"、"AltGraph"、 "CapsLock"、"NumLock"、"ScrollLock"、"SymbolLock"、"Fn"、"OS" • IEでは、"ScrollLock"の代わりに、"Scroll"、"OS"の代わりに、"Win"が 使われている • IEでは、MouseEventと、KeyboardEventで検出できるモディファイア キーの状態に差がある
42.
getModifierState()
Geckoでは、 私が実装しました!!
43.
CompositionEvent •
IMEの未確定文字列入力時、確定時に発生するイベント • "compositionstart" 入力開始。data属性値は未確定文字列で 置換される文字列 • "compositionupdate" 未確定文字列が変更された場合に発生。 data値は最新の未確定文字列 • "compositionend" 確定。data値は確定された文字列 • 仕様上は"compositionupdate"のdata値のみを監視すると、未 確定文字列が分かるはずだが、WebKitは"compositionstart"の data値が最初の未確定文字列の値なので、面倒なことになって いる • "compositionupdate"の発生タイミングは、IEはエディタの内容 が更新された後、GeckoとWebKitは更新される前。input要素や、 textarea要素のvalue値に注意
44.
CompositionEvent
Geckoでは、 私が実装しました!!!
45.
KeyboardEvent.key and .char •
KeyboardEvent、実は標準化されるのは、D3Eが初めて(予定) • .keyCodeはブラウザ依存の値を持っていて、今更統一、国際化 対応が困難 • .charCodeは入力された文字のUnicodeのcode pointが入って いるものの、使いづらい • これらを解決するために、 .keyと .charが新たに提案された • どちらの値もDOMStringになっていて、扱い易くなっている • IEが既に実装していて、その内容がほぼそのままドラフトに掲載 されている
46.
KeyboardEvent.key and .char •
文字入力用ではないキーでは、.charはおおむね、空文 字列(例外あり)、 .keyは、仕様で定義済みのキーの名 前か、UAが命名できる場合はそれでも良い • 後者の仕様はWebデザイナが地獄を見ることになるの で大問題 • 必要なのに定義済みキー名に無いものは、多々、W3C のbugzillaへ登録しまくっている最中
47.
KeyboardEvent.key and .char •
文字入力用のキーでは、.charは、文字が入力される場 合の文字列、 .keyは、.charと同じ値 • .keyと .charが同じ値なら意味がない • .charが、実際に文字が入力されない場合にも入ってい るのでは、Webアプリが独自のテキストエディタを作り にくい
48.
KeyboardEvent.key and .char •
現在、Mozillaから提案している(予定含む)改善案 • .keyの定義済みキー名を増やす • 未定義の .key名を利用する場合はprefixをつけるべき • .keyの動作はそのままに、.charは実際にそのイベント でテキストエディタで入力される値にする • 例えば、Ctrl+Cだと、.key = "c"、.char=""
49.
KeyboardEvent.key and .char
Geckoでは、 私が実装 がんばってます、 なう!!!!
50.
Text Q&A?