onClick()HTML でなどのJavaScriptイベントを使用することは、セマンティクスに適さないため、悪い習慣であると何度も聞いています。欠点は何ですか、また次のコードをどのように修正するのですか？

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

おそらく、次のような控えめなJavascriptについて話しているでしょう。

<a href="#" id="someLink">link</a>

中央のJavaScriptファイルのロジックは次のようになります。

$('#someLink').click(function(){
    popup('/map/', 300, 300, 'map'); 
    return false;
});

利点は

• 動作（JavaScript）がプレゼンテーション（HTML）から分離されている
• 言語の混在なし
• あなたはあなたのためにほとんどのクロスブラウザの問題を処理できるjQueryのようなJavaScriptフレームワークを使用しています
• コードを複製せずに、一度に多くのHTML要素に動作を追加できます。

jQueryを使用している場合：

HTML：

 <a id="openMap" href="/map/">link</a>

JS：

$(document).ready(function() {
    $("#openMap").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });
});

これには、JSがなくても、またはユーザーが中央のリンクをクリックした場合でも機能するという利点があります。

また、次のように書き直すことで、一般的なポップアップを処理できることも意味します。

HTML：

 <a class="popup" href="/map/">link</a>

JS：

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), 300, 300, 'map');
        return false;
    });
});

これにより、ポップアップクラスを指定するだけで、任意のリンクにポップアップを追加できます。

このアイデアは、さらに次のように拡張できます。

HTML：

 <a class="popup" data-width="300" data-height="300" href="/map/">link</a>

JS：

$(document).ready(function() {
    $(".popup").click(function(){
        popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');
        return false;
    });
});

これで、サイト全体の多くのポップアップに同じコードを使用して、大量のonclick要素を記述する必要がなくなりました。再利用可能です。

また、後でポップアップが不適切であると判断した場合（そうである場合）、それらをライトボックススタイルのモーダルウィンドウに置き換える場合は、次のように変更できます。

popup($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

に

myAmazingModalWindow($(this).attr("href"), $(this).data('width'), $(this).data('height'), 'map');

サイト全体のすべてのポップアップがまったく異なって機能するようになりました。機能検出を行って、ポップアップで何をするかを決定したり、ユーザーの設定を保存して許可したりしないこともできます。インラインのonclickを使用すると、膨大なコピーと貼り付けの作業が必要になります。

非常に大規模なJavaScriptアプリケーションの場合、プログラマーはコードのカプセル化を強化して、グローバルスコープの汚染を回避しています。また、HTML要素のonClickアクションで関数を使用できるようにするには、その関数をグローバルスコープに含める必要があります。

あなたはこのようなJSファイルを見たことがあるかもしれません...

(function(){
    ...[some code]
}());

これらは即時に呼び出される関数式（IIFE）であり、それらの中で宣言された関数はすべて内部スコープ内にのみ存在します。

function doSomething(){}IIFE内で宣言doSomething()し、HTMLページで要素のonClickアクションを作成すると、エラーが発生します。

一方、そのIIFE内でその要素のeventListenerを作成doSomething()し、リスナーがクリックイベントを検出したときに呼び出す場合、リスナーとdoSomething()IIFEのスコープを共有しているため、問題ありません。

最小限のコードを持つ小さなWebアプリの場合、それは問題ではありません。しかし、大きくてメンテナンス可能なコードベースを書くことを熱望しているのであればonclick=""、避けるべき習慣です。

それはいくつかの理由で良くありません：

• コードとマークアップが混在しています
• この方法で書かれたコードは通過します eval
• そしてグローバルスコープで実行されます

最も簡単なことはname、<a>要素に属性を追加することです。

document.myelement.onclick = function() {
    window.popup('/map/', 300, 300, 'map');
    return false;
};

最近のベストプラクティスはid、名前のaddEventListener()代わりにを使用onclickすることですが、複数の関数を1つのイベントにバインドできるため、使用する代わりに使用します。

いくつかの理由があります。

1. HTMLとクライアント側のスクリプトなど、マークアップを分離することでメンテナンスの手助けになると思います。たとえば、jQueryを使用すると、プログラムでイベントハンドラーを簡単に追加できます。

2. 指定した例は、JavaScriptをサポートしていないか、JavaScriptがオフになっているユーザーエージェントでは機能しません。プログレッシブエンハンスメントのコンセプトは/map/、JavaScriptなしのユーザーエージェントへの単純なハイパーリンクを奨励し、JavaScriptをサポートするユーザーエージェント用にクリックハンドラーを文法的に追加します。

例えば：

マークアップ：

<a id="example" href="/map/">link</a>

JavaScript：

$(document).ready(function(){

    $("#example").click(function(){
        popup('/map/', 300, 300, 'map');
        return false;
    });

})

リビジョン

PASTでは控えめなJavaScriptアプローチが優れていました-特にHTMLのイベントハンドラーバインドは悪い習慣と見なされていました（主にYiddishNinjaonclick events run in the global scope and may cause unexpected errorによる言及があったため）

しかしながら...

現在、このアプローチは少し時代遅れで、更新が必要なようです。プロのフロントエンド開発者になり、大きくて複雑なアプリを書きたい場合は、Angular、Vue.jsなどのフレームワークを使用する必要があります。ただし、そのフレームワークは通常、イベントハンドラーがバインドされているHTMLテンプレートを使用（または使用を許可）htmlテンプレートコードで直接、これは非常に便利、明確、効果的です。たとえば、角度のあるテンプレートでは、通常、次のように記述します。

<button (click)="someAction()">Click Me</button> 

未加工のjs / htmlでは、これと同等になります

<button onclick="someAction()">Click Me</button>

違いは、生のjs onclickイベントではグローバルスコープで実行されることですが、フレームワークはカプセル化を提供します。

では、問題はどこにあるのでしょうか？

問題は、常にhtml-onclickが悪いことを耳にし、常に使用する初心者プログラマーがbtn.addEventListener("onclick", ... )テンプレートを使用していくつかのフレームワークを使用したい場合です（欠点addEventListenerもあります-を使用して動的にDOMを更新すると（かなり高速です）、イベントが失われます。ハンドラはそのようにバインドします）。それから彼はフレームワークの使用法に悪い習慣や間違ったアプローチのような何かに直面します-そして彼は非常に悪い方法でフレームワークを使用します-彼は主にjs-partに焦点を当て、テンプレートパートには焦点を当てないからですコード）。この習慣を変えるために、彼は多くの時間を失うでしょう（そして、おそらく彼はいくつかの運と教師を必要とするでしょう）。innerHTML=

だから私の意見では、私の生徒たちの経験に基づいて、彼らが最初にhtml-handlers-bindを使用するのが良いでしょう。ハンドラーがグローバルスコープで呼び出されることは事実ですが、この段階では通常、制御しやすい小さなアプリケーションを作成します。より大きなアプリケーションを作成するには、いくつかのフレームワークを選択します。

じゃあ何をすればいいの？

控えめなJavaScriptアプローチを更新し、HTMLでバインドイベントハンドラー（最終的には単純なパラメーターを使用）を許可できます（ただし、バインドハンドラーのみ-OPクエリのようにonclickにロジックを配置しないでください）。だから私の意見では生のjs / htmlでこれは許可されるべきです

<button onclick="someAction(3)">Click Me</button>

または

function popup(num,str,event) {
   let re=new RegExp(str);  
   // ... 
   event.preventDefault();
   console.log("link was clicked");
}

<a href="https://example.com" onclick="popup(300,'map',event)">link</a>

しかし、以下の例は許可されるべきではありません

<button onclick="console.log('xx'); someAction(); return true">Click Me</button>

<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>

現実は変化し、私たちの視点も変化するはずです

これは、「邪魔にならないJavaScript」と呼ばれる新しいパラダイムです。現在の「ウェブ標準」は、機能とプレゼンテーションを分離するように言っています。

これは実際には「悪い習慣」ではなく、JavaScriptをインライン化する代わりに、ほとんどの新しい標準でイベントリスナーを使用することを求めているだけです。

また、これは個人的なことかもしれませんが、特に実行するJavaScriptステートメントが複数ある場合は、イベントリスナーを使用すると読みやすくなります。

あなたの質問は私が推測する議論を引き起こすでしょう。一般的な考え方は、動作と構造を分離することは良いことです。さらに、インラインクリックハンドラーであるafaikをeval実際のJavaScript関数に「変換」する必要があります。そして、それはかなり古いものですが、それはかなり不安定な議論です。ああ、まあ、それについていくつか読んでください@ quirksmode.org

• onclickイベントはグローバルスコープで実行され、予期しないエラーを引き起こす可能性があります。
• 多くのDOM要素にonclickイベントを追加する
  と、パフォーマンスと効率が低下します。

インラインハンドラを使用しない2つの理由：

彼らは面倒な引用エスケープ問題を要求することができます

任意の文字列が与えられ、その文字列を使用して関数を呼び出すインラインハンドラーを構築できるようにしたい場合、一般的なソリューションでは、（関連付けられているHTMLエンティティと共に）属性区切り文字をエスケープする必要があります。次のように、属性内の文字列に使用される区切り文字をエスケープする必要があります。

const str = prompt('What string to display on click?', 'foo\'"bar');
const escapedStr = str
  // since the attribute value is going to be using " delimiters,
  // replace "s with their corresponding HTML entity:
  .replace(/"/g, '"')
  // since the string literal inside the attribute is going to delimited with 's,
  // escape 's:
  .replace(/'/g, "\\'");
  
document.body.insertAdjacentHTML(
  'beforeend',
  '<button onclick="alert(\'' + escapedStr + '\')">click</button>'
);

それは信じられないほど醜いです。上記の例から、'sを置き換えなかった場合、alert('foo'"bar')は有効な構文ではないため、SyntaxErrorが発生します。を置き換えなかった場合"、ブラウザはそれをonclick属性の終わり（"上記のsで区切られた）として解釈しますが、これも正しくありません。

インラインハンドラーを常習的に使用している場合は、毎回上記と同様のことを行う（そして正しく実行する）ことを忘れないようにする必要があります。単純なクロージャーで任意の文字列を使用できるように、インラインハンドラーを完全に回避する方がよいでしょう。

const str = prompt('What string to display on click?', 'foo\'"bar');
const button = document.body.appendChild(document.createElement('button'));
button.textContent = 'click';
button.onclick = () => alert(str);

そんなにいいのでは？

インラインハンドラのスコープチェーンは非常に独特です

次のコードは何をログに記録すると思いますか？

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

試してみて、スニペットを実行してください。それはおそらくあなたが期待していたものではありません。なぜそれがするのか？インラインハンドラーはwithブロック内で実行されるためです。上記のコードは3つの withブロック内にあります。1つはdocument、1つは、1つ<form>は<button>：

let disabled = true;

<form>
  <button onclick="console.log(disabled);">click</button>
</form>

disabledはボタンのプロパティなのでdisabled、インラインハンドラー内での参照は、外部disabled変数ではなくボタンのプロパティを参照します。これはかなり直観に反しています。withには多くの問題があります。それは混乱を招くバグの原因となる可能性があり、コードを大幅に遅くします。ストリクトモードではまったく許可されていません。しかし、インラインハンドラで、あなたがしている強制によるコードを実行するwithと、1つだけでなくて- S withが、複数のネストされたてwithの。それはクレイジーです。

withコードでは使用しないでください。withインラインハンドラーは、そのすべての混乱する動作と共に暗黙的に必要とするため、インラインハンドラーも回避する必要があります。