uga.dev - A Front-end Engineer's shed

DOM Event Playground

このページのいろんなイベントを受け取るフォーカス・スクロール可能なform要素内のUIを操作すると、JavaScriptがどのようなイベントを受け取るのかを確認できます。

イベントハンドラを持っている要素はform要素のみですが、一部のイベントによってはバブリングしないため直接イベントを受け取る要素にハンドラを登録しています。

このページで採用されているイベント一覧です。一部非標準、非推奨も含まれています。

form要素には以下のイベントに関するハンドラを登録しています。

    input要素には以下のイベントに関するハンドラを登録しています。

    • invalid
    • search
    • select
    • selectionchange

    video要素には以下のイベントに関するハンドラを登録しています。

    • abort
    • canplay
    • canplaythrough
    • durationchange
    • emptied
    • encrypted
    • ended
    • error
    • loadeddata
    • loadedmetadata
    • loadstart
    • pause
    • play
    • playing
    • progress
    • ratechange
    • seeked
    • seeking
    • stalled
    • suspend
    • timeupdate
    • volumechange
    • waiting

    ここに入力された値はどこにも送信されません。

    タッチイベントを無視するp要素

    ファイルのドラッグ&ドロップも可能です。

    ラジオボタン
    チェックボタン

    ミュートされた音声ありのサンプル動画(2.86秒)

    ログ(最大300行)

    最後の作業から1秒経過すると、次の操作時にタイムスタンプの行が挿入されます。

    イベントを受け取った要素名、イベント名、一部補足情報が出力されます。

    † YOUR COOKIE PREFERENCES †

    当サイトは、管理人が個人の趣味として制作・公開している二次創作を扱ったサイトです。

    • 当サイトの画像および内容などの無断転載、加工使用、再配布、直リンクなどは禁止です。
    • 表示がおかしい場合はIE6.0以上、800×600以上の環境でご覧ください。
    • この先、BGMが自動再生されます。音量にご注意ください。

    uga.dev

    推奨環境:Windows XP IE6.0↑/フォントサイズ:中↑/解像度:1024x768↑

    なお、ここまでの内容はすべてです。

    当サイトでは Google社が提供するアクセス解析ツール「Google Analytics」を利用しています。

    Cookieの利用に同意していただける場合はEnterからご入場ください。

    もっと詳しく

    「Google Analytics」は利用状況の把握およびサービス改善のためにCookieを使用して、利用者のウェブサイト訪問履歴などの情報を収集しています。

    収集されたデータは匿名で集計されており、個人を特定する情報は含まれません。

    「同意しない」を選択すると、Cookieを利用せずに当サイトが閲覧できます。

    同意後もプライバシーポリシーページから再度拒否することができます。

    詳細はGoogleのプライバシーポリシーおよびオプトアウト方法をご確認ください。