HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのviewイベントプロパティとは？使い方と実行例をわかりやすく解説

HTML の view イベントプロパティは、そのイベントが発生した Window オブジェクトへの参照（リファレンス）を返すプロパティです。通常のページでは現在のウィンドウ自身を指しますが、iframe や複数ウィンドウを扱う場面では「どのウィンドウでイベントが発生したのか」を判別するために役立ちます。

構文

view イベントプロパティの基本的な構文は次のとおりです。

event.view

サンプルコード

それでは、view イベントプロパティを使用した具体的な例を見ていきましょう。以下のコードでは、ボタンをクリックすると画面上にメッセージが表示され、同時に開発者ツールのコンソールへ Window オブジェクトが出力されます。

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
</style>
<body>
<h1>HTML view Event Property</h1>
<button class="btn" onclick="get()">Show view event</button>
<div class="show"></div>
<script>
   function get() {
      document.querySelector(".show").innerHTML = "Open your console and observe the Window object";
      console.log(event.view);
   }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

HTMLのviewイベントプロパティとは？使い方と実行例をわかりやすく解説

「Show view event」ボタンをクリックすると、Window オブジェクトを確認するためのメッセージが画面に表示されます。

HTMLのviewイベントプロパティとは？使い方と実行例をわかりやすく解説

続けて、開発者ツール（デベロッパーツール）のコンソールを開いてみましょう。クリックイベントが発生した Window オブジェクトの詳細情報を確認できます。

HTMLのviewイベントプロパティとは？使い方と実行例をわかりやすく解説

補足：view プロパティの活用ポイント

単一ページ内では event.view はほぼ常に window オブジェクトと同じものを指しますが、Selenium などのテスト自動化ツールや、別ウィンドウから発生したイベントの検知といった特殊な状況では、異なる Window オブジェクトが設定されることがあります。イベントの発生源となるウィンドウを厳密に特定したい場合に有用なプロパティです。

  1. HTML DOM TouchEventのtouchesプロパティとは？使い方とサンプルコードを解説

    TouchEvent touchesプロパティとはHTML DOMのTouchEventにおけるtouchesプロパティは、タッチ面（タッチスクリーンなど）上で発生したすべての接触ポイント（コンタクトポイント）のリストに対応するTouchListオブジェクトを返します。注意：指定されたノード、またはその子ノード上でタッチが発生した場合、その後に続くタッチ操作は、同じノード上で発生していなくてもカウント対象になります。構文TouchListオブジェクトを取得するための構文は以下の通りです。event.touches補足：本記事のタッチイベントのサンプルコードは、モバイル端末やタッチ操作対応デバイ

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種