javascript

DOMイベント

DOMイベント

DOMイベントはW3Cが仕様を策定しており、現在はLevel1からLevel4まで勧告されています。(※)


※・・・DOMとHTMLの仕様策定については、歴史的な背景があり、
W3C(World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム))という標準化団体がDOM level1、level2、level3を策定していましたが、
その団体とは別にWHATWG(Web Hypertext Application Technology Working Group)という関連技術の開発をするためのコミュニティがW3Cとは別な形でDOMとHTMLの仕様を策定していました。
2019年にW3CとWHATWGが合意し、新しくDOM Living Standard という形で仕様を策定しました。(今現在はこれが事実上の最新バージョンと言えます)

javascriptから操作できるイベントはDOMと密接な関係があり、Levelが増える毎に新しく使えるイベントが増えています(同時に廃止された仕様もあります)

また、各Levelごとに使えるイベントが増える代わりに、それまで書いていた命令より、
新しいLevelの書き方を推奨するケースがあります。

例えばforcusを書く代わりにforcusinにしたり、blurの代わりにforcusoutにするという具合です。
マウスホイールのイベントのwheelや、テキスト入力時のイベントtextinput等も新しく策定されたlevelの命令を書くように推奨されています

HTML5イベント

HTML5と関連するイベントも仕様追加されています。

audioの操作系イベントは下記のメソッドとプロパティがあります。

[js]
プロパティ
src
controls
volume
muted
defaultMuted
loop
currentTime
autoplay
ended

メソッド
play()
pause()
pause()
[/js]

videoの操作系イベントは下記のメソッドとプロパティがあります。

[js]
プロパティ
src
poster
width
height
controls
volume
muted
defaultMuted
loop
currentTime
autoplay
ended

メソッド
play()
pause()
pause()
[/js]

ドラッグ&ドロップもHTML5で追加されたAPIで、定義されているイベントは7つです。

[js]
dragstart // ドラッグ開始時
dragend // ドラッグ継続時
drag // ドロップ要素に入った時
dragenter // ドロップ要素から出た時
dragleave // ドロップ要素に重なっている時
dragover // ドラッグ終了時
drop // ドロップ時
[/js]

また、ドラッグ操作の際、データを「DataTransferオブジェクト」にセットしています。
このオブジェクト格納するプロパティとしてDataTransferプロパティがイベントオブジェクトとして定義されています。

その他のHTML5イベント

その他のHTML5イベントとしては
オフラインWebアプリケーション、WebStorage(クライアントサイドでjavascriptアプリケーション内の情報を保持する方法)、FileAPI等があります。
今後の投稿で実際に動作を試していきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です