0

今天，我读到一个关于两次包含同一个 JavaScript 库的危险的问题。我创建了一个小项目，通过单击链接调用的函数中的简单警报来测试它。我使用 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>

当我单击链接时，即使我包含了两次脚本，该消息也只会显示一次。

我的问题：

案例一，同一个脚本被多次添加时，两次绑定事件处理程序的过程是如何完成的？我只想要更多关于事件钩子的详细信息，当一个相同的脚本被添加不止一次时；文章、参考资料等...

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

4

1 回答 1

1

在第一种情况下，事件被绑定了两次。有时希望这样做。如果您想要一个 div 上的单击事件，以及同一个 div 上不相关的另一个单击事件，您可能希望这两个函数都执行。这就是为什么点击事件都会触发并调用函数的原因。在这种情况下，它是被调用两次的同一个函数！在事件上绑定两个函数的有用场景示例：

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

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

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