<AI>
<h1>マウスで要素をクリックしてみよう</h1>
  <div class="box">ここ（div要素）をクリック</div>
  <button>ボタン要素をクリック</button>
  <p>段落（p要素）をクリック</p>

  <div id="result">ここに選んだ要素が表示されます</div>

  <script>
    // 画面全体（document）でクリックを監視する
    document.addEventListener("click", function(e) {
      const resultDiv = document.getElementById("result");
      
      // クリックされた要素のタグ名を取得する
      const tagName = e.target.tagName;
      
      // 結果を表示用のエリアに書き出す
      resultDiv.textContent = "選んだ要素: <" + tagName.toLowerCase() + ">";
    });
  </script>

</body>
</html>

ポイント
document.addEventListener("click", ...): 画面のどこをクリックしても反応するように設定します。
e.target: マウスで実際にクリックされた場所にあるHTML要素を指します。
e.target.tagName: クリックされた要素のタグ名（DIVやBUTTONなど）を取り出します。
文字やクラス名（e.target.className）に換えることもできます。