javascript - javascriptの関数呼び出しの違いは何ですか?

Question

次のような JavaScript 関数のインタビューでこの質問をされました。

function a(){
 /// ----  Some Code ---
}

HTMLボタンクリックで

<button click= "a()">
<button click= "return a()">
<button click= "javascript a()">

これら3つの呼び出しの違いは何ですか?

Answer 1

<button onclick= "a()">

関数を実行するだけa()です。

<button onclick= "return a()">

これが実行され、関数からの応答が評価されますa()。この応答が false の場合、他の条件は実行されません。

<button onclick= "javascript a()">

これは機能しません。<button click= "javascript: a()">例1と同じ結果になります。

Answer 2

HTML は無効ですが、もしそうならonclick:

1. ただの関数呼び出し。
2. 関数呼び出しの値を返します (これが の場合false、要素をクリックするデフォルトのアクションをキャンセルします)
3. javascript識別子 ( ) の後にスペースを置き、その後に関数呼び出しを続けることはできないため、構文エラーがスローされます。

最後のラベルがあればjavascript:a()、まったく役に立たないラベルになります。

とはいえ、3 つすべてが HTML の悪い例です。onclickを優先して避けるべきですaddEventListener。

Answer 3

1 つ目と 2 つ目の違いは、2 つ目は関数からの戻り値を渡し、それをイベント ハンドラーの戻り値にすることです。falseこれにより、関数がイベントのデフォルト アクションを停止するために戻ることが可能になります。デフォルトのアクションがないため、違いを生まないボタンの場合ですが、リンクであれば便利です。例：

function handleClick() {
  // do something here
  return false;
}

<a href="fallback.html" onclick="return handleClick();">click me</a>

スクリプトは、リンクが に移動しないようにしfallback.htmlます。

3 番目のコードは 2 つの点で正しくありません。このままでは、構文エラーが発生します。例はおそらく次のようになります。

<button onclick="javascript:a()">

ときどき、イベント ハンドラの最初にjavascript:(not ) を置くことがあります。javascriptこれは、リンク内の URL で Javascript を使用することに由来します。

<a href="javascript:alert('hello')">click me</a>

このように使用すると、ブラウザーに、移動先の URL ではなく、実行するスクリプトの一部であることが通知されます。イベント ハンドラーで誤って使用すると、代わりにラベルとして解釈されます。たまたま有効な構文であるため、スクリプトの動作が停止することはありませんが、役に立ちません。