JavaScript　変数event,idについて

変数eventはEventオブジェクトのことでしょうか？
eventは何かのプロパティでしょうか？
eventはイベントが起こると自動的に発生するのでしょうか？
専門書によってはeventを「ev」または「e」と記述している場合があります。

　ですが、サンプルコードのeventをevに変えてみた所、意図した通りには作動してくれませんでした。
なぜでしょか？
5. 変数idはHTML要素の属性を表しているのでしょうか？
「id = event.dataTransfer.getData("text");」は
「let id = event.dataTransfer.getData("text");」のように変数宣言すべきだと思っていましたが、
私の考えは完全に見当違いだったのでしょうか？

<!-- HTML5プロフェッショナル認定試験レベル２対策テキスト　サンプルコード -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ドラッグ＆ドロップのサンプル</title>
<script>
  function dragHandler(event) {

    //動作結果表示用のオブジェクトを取得
    let pElm = document.getElementById("disp");

    //ドラッグするデータの識別子をDataTransferオブジェクトにセット
    event.dataTransfer.setData("text", "COIN");

    //動作結果を表示
    pElm .innerHTML = "dragged !";
  }

  function dropHandler(event) {

    //動作結果表示用のオブジェクトを取得
    let pElm = document.getElementById("disp");

    //ドロップされたデータの識別子("COIN")を取得
    id = event.dataTransfer.getData("text");

    //動作結果表示
    pElm.innerHTML = id + " dropped !";

    //イベントをキャンセル
    event.preventDefault();
  }
</script>
</head>
<body>
  <!-- ドラッグ元のフォームにドラッグに対する処理を定義 -->
  <div id="from" draggable="true" ondragstart="dragHandler(event);">
    <p>【COIN】</p>
  </div>
  <p>
  <!-- ドラッグ先のフォームにドラッグに対する処理を定義 -->
  <div id="to" ondragover="event.preventDefault();" ondrop="dropHandler(event);">
    <p>■BOX■</p>
  </div>
  <p id="disp">status</p>
</body>
</html>

行動規範の内容に同意します

回答3件

html要素に直書きするならeventは決め打ちです
引数として受ける側はevでもeでも好きにすればいいでしょう

投稿2020/03/25 07:29

yambejp

総合スコア116724

taka_oct092018

2020/04/01 09:45

yambejp様、回答ありがとうございます。外部のjavascriptファイルから読み込む場合と、直接htmlファイルに記述するのでは意味合いが異なることを理解できました。

行動規範の内容に同意します

ベストアンサー

eventは何かのプロパティでしょうか？

上のコードでも、場所によります。function dragHandler(event)などのeventは単なる仮引数ですが、ondragstart="dragHandler(event);"などに書かれているeventはwindow.eventです。

ですが、サンプルコードのeventをevに変えてみた所、意図した通りには作動してくれませんでした。

window.eventを参照している箇所では、eventという名前でプロパティを参照していますので、他の名前にはできません。

「let id = event.dataTransfer.getData("text");」のように変数宣言すべきだと思っていましたが、

そのとおりです。

投稿2020/03/25 07:27

maisumakun

総合スコア146018

taka_oct092018

2020/04/01 09:44

maisumakun様、回答ありがとうございます。「ondragstart="dragHandler(event);"などに書かれているeventはwindow.eventです。」 Windowオブジェクトのプロパティと関数の引数について理解不足でした。 maisumakun様のご指導により、今の自分が不足している基礎知識を習得するため専門書を読み返しています。

行動規範の内容に同意します

eventはイベントが起こると自動的に発生するのでしょうか？

概ね合っています。
イベントの発生条件を満たしたときにリスナ関数を実行します。

EventTarget がDOMに定められる各要素の根底にあるオブジェクトです。

イベント種別に相当する発生条件に応じて内部的にdispatchEvent() が実行される仕組みで、on~ 属性や　addEventListener()でイベントリスナが指定されていると、dispatchEvent()がイベントリスナの引数に Event(またはその派生オブジェクト)を渡して実行します。

ご質問のドラッグ＆ドロップでは「DragEvent < MouseEvent < Event」が渡されます。

投稿2020/03/25 08:13