javascript 调用在页面中包含两次的脚本中的函数

woobm2wo 于 2023-02-07 发布在 Java

关注(0)|答案(1)|浏览(100)

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

案例1

Javascript：

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

网址：

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

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

现在，当我点击链接时，消息显示了两次。我理解jQuery绑定一个事件处理程序两次是因为对脚本的引用被添加了两次。
在另一种情况下，我将代码更改为如下所示：

案例2

JavaScript语言：

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

网址：

<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中，浏览器如何解决必须选择哪个脚本来调用函数的冲突？

JavaScript

来源：https://stackoverflow.com/questions/11742066/calling-a-function-in-a-script-which-is-included-twice-in-a-page

1条答案

按热度按时间

vc9ivgsu1#

在第一种情况下，事件被绑定了两次。有时候这样做是可取的。如果你想在一个div上绑定一个click事件，而在同一个div上绑定另一个不相关的click事件，那么你可能希望两个函数都执行。这就是为什么两个click事件都会触发，函数也会被调用。在这种情况下，调用两次的是同一个函数！下面是在一个事件上绑定两个函数的一个有用场景的示例：
你可能想知道一个用户是否是活动的，身体上的点击事件会告诉你，但是，如果一个覆盖是活动的，你想移除覆盖，这两个函数都是在身体上的点击事件上执行的。
在第二种情况下，你在javascript的第一个include中声明的函数被第二个javascript中的相同函数覆盖，第一个声明消失了，因此函数只被调用一次：

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

赞(0）回复(0）举报 2023-02-07

我来回答

javascript 调用在页面中包含两次的脚本中的函数

1条答案

相关问题

热门标签

最新问答