3

イベントハンドラは、主に2つの方法で記述できます。

<input type="button" onclick="clickFunction()" />

また

 $('#btnID).click( function(){ .. });

誰かがこのコードを後の段階でデバッグ/保守する必要があります。最初のケースでは、「要素の検査」を実行して、実行されたものをすばやく見つけることができます。2番目のケースでは、適切なドキュメントローダーコードを見つけて、割り当てられている場所を見つける必要があります。

推奨される方法は何ですか？

4

3 に答える 3

3

推奨される方法は、イベントハンドラー（2番目のオプション）を作成することです。この背後にある理由については、このすばらしい記事の「2.インラインJavascriptを記述しないでください」を参照してください。

さらに、デバッグしやすいコードを記述したい場合は、コールバックに名前を付けることを検討してください。このように、それらは「未定義」ではなく関数名でjsエラーに表示されます。

$('#btnID).click( function someEvent(){ .. });
于 2012-09-05T20:20:54.060 に答える
1

2番目の方法が推奨される方法です。これにはいくつかの理由があります。

まず、プレゼンテーションをロジックから分離します。物事を維持するのが難しくなるので、プレゼンテーション（HTML）をロジックと混同したくないでしょう。JavaScriptロジックがHTMLのどこにフックされているかを簡単に確認できるように、JavaScriptの単一の領域を「バインディング」専用にするのが好きです。ただし、これをHTML自体から除外することが重要です。

次に、コードの重複を防ぎます。インラインメソッドは、多くの場合、次のようなコードになります。

[ <a href="javascript:void(0)" onclick="closeWindow()">X</a> ]
...
<button onclick="closeWindow()">Close Window</button>

問題は、単一の関数またはメソッドを参照する多くの異なる要素になってしまうことです。その関数またはメソッドが何らかの形で変更された場合は、すべての参照を探し回る必要があります。これは、基本的なコード重複防止対策に違反します。このようなことをする方がはるかに良いです

[ <a href="javascript:void(0)" class="closeWin">X</a> ]
...
<button class="closeWin">Close Window</button>
...
<script type="text/javascript">
    $(function() {
        $(".closeWin").on("click", closeWindow);
    });
</script>

第3に、デバッグ目的でブレークポイントを追加できる特定のユーザーアクションに単一のチョークポイントを使用できます。確かに、呼び出されている関数内でこれを行うことはできますが、専用のバインディング領域があると、処理が高速化されるようです。

第四に、それは複数のバインディングを可能にします。たとえば、3つのボタンがあり、最初の2つは1つのアクションを実行し、最後の2つは別のアクションを実行します（したがって、2番目のボタンは両方のアクションを実行します）。次のように、onclickでJavaScriptの複数行をスローし始めることができます。

<button onclick="one();">One</button>
<button onclick="one();two();">Two</button>
<button onclick="two();">Three</button>

これはそれがそうであるのと同じくらい醜いように見えます。次のような厄介な中間方法を使用することもできます。

<button onclick="one();">One</button>
<button onclick="oneAndTwo();">Two</button>
<button onclick="two();">Three</button>

これも非常に醜く、メンテナンスの悪夢になります。または、いくつかの単純なバインディングを行うことができます。

<button class="actionOne">One</button>
<button class="actionOne actionTwo">Two</button>
<button class="actionTwo">Three</button>
...
<script type="text/javascript">
    $(function() {
        $(".actionOne").on("click", one);
        $(".actionTwo").on("click", two);
    });
</script>

はるかにクリーンでメンテナンスが簡単です。

さて、どのイベントハンドラーがアタッチされているかを判断する方法についての懸念については、完璧な答えはありませんが、かなり良い答えがあります。GoogleChromeを入手してください（これはSafariでも機能する可能性があります）。Google Chromeで要素を調べると、その要素にアタッチされているイベントハンドラーのリストが表示されます。

JavaScriptに「バインディング」セクションを含めることについての私のアドバイスに従うと、何が何にバインドされているかを絞り込むのは非常に簡単です。しかし、Chromeを使用すると、さらに高速で簡単になります。あなたはあなたが最もよく見える方法であなたのコードを書くことを歓迎します。リモートバインディングがインラインバインディングよりも優先されることはかなり一般的に受け入れられていますが。それを超えてそれらを処理する方法は、あなた自身の経験とプログラミングスタイルに依存します。

于 2012-09-06T05:06:28.490 に答える
0

上記のすべての優れた回答とは別に、イベントハンドラーに多くの可視性を提供するビジュアルイベントと呼ばれるツールを見つけました。

http://www.sprymedia.co.uk/article/Visual+Event

于 2012-09-06T21:00:05.673 に答える