Question

今天，我读到了一个关于 the danger in including the same JavaScript library twice 的问题。我创建了一个小项目，通过点击链接调用的函数中的简单警报来测试它。我使用jquery帮助我将事件处理程序绑定到点击：

案例1

使用Javascript：

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

HTML：

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

现在，当我点击链接时，消息会显示两次。我知道jquery绑定一个事件处理程序两次，因为对脚本的引用已经添加了两次。

在另一种情况下，我将代码更改为：

案例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>

当我点击链接时，即使我将脚本包括两次，该消息也只显示一次。

我的问题：

在案例1中，当多次添加相同的脚本时，如何完成绑定事件处理程序两次的过程？我只是想要更多关于事件钩子的细节，当一个相同的脚本被添加一次以上时;文章，参考文献等......

在案例2中，浏览器如何解决冲突必须选择用于调用函数的脚本？

Answer 1

在第一种情况下，事件被绑定两次。有时候这样做是可取的。如果您想在div上执行click事件，并在同一div上另一个不相关的click事件，则可能需要执行这两个函数。这就是为什么两个点击事件都会激活并调用函数的原因。在这种情况下，它被调用两次相同的功能！用于在事件上绑定两个函数的有用场景的示例：

您可能想知道用户是否处于活动状态。点击事件就可以了身体会告诉你的。但是，如果叠加层处于活动状态，您需要删除叠加层。这两个函数都在click事件上执行身体。

在第二种情况下，您在第一个包含javascript中声明的函数被第二个javascript中的相同函数覆盖。第一个宣言不见了。因此，该函数只调用一次：

var test = function() {
  alert('first one!');
}
var test = function() {
  alert('second one!');
}
test(); // second one!

在脚本中调用函数，该脚本在页面中包含两次

1 个答案: