Element

Element は Document が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが Element を継承しています。

例えば HTMLElement インターフェイスは、HTML 要素の基本インターフェイスです。同様に、SVGElement インターフェイスはすべての SVG 要素の基本になっており、MathMLElement インターフェイスは MathML 要素の基本インターフェイスです。ほとんどの機能は、クラスの階層を下りると具体化していきます。

XUL の XULElement インターフェイスのようなウェブプラットフォームの枠外の言語もまた、Element インターフェイスを実装しています。

インスタンスプロパティ

Element は、親インターフェイスである Node、およびその親インターフェイスである EventTarget からプロパティを継承しています。

Element.assignedSlot 読取専用: このノードが挿入された <slot> を表す HTMLSlotElement を返します。
Element.attributes 読取専用: 対応する HTML 要素に関連したすべての属性のリストである NamedNodeMap を返します。
Element.childElementCount 読取専用: この要素の子要素の数を返します。
Element.children 読取専用: この要素の子要素を返します。
Element.classList 読取専用: class 属性のリストが入った DOMTokenList を返します。
Element.className: 文字列で、この要素のクラスを表します。
Element.clientHeight 読取専用: この要素の内部の高さを表す数値を返します。
Element.clientLeft 読取専用: この要素の左境界の幅を表す数値を返します。
Element.clientTop 読取専用: この要素の上境界の幅を表す数値を返します。
Element.clientWidth 読取専用: この要素の内部の幅を表す数値を返します。
Element.currentCSSZoom 読取専用 Experimental: 要素の実効ズームサイズを示す数値。要素がレンダリングされない場合は 1.0 です。
Element.elementTiming Experimental: PerformanceElementTiming API において要素を監視するためのマークとなる elementtiming 属性を反映した文字列です。
Element.firstElementChild 読取専用: この要素の最初の子要素を返します。
Element.id: 文字列で、この要素の id を表します。
Element.innerHTML: 文字列で、この要素の内容のマークアップを表します。
Element.lastElementChild 読取専用: この要素の最後の子要素を返します。
Element.localName 読取専用: 文字列で、この要素の修飾名のローカル部分を表します。
Element.namespaceURI 読取専用: この要素の名前空間の URI。名前空間がない場合は null になります。

メモ: Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで http://www.w3.org/1999/xhtml 名前空間内に存在します。
Element.nextElementSibling 読取専用: Element で、ツリー上で自身の直後の要素を表します。兄弟ノードがなければ null になります。
Element.outerHTML: 文字列で、その要素の内容を含むマークアップを表します。値が設定された場合、その文字列から解釈されたノードでその要素を置換します。
Element.part: 要素のパート識別子 (すなわち、 part 属性を使用して設定されるもの) が、 DOMTokenList として返されます。
Element.prefix 読取専用: 文字列で、要素の名前空間接頭辞を表します。接頭辞が指定されていない場合は null です。
Element.previousElementSibling 読取専用: Element で、ツリー上で自身の直前の要素を表します。兄弟ノードがなければ null です。
Element.scrollHeight 読取専用: この要素のスクロールビューの高さを表す数値を返します。
Element.scrollLeft: 数値型で、この要素の左スクロールオフセット値を表します。
Element.scrollLeftMax 非標準読取専用: この要素で可能な左スクロールオフセットの最大値を表す数値を返します。
Element.scrollTop: この要素の上端が垂直方向にスクロールされた量をピクセル数で表す数値です。
Element.scrollTopMax 非標準読取専用: 要素で可能な上スクロールオフセットの最大値を表す数値を返します。
Element.scrollWidth 読取専用: 要素のスクロールビュー幅を表す数値を返します。
Element.shadowRoot 読取専用: 要素が所持しているオープンモードのシャドウルート、あるいはオープンモードのシャドウルートがない場合は null を返します。
Element.slot: この要素が挿入されているシャドウ DOM スロットの名前を返します。
Element.tagName 読取専用: この要素のタグ名を文字列で返します。

ARIA から導入されたインスタンスプロパティ

Element インターフェイスには、以下のプロパティもあります。

Element.ariaAtomic: 文字列で、aria-atomic 属性を反映し、 aria-relevant 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。
Element.ariaAutoComplete: 文字列で、aria-autocomplete 属性を反映し、コンボボックス、検索ボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。
Element.ariaBrailleLabel: 文字列で、要素の点字ラベルを定義する aria-braillelabel 属性を反映します。
Element.ariaBrailleRoleDescription: 文字列で、要素の ARIA 点字ロール説明を定義する aria-brailleroledescription 属性を反映します。
Element.ariaBusy: 文字列で、aria-busy 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。
Element.ariaChecked: 文字列で、aria-checked 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。
Element.ariaColCount: 文字列で、aria-colcount 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。
Element.ariaColIndex: 文字列で、aria-colindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。
Element.ariaColIndexText Experimental: 文字列で、aria-colindextext 属性を反映します。これは aria-colindex の代替となる読み取り可能なテキストを定義します。
Element.ariaColSpan: 文字列で、aria-colspan 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。
Element.ariaCurrent: 文字列で、aria-current 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。
Element.ariaDescription: 文字列で、aria-description 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。
Element.ariaDisabled: 文字列で、aria-disabled 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。
Element.ariaExpanded: 文字列で、aria-expanded 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。
Element.ariaHasPopup: 文字列で、aria-haspopup 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。
Element.ariaHidden: 文字列で、aria-hidden 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。
Element.ariaKeyShortcuts: 文字列で、aria-keyshortcuts 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。
Element.ariaLabel: 文字列で、aria-label 属性を反映し、現在の要素をラベル付けする文字列値を定義します。
Element.ariaLevel: 文字列で、aria-level 属性を反映し、構造内の要素の階層レベルを定義します。
Element.ariaLive: 文字列で、aria-live 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。
Element.ariaModal: 文字列で、aria-modal 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。
Element.ariaMultiline: 文字列で、aria-multiline 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。
Element.ariaMultiSelectable: 文字列で、aria-multiselectable 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。
Element.ariaOrientation: 文字列で、aria-orientation 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。
Element.ariaPlaceholder: 文字列で、aria-placeholder 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。
Element.ariaPosInSet: 文字列で、aria-posinset 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。
Element.ariaPressed: 文字列で、aria-pressed 属性を反映し、トグルボタンの現在の「押された」状態を示します。
Element.ariaReadOnly: 文字列で、aria-readonly 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。
Element.ariaRelevant 非標準: 文字列で、aria-relevant 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザーエージェントがどのような通知を行うかを示します。これは、 aria-live リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。
Element.ariaRequired: 文字列で、aria-required 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。
Element.ariaRoleDescription: 文字列で、aria-roledescription 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。
Element.ariaRowCount: 文字列で、aria-rowcount 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。
Element.ariaRowIndex: 文字列で、aria-rowindex 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。
Element.ariaRowIndexText Experimental: 文字列で、aria-rowindextext 属性を反映し、aria-rowindex の代替となる人間に読み取り可能なテキストを定義します。
Element.ariaRowSpan: 文字列で、aria-rowspan 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。
Element.ariaSelected: 文字列で、aria-selected 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。
Element.ariaSetSize: 文字列で、aria-setsize 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。
Element.ariaSort: 文字列で、aria-sort 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。
Element.ariaValueMax: 文字列で、aria-valueMax 属性を反映し、 range ウィジェットの最大許容値を定義します。
Element.ariaValueMin: 文字列で、aria-valueMin 属性を反映し、 range ウィジェットに許容される最小値を定義します。
Element.ariaValueNow: 文字列で、aria-valueNow 属性を反映し、 range ウィジェットの現在の値を定義します。
Element.ariaValueText: 文字列で、aria-valuetext 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。

インスタンスメソッド

Element は親である Node、およびその親である EventTarget からメソッドを継承しています。

Element.after(): Node オブジェクトまたは文字列を、この Element の親の子ノードリストの中、 Element の直後に追加します。
Element.animate(): この要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
Element.append(): この要素の最後の子の後に、一連の Node オブジェクトまたは文字列を挿入します。
Element.attachShadow(): 指定した要素にシャドウ DOM ツリーを結びつけて、その ShadowRoot への参照を返します。
Element.before(): Node オブジェクトまたは文字列をこの Element の親の子ノードリストの中、 Element の直前に追加します。
Element.checkVisibility(): 構成可能な検査に基づいて、要素が可視になることが期待されているかどうかを返します。
Element.closest(): Element 型で、引数に指定したセレクターによって選択される要素がもっとも近い祖先要素（または当該要素自身）を返します。
Element.computedStyleMap(): StylePropertyMapReadOnly インターフェイスで、 CSSStyleDeclaration に代わる、CSS 宣言ブロックを読み取り専用で表現したものを返します。
Element.getAnimations(): 要素でアクティブな Animation オブジェクトの配列を返します。
Element.getAttribute(): 現在ノードから指定された名前付きの属性値を取得して文字列で返します。
Element.getAttributeNames(): 現在の要素の属性名の配列を返します。
Element.getAttributeNode(): 現在のノードから、指定された属性のノード表現を取得し、 Attr として返します。
Element.getAttributeNodeNS(): 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを Attr として返します。
Element.getAttributeNS(): 現在のノードから指定された名前と名前空間を持つ属性値を取得して、文字列で返します。
Element.getBoundingClientRect(): この要素のサイズと、ビューポートにおける位置を返します。
Element.getBoxQuads() Experimental: このノードの CSS フラグメントを表す DOMQuad オブジェクトのリストを返します。
Element.getClientRects(): クライアント領域内のテキストの各行の外接矩形 (bounding rectangle) の集合を返します。
Element.getElementsByClassName(): 生きた HTMLCollection で、現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を生きた HTMLCollection で、返します。
Element.getElementsByTagName(): 現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得して生きた HTMLCollection で返します。
Element.getElementsByTagNameNS(): 生きた HTMLCollection で、現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得して、生きた HTMLCollection で返します。
Element.hasAttribute(): 要素が指定された指定された属性を持っているか否かを示す論理値を返します。
Element.hasAttributeNS(): 要素が指定された名前空間内に指定された属性を持っているか否かを示す論理値を返します。
Element.hasAttributes(): 要素が現在 1 つ以上の属性をもっているかを示す論理値を返します。
Element.hasPointerCapture(): 呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。
Element.insertAdjacentElement(): メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。
Element.insertAdjacentHTML(): テキストを HTML または XML として解釈し、解釈結果のノードをツリーの指定した位置に挿入します。
Element.insertAdjacentText(): メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。
Element.matches(): 要素が指定されたセレクター文字列で選択されるか否かを示す論理値を返します。
Element.prepend(): この要素の最初の子の前に、一連の Node オブジェクトまたは文字列を挿入します。
Element.querySelector(): 要素に対して、指定したセレクターに一致する最初の Node を返します。
Element.querySelectorAll(): 要素に対して、指定したセレクターに一致するノードの NodeList を返します。
Element.releasePointerCapture(): 以前に特定のポインターイベント向けに設定したポインターキャプチャーを解放 (停止) します。
Element.remove(): 親要素の子リストから、要素を取り除きます。
Element.removeAttribute(): 現在ノードから，指定された名前を持つ属性を取り除きます。
Element.removeAttributeNode(): 現在のノードから名前の付いた属性のノード表現を取り除きます。
Element.removeAttributeNS(): 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
Element.replaceChildren(): Node の既存の子を指定された新しい一連の子に置き換えます。
Element.replaceWith(): 親の子リストの要素を、一連の Node オブジェクトまたは文字列で置き換えます。
Element.requestFullscreen(): 要素を全画面表示するよう、ブラウザーへ非同期的に要求します。
Element.requestPointerLock(): 指定した要素でポインターをロックするよう、非同期的に要求できます。
Element.scroll(): 指定された要素の中で特定の座標のセットへスクロールします。
Element.scrollBy(): 指定された量だけ要素をスクロールします。
Element.scrollIntoView(): 要素がビューの内側に来るまでページをスクロールします。
Element.scrollIntoViewIfNeeded() 非標準: 現在の要素がまだブラウザーウィンドウの可視領域内にない場合、ブラウザーウィンドウの可視領域内にスクロールさせます。標準の Element.scrollIntoView() を代わりに使用してください。
Element.scrollTo(): 指定された要素の中で特定の座標のセットへスクロールします。
Element.setAttribute(): 現在ノードに、指定された名前を持つ属性値を設定します。
Element.setAttributeNode(): 現在のノードから指定された属性のノード表現を設定します。
Element.setAttributeNodeNS(): 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。
Element.setAttributeNS(): 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
Element.setCapture() 非標準非推奨;: マウスイベントキャプチャーを設定し、すべてのマウスイベントをこの要素にリダイレクトします。
Element.setHTML() 安全なコンテキスト用非推奨;: HTML の文字列を構文解析し、無害化して文書フラグメントにし、DOM 内の要素の元サブツリーを置き換えます。
Element.setHTMLUnsafe(): HTML の文字列を無害化せずに構文解析して文書フラグメントに入れ、DOM 内の要素の元サブツリーを置き換えます。HTML 文字列は宣言的なシャドウルートを入れることができますが、Element.innerHTML を使用して HTML を設定した場合は、テンプレート要素として解釈されます。
Element.setPointerCapture(): 指定された要素を、以降のポインターイベントのキャプチャー対象として指定します。
Element.toggleAttribute(): 論理属性のオンオフを切り替えます。属性が存在していれば削除、属性が存在していなければ追加します。

イベント

これらのイベントを待ち受けするには、 addEventListener() を使用するか、イベントリスナーをこのインターフェイスの onイベント名 プロパティに代入するかしてください。

afterscriptexecute 非標準: スクリプトが実行されたときに発行されます。
beforematch Experimental: 見つかるまでの間は非表示状態にある要素で、ユーザーが「ページ内検索」機能やフラグメントナビゲーションによってコンテンツを見つけたため、ブラウザーがそのコンテンツを公開しようとしているときに発行されます。
beforescriptexecute 非標準: スクリプトが実行されそうになったときに発行されます。
contentvisibilityautostatechange: content-visibility: auto が設定されている要素がユーザーに関連する、コンテンツのスキップを開始または終了するときに、その要素を対象に発行されます。
scroll: 文書のビューまたは要素がスクロールしたときに発行されます。
scrollend: 文書ビューのスクロールが完全に終了したときに発行されます。
securitypolicyviolation: コンテンツセキュリティポリシーに違反したときに発生します。
wheel: ユーザーがポインティングデバイス（普通はマウス）のホイールボタンを回転させたときに発行されます。

アニメーションイベント

animationcancel: アニメーションが予期せず中断したときに発行されます。
animationend: アニメーションが完全に終了したときに発行されます。
animationiteration: アニメーションの反復処理が完全に完了したときに発行されます。
animationstart: アニメーションが始まるときに発行されます。

クリップボードイベント

copy: ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発行されます。
cut: ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発行されます。
paste: ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発行されます。

変換イベント

compositionend: インプットメソッドエディターのようなテキスト。変換システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。
compositionstart: インプットメソッドエディターのようなテキスト。変換システムで、新しい入力セッションを始まったときに発行されます。
compositionupdate: インプットメソッドエディターのようなテキスト。変換システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。

フォーカスイベント

blur: 要素がフォーカスを失ったときに発行されます。
focus: 要素がフォーカスを受け取ったときに発行されます。
focusin: 要素がフォーカスを受け取ったとき、focus の後に発行されます。
focusout: 要素がフォーカスを失ったとき、 blur の後に発行されます。

全画面イベント

fullscreenchange: 全画面モードへの移行時または終了時に、 Element に送られます。
fullscreenerror: 全画面モードへの移行または終了を試みている中でエラーが発生したときに、 Element に送られます。

キーボードイベント

keydown: キーが押されたときに発行されます。
keypress 非推奨;: 文字の値を発行させるキーが押されたときに発行されます。
keyup: キーが離されたときに発行されます。

マウスイベント

auxclick: ポインティングデバイスの第一ボタン以外のボタン（例えば、マウスの左ボタン以外のボタン）が要素上で押されて離されたときに発行されます。
click: ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で押されて離されたときに発行されます。
contextmenu: ユーザーがコンテキストメニューを開こうとしたときに発行されます。
dblclick: ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で 2 回クリックされたときに発行されます。
DOMActivate 非推奨;: 要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発行されます。
DOMMouseScroll 非推奨; 非標準: マウスホイールなどを操作し、前回のイベントから累積スクロール量が 1 行または 1 ページ以上経過した場合に発生します。
mousedown: ポインティングデバイスのボタンが要素上で押されたときに発行されます。
mouseenter: ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の上へ移動したときに発行されます。
mouseleave: ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の外へ移動したときに発行されます。
mousemove: ポインティングデバイス（ふつうはマウス）が、要素の上を移動したときに発行されます。
mouseout: ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発行されます。
mouseover: ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発行されます。
mouseup: ポインティングデバイスのボタンが要素の上で離されたときに発行されます。
mousewheel 非推奨; 非標準: マウスのホイールなどを操作すると発行されます。
MozMousePixelScroll 非推奨; 非標準: マウスのホイールなどを操作すると発行されます。
webkitmouseforcechanged 非標準: trackpadtouchscreen の上の圧力が変化するたびに発行されます。
webkitmouseforcedown 非標準: 「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発行されます。
webkitmouseforcewillbegin 非標準: mousedown イベントの前に発行されます。
webkitmouseforceup 非標準: 「強制クリック」が終了したといえるほど圧力が減少した直後の webkitmouseforcedown イベントの後で発行されます。

ポインターイベント

gotpointercapture: 要素が setPointerCapture() を使用してポインターをキャプチャしたときに発行されます。
lostpointercapture: ポインターキャプチャが解放されたときに発行されます。
pointercancel: ポインターイベントがキャンセルされたときに発行されます。
pointerdown: ポインターがアクティブになったときに発行されます。
pointerenter: ポインターが要素またはその子孫のヒットテスト境界内に移動されたときに発行されます。
pointerleave: ポインターが要素のヒットテスト境界から移動されたときに発行されます。
pointermove: ポインターの座標が変更されたときに発行されます。
pointerout: ポインターが（何らかの理由で）要素のヒットテスト境界の外に移動されたときに発行されます。
pointerover: ポインターが要素のヒットテスト境界内に移動されたときに発行されます。
pointerrawupdate Experimental: ポインターが pointerdown または pointerup イベントを発行しないプロパティを変更したときに発行されます。
pointerup: ポインターがアクティブでなくなったときに発行されます。

タッチイベント

gesturechange 非標準: タッチジェスチャー中に指が移動されたときに発行されます。
gestureend 非標準: タッチ面に複数の指が接触しなくなり、ジェスチャーが終わると発行されます。
gesturestart 非標準: 複数の指がタッチ面に連絡し、新しいジェスチャーを始める時に発行されます。
touchcancel: 1 つ以上のタッチ点が実装依存の理由により破棄された（例えば、タッチ点が多く作られすぎた）場合に発行されます。
touchend: 1 つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。
touchmove: 1 つ以上のタッチ点がタッチ面上で移動したときに発行されます。
touchstart: 1 つ以上のタッチ点がタッチ面に配置されたときに発行されます。

トランジションイベント

transitioncancel: Event で、CSS トランジションがキャンセルされたときに発行されます。
transitionend: Event で、CSS トランジションの再生が終了したときに発行されます。
transitionrun: Event で、CSS トランジションが作成されたとき（すなわち、実行する一連のトランジションが追加されたとき）に発行されます。開始されているとは限りません。
transitionstart: Event で、CSS トランジションのトランジションが開始したときに発行されます。

仕様書

Specification
DOM Standard # interface-element
Pointer Events # extensions-to-the-element-interface
Fullscreen API Standard # api
DOM Parsing and Serialization # extensions-to-the-element-interface
CSSOM View Module # extension-to-the-element-interface

ブラウザーの互換性

BCD tables only load in the browser