DOMイベント

javascript

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の操作系イベントは下記のメソッドとプロパティがあります。

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

メソッド
play()
pause()
pause()

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

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

メソッド
play()
pause()
pause()

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

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

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

その他のHTML5イベント

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

コメントを残す

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