Javascriptにおいて（）がつく場合とつかない場合について

Javascriptにおいて（）がつく場合とつかない場合について

htmlでonclick属性を持たせたときとscript側でイベントプロパティで
oclickを書いたときでは()；の有無が違う理由が知りたいです。

該当のソースコード


<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body >
    <p id= "ab" > test</p>

    <script type="text/javascript">
    function a() {
      console.log("Hellow");
    }
    let p = document.getElementById("ab");
    p.onclick = a;
    </script>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
  </head>
  <body >
    <p onclick="a();" > test</p>
    <script type="text/javascript">
    function a() {
      console.log("Hellow");
    }
    </script>
  </body>
</html>

javascript

### 試したこと
イベントプロパティで（）；をつけると勝手に発火してしまいます。


### 補足情報（FW/ツールのバージョンなど）
chrome　最新版

kei344

2019/12/04 12:26

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

m.ts10806

2019/12/04 12:35

どちらもa()　と書かれていますが、どこの話をされているのでしょうか

tokkuman

2019/12/04 12:37

お世話になります。「<code>」ボタンを使用してみました。これでしょうか？

kei344

2019/12/04 12:39

こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

tokkuman

2019/12/04 12:46

お世話にないます。 ```　再度してみました。後、p.onclick = a（）;を p.onclick = a;に直しました。いかがでしょうか？

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

回答1件

ベストアンサー

p.onclick = a();
この処理だとaという関数を実行した戻り値をp.onclickに代入してます
本来はクリック時に呼び出したい関数自体を代入しないといけないのでp.onclick = aになります。

<p onclick="a();" > test</p>
に関してはHTMLの記載でonclick="// JavaScriptを記載"となりますのでaという関数を実行したいのでa();と記載します

投稿2019/12/04 12:38

rururu3

総合スコア5545

tokkuman

2019/12/04 13:38

お世話になります。回答ありがとうございました。正直、onclickプロパティについてよくわかっていない状況になります。 p.onclick = function () { console.log("Hellow"); } であれば想定どうりに動くのは、a()；が実行後の関数であり、上記は関数自体を代入しているという理解でよろしいでしょうか？