0

今日、同じ JavaScript ライブラリを 2 回インクルードすることの危険性に関する質問を読みました。リンクのクリックで呼び出される関数の単純なアラートでそれをテストする小さなプロジェクトを作成しました。そのようなクリックにイベントハンドラーをバインドするのにjqueryを使用しました：

ケース1

Javascript:

$(document).ready(function () {
    $("#TestLink").click(function() {
        alert("Message");
    });
});

HTML: 

<p>
   <a id="TestLink">Click here</a>
</p>

リンクをクリックすると、メッセージが 2 回表示されます。スクリプトへの参照が 2 回追加されているため、jquery はイベント ハンドラーを 2 回バインドすることを理解しています。

別のケースでは、コードを次のように変更します。

ケース 2

Javascript:

function showMessage() {
    alert("Message");
}

HTML:

<script type="text/javascript" src="@Url.Content("~/Scripts/Test.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Test.js")"></script>

<p>
   <a onclick="showMessage();" id="TestLink">Click here</a>
</p>

リンクをクリックすると、スクリプトを 2 回含めても、メッセージは 1 回だけ表示されます。

私の質問:

ケース 1 で、同じスクリプトが複数回追加された場合、イベント ハンドラーを 2 回バインドするプロセスはどのように行われますか? 同じスクリプトが複数回追加されたときのイベントのフックについて詳しく知りたいだけです。記事、参考文献など...

ケース 2 では、関数を呼び出すために使用するスクリプトを選択する必要がある競合をブラウザがどのように解決しますか?

4

1 に答える 1

1

最初のケースでは、イベントは 2 回バインドされます。そうすることが望ましい場合もあります。ある div でクリック イベントが必要で、同じ div で関連のない別のクリック イベントが必要な場合は、両方の関数を実行する必要があります。そのため、両方のクリック イベントが発生し、関数が呼び出されます。この場合、同じ関数が 2 回呼び出されます。イベントで 2 つの関数をバインドするための便利なシナリオの例:

ユーザーがアクティブかどうかを知りたい場合があります。body のクリック イベントがそのことを知らせてくれます。ただし、オーバーレイがアクティブな場合は、オーバーレイを削除する必要があります。どちらの関数も、本文のクリック イベントで実行されます。

2 番目のケースでは、JavaScript の最初のインクルードで宣言した関数が、2 番目の JavaScript の同じ関数によって上書きされます。最初の宣言はなくなりました。したがって、関数は一度だけ呼び出されます。

var test = function() {
  alert('first one!');
}
var test = function() {
  alert('second one!');
}
test(); // second one!
于 2012-07-31T14:14:47.213 に答える