在頁面中包含兩次的腳本中調用函數

今天，我讀了一個關於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>

現在，當我點擊鏈接時，消息i s顯示兩次。我知道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中，瀏覽器如何解決衝突，必須選擇使用哪個腳本來調用函數？

來源

2012-07-31 Samuel

在第一種情況下，事件綁定了兩次。有時候這樣做是可取的。如果你想在一個div上點擊一個事件，而在另一個不相關的div上點擊事件，你可能想要執行這兩個函數。這就是爲什麼兩個點擊事件都會觸發並調用函數。在這種情況下，它是兩次調用的相同函數！在事件上綁定兩個函數的有用方案示例：

您可能想知道用戶是否處於活動狀態。點擊事件機構會告訴你。但是，如果疊加層處於活動狀態，您想要刪除疊加層。這兩個函數都在 body上的點擊事件中執行。

在第二種情況下，您在第一個包含javascript中聲明的函數被第二個javascript中的相同函數覆蓋。第一個聲明已經消失。該功能因此只稱爲一次：

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

來源

2012-07-31 14:14:47 rsplak

+1。在情況2中，沒有衝突要解決; showMessage的第二個聲明會覆蓋第一個，所以javascript引擎只有一個showMessage可供選擇。 – Chris 2012-07-31 14:18:54

在頁面中包含兩次的腳本中調用函數

回答

相關問題